{"_id":"suo-mobile-all","_rev":"121-23010929969c7f8c3a5405fdc1191bb1","name":"suo-mobile-all","dist-tags":{"latest":"0.0.28","beta":"0.0.27-beta.6"},"versions":{"0.0.1":{"private":false,"name":"suo-mobile-all","version":"0.0.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","precommit":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"*.{js,jsx,less,md,json}":["prettier --write"],"*.ts?(x)":["prettier --parser=typescript --write"]},"husky":{"hooks":{"pre-commit":"npm run lint","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"5ee6c2b348d4952d0e22671a969421d27630854c","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-NZ7pprTjBpkjvw8+aQFKEjwoFTVZ+WifK3+SSVU7Y742VH1ribcSceiYzFK0k/18K6Oi1nI8SzVEu7wxwqrvfQ==","shasum":"7b0ec85b1b76f0e587eb241b4f2a94c3c8ac2ff9","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.1.tgz","fileCount":287,"unpackedSize":1234964,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFffJbPd6jFQ+9C8S68oDa4v+zXY5ifLn+j/iwU1A2mxAiAQEh3llzY51oZMjoE8idExlDUsro59cR1zyyATIztMcA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwprzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1JhAAoogQ6Pz9LMk1DG7ajC8338Y63izVf7+niQEqmh8AbyG/0q2b\r\nySpcDj4cOyKbm/llxxij8utHoU4QOoUP5hBcoH3IwpsQe1PIbO24Aoap6VqR\r\nQxWVOSljVGnjThXx/h9G5hXlJYQY1V25v4+wLo+CXeo6D6MKc3HxZ0G3Jfej\r\ngsiUc+dsWI1QrPT60oL/jEoeHo2juDY4KOm04bOjNnN5cdLBQDxR5ZA4xtpv\r\naqkp6y6HFV/gQRSOC2rmtSHcFTvXWRDTggKEjO/mLRZTSXVs2X/AyqlnZQD8\r\nvPGhfG2JCF4ExIOcY3u5hxXaRxwst7kvHRClK2o9FPHdA+Suf+ocrQ0RKiQk\r\nw0uxoctsA+jc5ads7kihcxQWBRkqozE/OGoILowMFymBMgbMvo29ZD8mAYma\r\nRXchbix78SKFfgWr5Lsam3/ELyiI4U5SLMP8Db04/VlYpPoqdROHdSTz/OyN\r\n7FQN49J5QJoBCY710ARHsFEcKcIk6tpJO4cF6/XalbIOpBreAtrW/gfPFjKx\r\nOfZ5cKGndOg8uANisAMxOk4WM7/fAI+W6c2jZxy9hoQsh2McGUwxbiikYxX6\r\n/og/9b3TAsCDVqgIYvtOKRjnssKNYNSqKwzrZWl+rHSIncFmljbJsX09csxh\r\nxNcr9raX6KHxmv1F9Hl3xGewA6hutz42tjs=\r\n=myLF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.1_1656920818857_0.24743100314207633"},"_hasShrinkwrap":false},"0.0.2":{"private":false,"name":"suo-mobile-all","version":"0.0.2","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"49d976ec76718414fbea4a2a03a85b8b89394fb0","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-/MXxQvcvCio+SVxka6jRyp1t0nHxN9CtMDi2jU3NUf0ATydOp/fOAH8DgSo3+vj9R3rnK52k+gaVCeTLtDTbgQ==","shasum":"8502e72a20ed880ad94da8e5f6d97fc7496e0902","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.2.tgz","fileCount":288,"unpackedSize":1256655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3reiR7VQsH7B1Lg69SfDoeTEXvvKQTlXFyHrMXkeqfwIgWNI2BZt0WS+YLxsy+O3PCWi0B8OWcGpOcq/eGo5DmA8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizjcVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCLw/7BGfwNBnrHv+BiZ5V8/pTeToUNzKMfPgxwF6woA77563BCmmZ\r\nfuS6DLEvbSilO6uhty5NeusneWub3OCyNl8mq8IoYzyiA3CtwyPlYHdX7XGp\r\n6UPfeilTP2nbqp9D1xC+CbBVZjCQlOKj6oOb/XcZIE9KMXwVtJzRV4HtUaee\r\ntgQ0hjgXFEPdSnjrpUEiCRTW7/Xi3oDCGA3au2uxyqOREUYGQN/kKy5r3QuE\r\ngWvtRilIDfFt21jivgKvwTUCTZ1dA/3NGAHiwqD9pQZP/oirfYSq3gEtzFMp\r\nhYfsOuhdl7d0aVcph1mdn/2sc8ZWe4oZfbMUQsKkh2jX/l5CgjaEaRCYdMQo\r\nrNIMvFFnaGuyBfR0t9CQn4PICjVtLLZfjN65VlDUMdd4MKku6dSTSiy8uAlV\r\nd00b0qMFtMsC4aPqmEo+17+4X8CdZjwNdF0JsaR7mJtgwNlyqNz/4SIBUJWw\r\nMbkioHzxfxJxc38Vf6gUHOh3nGR/P1PIwPkH3s8DUreMi2zwOC62IxqFTEsl\r\nwI40sFP9kZLjkPkm+WAlU/e8yByiXT3zBis9Y0cBcCKBvW3KQ7S2Xeds5jw3\r\n2WHyMpeOHwc0DVs6KX7rdt7g/ZIQ76E1RmZH/0xT2c611Egshx8/hvdkJWNl\r\nQ5EmSGqwAtwsFhWN729AT9XpTtEoryhJ7EU=\r\n=WIIh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.2_1657681685082_0.07689800089398546"},"_hasShrinkwrap":false},"0.0.3":{"private":false,"name":"suo-mobile-all","version":"0.0.3","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.8","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"49d976ec76718414fbea4a2a03a85b8b89394fb0","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-c24AlBC6GSVs6KDCKJihv+TLmJggJdDTrEc5LNz7xj9jXsfeGGIYH+SQdx6b4I+Eqcx8fssyAD4ZTy3aTCwcow==","shasum":"68ad5545ab6c9a7e0a21de5f2cb5f25d4da37be4","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.3.tgz","fileCount":288,"unpackedSize":1256655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDit63/r16Ir6j7BnAChQmPiZkNP7vY+TqKIP6r7tlKPQIgD9jBlO47oPDhMktLTOVScht5oFiiQfOSgVFVi3L/GiQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0NB4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgiQ/9HOOUzB1zLCkH+sTpWFuqrYrlroolHqoY/59cj5MbvnlR21Ch\r\n10jbWqKLrqV0c5e7lDmEUNWIq8ggYgdnIqp9yZ8TtyqK/sVRRQMQ3zsmYjPf\r\n007d/bB2Wmmli9I20IohQ0RI6uQtXVnkbx/s2Xf8X9fO3dgI0H+BuaAK+hv7\r\naUxGv+CESwfCo24Tu/9pXbtG8mmzfFF3BxaozeA2dEdiMs2TZlNcv9lNZm3x\r\nevQEUyDFiNEBlyirVVFgJtxVsCSsyqH+Z5v1bQAbWuIbiNcR57oPRv5Tmtqw\r\nahhcipx1OFWC5FOJK7frKVXTm5DIN9vaQ0Vgej4/Yl7/xMvR5DYwn/nl5POq\r\noj2S6DbEjkPTLwNEf2NnRPCsteF6lLDq+lTpv76bYIHrLfGhc9o3BlU9nlIr\r\ny8nPK82A43yN3zbru/xsDlNUigfY1rlpedArs9KlpCGKehFrGpLbVHmJzFwf\r\nlMCy4mMDxfzpufJYFI0yO/i2qI0Fsowz1c6NILndwsGLE07AicXHL0JOtLEi\r\nDQro4d/ErNWu28BU5iyjaacAQ1v70Vi9lJ4EKuiDzbzh1QPtIxBy/0e8nXca\r\nfWSVi//oUrNCDHCT0sB9+sB4auy5Fczw5BKNjcDNHtVuYvgggwnOhvpHnfI7\r\nKnYOFXDe3/J0G5i1MI8cpO61/P6YpTsfMXg=\r\n=GeZc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.3_1657852024394_0.4582368235430334"},"_hasShrinkwrap":false},"0.0.4-beta.0":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.0","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"6fd262726c0d55847c655f1edde38bb1e692ffea","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.4-beta.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-EJO3agL/3xBt6ap044/Ve9+tb9yg8nkBBPTb8iNJxgvtLDTgVw/Ba/HltOM65RK6yuJ7yKxL2hEZOhwSAozSyw==","shasum":"14675e42b8134324505a956c93bb52fa1b440ff1","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.0.tgz","fileCount":288,"unpackedSize":1256662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+BdbE2SKcO0Q767tcvcKQIqDO3HTczjgkkRyQodly1AiBmM01oZKB4e9/7vBbwgt0ef4ssW+NABfOAU+GCfNsenA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0PuYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZZQ//boKJ2MINAbKPtLjnJmgK025CsqiOJkK9kREqcm1tIQe2fUBI\r\nIDC8s+KqYx8WPjbPJbn/2gJNvmHZAfmkSdwLAHDPjFWKVCmbjj6v9sMVoCmb\r\nnQtjN5+oGPKGRG53RygdMNiJoE0m1/bvOaSmMnhFHQRcW6/l4guIcsQgkRG8\r\ncWEdTbBnh9y4BNKS5EdFtqC+o1P4bFsU03n5sXPIv62x6siFB9XR4CXEHf2F\r\nbzK+rc9SvSA43beaONdJqMDZ8d4Ej2uogar0PBBQY7DGEEpeYcK/giRk4JxS\r\nxlYPgY9JPG6O+rANJNsUKyohD3pHXii32CfSgyK1XHJKy0Wn6F0LuAKUKA++\r\nQ2Ht6wgadQXGynOxrjTLZRnTd0Iay9j6JoXeC0ZahQkxBSQpKulO9wT6PCoQ\r\n2aNVzHVGK689tL1M/glCcJuXyZb+qv2k2cEsHEzrYHZ4nxSg8yn5gc0ZyBJX\r\ncJR0tZiaOec2T2alCC1QUAiUkqT/GhBLYS00A3evNhYXsue4fuZtYTOMUIDD\r\n5GmR3HSzYSbzphqS6DbEbIp0kpXxHXvIBqrBO0fDtVkCJnoYbJwVBKkLRJGC\r\nOWUqr6TNLkXVWv4u7ciz4T5/3AHtu++GVlL883pGsCHird9BTkkGtkxRbGjT\r\nsrLxnJSaav63b1gKQTSfA3BmJgeChS7a+n4=\r\n=71V1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.0_1657863063902_0.35835461659215895"},"_hasShrinkwrap":false},"0.0.4-beta.1":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"a65d131e19dd87c1df4d7476597141a096897a08","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.4-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-WirtUtQ5DEFsP/5fbnYt7q3Q36GxLoqkDzdgas5KFsUWsSuzcb6eSBAUF2W7yi6JfsZzOJzDwzla2Gtj/c1kMg==","shasum":"0d836deb3c300d878e092801ac96bb8f7abeaff8","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.1.tgz","fileCount":288,"unpackedSize":1256862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUuyixfwr7VW3NBoUHfol7IPVePndFXQ3wHysB80O93AiAaidbLC/WH+PGHOLjwztz4hmN3SlNksPkex/152PkR3Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0PxLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeXw/+LmsQBpPFlrywt/qXVHIMCZ0ltHfVU2/Mwb/xWLt0vuODX5pN\r\nu+Ejr3oDmX3l3Gvw/ca69KxcQ5rZV5G/OnkYHexMd78ojC0vcJMbINuAjEbU\r\nEZqNTkQupEpM8MNvD3Epw3Z2+44WZM9lmWIjoRz2vaBJ7TUm1jSYhNtKBZfD\r\nKr7/PHse4ruKXIQY85rscBEn7Igp+OgMc+WgTUB2Yh3Ltq1q2vMrTxPQSzRD\r\nvUnbz4duDAirHbXGrQv0kElu0SuSbpH9glTlrKsYxrWWuzFxJiJqdFMF1USt\r\n3vpzK2muMxGLZ9c/AVmXA9lKUoqcCvUwFdpjTH5oNWMM+PPCHniFreH66go0\r\nLD/MjI8Ev8E3WGxq8H6z6uTEnXr2tVW/5lg8EqCwx07F1vzLhSKZlgNwIXAp\r\nNoo4Iq43vvR5qOeCGCcQ55t8DaCZXriivr4hp1RsqfCzBSB8bIKT8b5VON6x\r\nKRuYudnystcWl8sKb8SzE5V9mI038F3tqKh/kM/2z6cJHXiwPdrKzm2Zlp2i\r\nwTsJKQac1rYcl60BZlSq7W/KYI1qcKH+tv5yONmabjPFn6ZVwl2pZJWZqBWt\r\nHK8I5W8p0y1rUTG5uW6BClBZbF/kEP7ettmy7UZMk8ZVjyaan/LTJd4gH9Un\r\nhezmbleKZGMcGq6F37lGqsaANnCI9zdTYZg=\r\n=NKoO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.1_1657863243199_0.9360853688655775"},"_hasShrinkwrap":false},"0.0.4-beta.2":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.2","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"11298ed6ae1f0b4d3999f3e547840f838cefadcc","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.4-beta.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-SftaUtCOchMCwePNjNnzmxQ1dZWagqM16aiCo4yPJ2nRB4ytA2Pd7L5jVN/Nr0fd9FGf2VLLdumVviEDDW8cvA==","shasum":"0f1048ac224f58331436abc37500e48dd520644f","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.2.tgz","fileCount":288,"unpackedSize":1256869,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDD3/B/u+5Q4rUxeLfJ5g81IEOJ1AyAwpKmNTyG7oFV3AiBRvuJCESPNiu/dPeZulFPq2WmaAVxAvRRGY9EblYQkZA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1Lb9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJKA//QmxxIb9m0bJ8kCcedLgLAPKQsbyOvFMh8wTOrKqjYgcJCcQk\r\njvBTLTYZJEwpLwUMQUsgiDeQI5pn1baW3Iy9cqIU6AdMMQWXwF4YD38Qf7cx\r\n028cBGKGIV80SEbs7qBzbGiipVeOIN2n+XUoy5BHEyxpPMGKci/6IQEE1I0A\r\nETlrMoOVSLG2PDJOxepCOkrwtOhOof9oeqFXG/AHrdVp5TtiZNywfQWPhzjJ\r\nk90pc/Kuo8+DFasBRh26lMDFufnxHbYyWx0R46dm3k4UlIw0xmU9B82g/f53\r\nddrqoSyociYsNqYHgmL664CXXMHhhSRzY3ep2fzv/X427NHCmVgWllSbSyyv\r\nIHXOOhGC472GDdrnRCF7HRL+LYxydQmHri1TYxEkzXGqc9e3oZy/GhXyOYEd\r\nLVE6EWf5M4UtJ8ZtHqkGRk2ZagMpCr3CSZpKET1cUcQ7SnrhjkAQHT1RHv1+\r\njTBFZF53ywxlfCSh8CTal3h8yNmN1ouOFet1Yr15r030ANrjNFec1vSftteS\r\nB3Rfu7IxqRQYLmSn7RFjfEWVAmJSf4yCfbV1EjnIvNgme2reooNvGBOWUMdG\r\n6hSlNJPyvJPhexEwPriZBlCqPApinI7xdT7xfoMNAsChkSHnY4tGhYuow4LU\r\nvGgGyPbP25TjBNACjHir4PrIxwmmXpLQ/3Q=\r\n=bWZa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.2_1658107645285_0.5530590120959844"},"_hasShrinkwrap":false},"0.0.4-beta.3":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.3","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"5e8d55651b62c8d8380b1c3ab686d953073e1e14","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.4-beta.3","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-ktVVUP/jzNV5dItF9bMJRy10W4tEPHRfXQQoyhyo7pLO7QTTq5jneoXDwUaHVOlQdvODKXMu1ypHSsK7rQdIKg==","shasum":"2d56c90be4a52febfffff9c3bdbd9fb5d5aa3899","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.3.tgz","fileCount":288,"unpackedSize":1273897,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJPK/iK9xLBMtGSqzHV4cj5Vj9ol+CYXMptYfDdjDhBAiBg02b1CgiMNfVg5N4UGMhC47WBlAoD5Z/0oath+EKUOA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1MkXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7cw/+NIv1tJsp+F1L6nCLLGRu+ExWp6YdA5GgW8216xtTBjx1zvmp\r\n1qg0heKVGpbQ4yuI2dUWVZTcEtlX+rIRl98JBkaSnHRNmaUY3aWJ40Dr7qJn\r\ntooMPa0gSfMO1njNXD+ImNFFvmUZsb5dHA2YhulYP4smUFMQNiTXqA9JOGlW\r\nlcQCepagYIvg9VzJG/XdWRm1G5H+97XJU4VlifUGwDlM0d3c98jCCYTyxLd+\r\n5+pzex9X5zEL21yeFJuQIqjyOA/J9g3MQEpWXmvXPi9aKxHslKniQOEdNvdB\r\n2+d8WzVpjNPjdkLzNo43vL6OPvNYiF5KDIIwvTRhVz5SfeDUX8FuiiY7mAd3\r\nc6+3FZ35QpSQeYqRxwMtNATH7R/FGqMsV6qcW2o3HrkXaWmj/o261x0aLV1F\r\nvSn1X2OzyTACYWwCnJiZGD9thf7GIsScTBRClLWwLELKOUx1btLK7C456riF\r\npUFKpmV5WumiguJ3BuORyeHeh9wJT6sHE6O4YmtvoHhJhNSBsV1K9dZ4ctt5\r\nwkwl8EPkCDdXX/BLuPI1ILbnRE9djdyw3rBvbfRyzcpbjtRVB79dP+NacSH9\r\nhSCPVKNZGJB/A9uZ2OczMMMdyQMzD1erA0LJsZjZS3dUE2ztLNb0YT8bCMP5\r\nEtwFoKOKSMCmMoX2nxV03VDzyEJ2Pl1ZvQU=\r\n=iT2r\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.3_1658112279746_0.6781690917929288"},"_hasShrinkwrap":false},"0.0.4-beta.4":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.4","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"cb4cfc860ee8af0355da817bbffefc7469bbaf6f","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.4-beta.4","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-R3IXFHG4OGKxN9A8CYVsojs76kYoLiYashSaS08eA4+IieYOkCc8KCerxr8nj7S07WgTL5+VtvMVRWVTbSQ6vQ==","shasum":"752c0f657034cce8cf4495a1bb1c4c4960fec557","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.4.tgz","fileCount":288,"unpackedSize":1273762,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC99wKzLgDhmw5UCmS0xSdG11Ujo/agvOK59BgQDJdAmAiEAxqQ4d79p0IWePgNtxZBGcLIyyJcuVWzV4zQKIPj50DQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1lUiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyGBAAiqs5IP7ubGovLJqsj+L2RCq0lMNHvAVP1J57RThCK2CHlCaf\r\n7T+XY+aA+CSdBIrBce4NN31Niqz6dsjiJZGeBj/w2VN1HuVDqygm9M74VchD\r\nDIfM5MwcEjwo0vlgtByN0EX2//fElpt0clwYp8yobto7n52PiKB2pYT5A8B+\r\n181FUbI7AS5QOO/1fAug8RZ3SQLqguKWYNH1kX9duMJVgOGksXCHc1jm5rEU\r\nJxwy2LLVeeODCOe7OfGAvdx5OQfTuG1l0W6cupoBCnNNsSt8RZD9EXIgSRin\r\nx4kWrRJjYHQqzd+0ZkDnJ0nOKb1fHdXJ0eIJBItA80lnD4PCadN1V4kqcJYq\r\nPmuGdI8fKiPNZ1eEAencHScdETH8nTNhe06Sq7ipqLsJgU9KwadyWzTceXhk\r\n3ZfhRgJpiVqGFtKz/e6azF5JIGZeCGzSNk1fGM33NdW75d22uyv34m3HFqf3\r\n6a1Wn1NnMmFqKj+HyLjY5mt05bft1jPU8eCFvtBPsV0l6w87zlHP/iltjS0F\r\nprE1T0Wyfoi8iH5lC1mNwenkcRvGsp+H8crWz0YQ5635klGOzYnnloAkp6+/\r\nQhaoSUyNv+vXelPqv7S5T7wsYfZBNLkUcsZ5zsfJUuCpPT1IcvBCAL/mOTRB\r\n7742hvILdJeo6K1bUYnZTGG1rS/aGt07B7Y=\r\n=0ftv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.4_1658213666108_0.5312246133068317"},"_hasShrinkwrap":false},"0.0.4-beta.5":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.5","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"3cdbe5c365c52fce71a84ecd479becbebf871e16","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.4-beta.5","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-1dggHumkBmz23j9+g7fJCk9XlCULFIKOYTiuwaFOPjGUQuhjkXZBhZA8D4RaWvIwedt8rRXe897lJADzLL8r7g==","shasum":"a0ff9a7fd6af95ab4e47802cd6ae40ebcdd9967f","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.5.tgz","fileCount":288,"unpackedSize":1273505,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4sXHmDL5cH674Y+KGRhC7YOoxfI96XMHBSSbmHyBnewIgaLgajcObPKrhP0KPLqgc1vg9LY8zm5vh1CbvKAi5eyU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1naAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrewhAAof97W/c7Upi9+FXZpAQ0rdzJJum/elJKRDggo1/6gzVfK8Dk\r\nAeqICdwpOrKOvd1e58U8qq3vwtVToyj7QLfFKlPVgH1rpL1+E21m5kCaOt4m\r\n7nFzjkQvvz8HdTY7MmwVLUYLaSb1TuS+Ci4AcZeI1UdKQgZa+A56b1fUh0nU\r\nMgkQuk0JWiHeaKQbJTDkwsokbMpSpQuWzWHCM5TuloMzwBSxUZQYQjk2Yc0u\r\ns4GMelyMy8epFKCV4fP7TjQLaiUpfBwXOv/NBQ3qxykJaCxjqcxLywNoQ/Lr\r\nKNHS2eRWQMbbdbO+XjPU1ZtdYREYbrJ3y1hqZ/scez0SU64Hdcc5oV4gX52p\r\nuuGleNncj+5fQ0xkevt33Xn+oMozSA/NJW65Ni50aiQxdfp1+i0XSmMUQrnx\r\nuAFtMWn/Xv0RtVO5rTLm+P4cGDPi53agpo48TK6H9MCryakHzH4TRHfERVyE\r\niNLO5gbyWuQzskDLLs+8ldMQk32KLqkCuyr2eDD8O8WeboHQVVb+vcpn5YVD\r\nyXtLvKKuoOYwQa+8HD3DXJE0fufDQnmCGYFz0sXiM7mH1zXRDY0D7xBBAkKq\r\nRFkJAqtVFyxSq4p+oFzjOEtm2ubKzc10WkBLXHnchkrUCh7r65wf33jvrSz3\r\nh1zYcqLfxszN/K59rysKSynB22/bFajLTIw=\r\n=BqVu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.5_1658222208749_0.8018253957198092"},"_hasShrinkwrap":false},"0.0.4-beta.6":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.6","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"6e10e949dac2b1c20e8567a4630990e5b6da2282","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.4-beta.6","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-osEdl4q5Z+7uCCysOemG9AQ1E7NtceOqJc7VomKP1LBiF6j3doMzDp5z6Wiu+KH81IilUrI7jP3JAPmdMq3vnA==","shasum":"768a25310df8c4e3b67f8f633a066a9a44eff90c","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.6.tgz","fileCount":288,"unpackedSize":1273656,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBIwswbzPQIOtUr/WxZF7Xp4hqZGSoHJXgBAZwaeAN3OAiEAqYaW/xJfVl+DYR+7raK5vba/R1Y6r30qSpUClpvyt+I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1oKLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE1A//Ydve4JvE3TBKIsScDGK5VjnuFrL+7zp1wZIIBcoIdZT202UW\r\nP5s1ZOJ6WvOsescRjxvvXPk8O/mUjIVnLcIu2fl/wQemOf1ncbAX5wQ5WHxp\r\nlq3L59DrUuf8qoUbaVytJgatjTdcdXzp820tel2DX2SiRa+c0hCSeBuRORMC\r\nwrtSvTfULJ+6WgA1Q77KDsAVkedK3Dwv3uy/Tko859bTekTyhU1oD37Kbw9I\r\n+pYmshtG7yyZZDH7tWcPF7cmcFJiWqW2ZFOMhMlyRewZhTV4doQ00vKNa3P7\r\nMOHfoS5th3RHNji5IsfbXFA6Ce85qPCHAtVeowqsDYPRNflcCf6OGR01O97a\r\nsmDXT0qC/z7f59kg/oK0HJhxKoB/WLoKOnzMil11oD86o2jteWTthsA5d/7f\r\n2EXU1ETS8/cxMXGpC+Nn8+9vk30NAIFKWSeyNYZYYn93mcOHj3IfU+L8poK/\r\n5zXIKBFjhWeghS1ENIq0f2ZW/ZsaQlQYSDm+3kn1qkUga6/pebpYiesfd+T0\r\nWhb7NLITMMUwfFAEkYMkP+MwS2jsO/8s6tVQ82ar9GF4LNN1lQ7pj0t6XCFl\r\nPY331cHFjFVPK6p5LQnLLD6BiIXUwK4vRHTy2JBzXuBdg0Pf1GkIU9v1I1yK\r\nW2EDRJW5P8IfW1lTUbKpxDnfpQA9YZDG+d8=\r\n=6dEd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.6_1658225291038_0.5088778283472726"},"_hasShrinkwrap":false},"0.0.4-beta.7":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.7","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"1c22c21586a9726fc8d02023fc63a9dcd7357cdd","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.4-beta.7","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Bb9hfJvtp0vQvhhU9WNR1EMWZ29wuDzUFRa/oxTD8KGqw8JpciYaBsuTQHW0ekEIOvvpv6MkhhM31xQJtShRyA==","shasum":"7c6044b3f6cbd8cfeb8c1c610f5e9617c8ee5e1b","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.7.tgz","fileCount":290,"unpackedSize":1271130,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg7bNUN0BDoEK/zC5hc0PetU10pQk7Gl7aE07ZSXEZ+gIhAKJXUm6ljWo0H8LDMEVyxHaIqiSI3kddLJGY1uDItQn+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1rw1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosaA/9EAcxF40o4+iTq7daTBOGPlGrThvmB6Nd25tOrW6ZvqAzp0Ij\r\nJm1woc6p1w1nbT9RgT+XlQN+/lzq4WKG3k4F3bItGmZGihvvYAF4pVqnIjCT\r\nuh/eSdzTNapMlsHK3Gdy/W5LKEt4yLyJosCH8+C6kMikfKOuJ4lizP99+qCw\r\nv1+LLbUuNz4VraD/2/Pm0ntxcrw4AiQEX4D4ZWhEtrcMTLB/oRd6MHSlnmRW\r\nzrBSuccO+skGRyropbG6qFtL66R7ZI2HNWj5gyLH7qmtTwtXOGrU9aZwQI4Z\r\nBbM6pCk5/YF2S0BiC2CdHhk7520+18tgdgwRpX6u2aemBzuaTerYxsiKzO3o\r\ncJ1oaxkX6njjXfiWctzwgECspZo6iGVZ8qg1264d/sHDScJ3Ne7zPg7Gz4ol\r\nPN61NK/I9UeHyq4xZdzve+XsPjaItBbohrLSh59XvIjwz3KWHTtv0l7m0t5O\r\nQZcXPjOPzFTxBqvWQMaqxJDztQu6UNpd97KoR4t7uWPDzE2eayog+/ahHxCU\r\nQhyU+Qp6gACySmULsngjaZ5wq0ZArhX/XeZul6M6lC6DmhAmlgegdKyUsxUL\r\n4BpvsCagEEsFC3L8ml0GVBws+GkFcHbbwkoSt0OSXL019M9mHIYU8qoBGTRW\r\nsneCfN1hZMFlVgVau8lrQoDZcVNzFIR248A=\r\n=izU4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.7_1658240053192_0.3900749437751885"},"_hasShrinkwrap":false},"0.0.4-beta.8":{"private":false,"name":"suo-mobile-all","version":"0.0.4-beta.8","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"d4ae0ac030048d93dfb124e6b4e439b105902b12","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.4-beta.8","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Ge4dptzKA+TkeoNBztVrG0I8BG8JCZFkQZ76niSLmcAWNnuul183zBLqe2WGu82E6I8BamtD9p8yA5iO4g0qsg==","shasum":"ec95c536902835359e306f02434640c54ea470a5","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4-beta.8.tgz","fileCount":290,"unpackedSize":1271148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMjRh5YPRoQmejSHdMZkrdPZvtAODJeSAOFy9PBlAh0QIgKEtKVDN/ySLs5qGONLG7E3Ck8KzojNeSD87SVYyUveo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1sLHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGjw/9GcmX2iWDYlD7RN1aPkRF3Iaf85MTHRq77H5veTHO5NV2nMus\r\nr/9hMnY4vaCn2h6B1MCqxuq2eDVG/ga1AseXQ83JRciXgh/kQe6rqOBADN8d\r\nAgc6/1anG1T0ZYGff8d9TGdVw7RuUqDjqbag9QCKpU06e27SVxLUNkpp1Jz6\r\n44iTXgb1dWKrO/eAg++POfqByV/4aAqzS8xljFasRhwW7+1BseXiVLlzoGa7\r\nGI7F2A91ysdR9gqMMLmuy+0D58jwF77s8LyFFA99M/LY+TyUK8e6OAFgQ6OR\r\nBM8zJOILQtGFj4HzcCj71gUjD6PuFTyV/93Xzbq6WtOyy6Vzp2IozzQ48o7H\r\nHAoWDqHq3vvk6g7LUfWKLXl+xlQ182Lv8DyT/jt4r1/0f5vmGOUgkRn0+rtS\r\nXuT0fXaBYLr/IDWkGkSv0PYwnzFHHwBWpHLhKh8xNC+pNHP1JmueL5/iEMgL\r\nNsp73wiWI0x5NVD3EZZFAdtdUSvXi0iHw1zed+TmfvjE7S4ZJP+rN3gt7wq3\r\nAv6MzJVYolPJhc2AK2g2Oo7LN8rEjcVDLV/k+crsV+YX6PESg7SkGyjWxE58\r\nA5ET5GsJzZ9CTj4pj3ECaoUqwD8Opg9BVuT18YjJddmdqJUZ+hJVo6MvgPxX\r\niLOK+NfrEXPxnpyNfl+NdD6oqXsF9PuFlUA=\r\n=6uIk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4-beta.8_1658241734798_0.22895507501531953"},"_hasShrinkwrap":false},"0.0.4":{"private":false,"name":"suo-mobile-all","version":"0.0.4","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"9d27bcf1fbd6ec4b55459e0ef307a98b3b0d1c9e","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-z2h++okDKQK0opwowd0ZWgow4kQEntvJvNDKWzaO4+qLN0oC840/ql34gdDqUoJzAnfcx82EogsXJ2TNdWT5rw==","shasum":"84706adbcc3c81a9f05960b24145bdd0069c46ae","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.4.tgz","fileCount":290,"unpackedSize":1271141,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMTkMasV2nlAig5IulmR3y3BueJcoRpH9UVUa2vGvonAiBaURrnWR0KjCnUZTsQkfF7lAFUWP9Isy8CtRpIbkX/mg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi13ZkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+phAAkkL4wpvScnEStZlm4vm1YA4qxly+QTauU3wHvW+ejMiVCsuC\r\n692hmbVDtR1M3IcHH/F3ILhPlzLZ5LXm1XwW9GvGbNPe6uQpqYocEyDr3gmf\r\nn7Yts/WwyYDJusuC0ppTN8kluGoLUXL4b2ACM65Fn8LWhX/k0bZ2lWG0Ch+8\r\npQgWA4LKLhNNTwyPq4Y40IdRyBslCAPeCM7Ti7smAbfsQ5YVkoiMXQn5oxmq\r\n/DvBHhUwIXTPLs/7oGXP5mWnFwjFaI5KOAg/6to7LD7ayN/ucrIdqjQv2T3Z\r\n8acryYqmfxh+ORRL2fD5y9DtluJnWqxpe/0N1Sp7GhEQdEuYTgGT6LPUOVq9\r\n42Y9ZfmeyLHcbvhDQBjA37+lTNo/CUfe2wi6RMWITKqm0w6p78ow493uPCEl\r\nkj6T3pI08UWYU5ggI6tZK7M2OBJWoabzWwu7gBbZn6T5EMOW7PRDAye50Mpq\r\npyGuF+RWEG80NKi+Rp/4Bj17ovAH8IIAFirWdtXJ2YaDCthQ3KTJjQt4uNNQ\r\nw+n+qIWEPzLykaYoLPwjdSFs2xdB1UcvfQfLwjlVBx1K10c+vlYPNoPKhhk3\r\n8sYM8I91WUx5xB1T8eD2EDIds4PqMcHNgdYS0cD/LVsH/kA6KIIoApfn+jl4\r\nrkkDMqUWU2wpKF3RX5eLQRtTLPHZDK3R43U=\r\n=Ru2t\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.4_1658287716535_0.5997675993802252"},"_hasShrinkwrap":false},"0.0.5":{"private":false,"name":"suo-mobile-all","version":"0.0.5","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"cd0902c87348416557fbeaa7d31f1d506828dde1","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-EBsje31zuqUkuflcJLtWFDJCJr0kh724qiZ/lobW7Iff/pGuRaj2HALrNFOyErVus2iX/iDpJArd2Z2ZQ9NIZQ==","shasum":"7934d632242be421ef3bd3385f68c59fbf6184f6","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5.tgz","fileCount":291,"unpackedSize":1476893,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvJVeMZ+hXI1BaOuaJsUSqAb3wZiDjk0z6RcbThgdfXQIhAIhgaDjDrR9b4PnTcNIyJHyFz8XF0O+CSJe/zlM1YBUg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2n4RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7fA/9EtNwNmo5m+am7N3VpZTHE+2mgyaZGXST4DlK0+akcqQwEG8v\r\nhEHcSbubyN3iPcuo/6I5RfttXmYsBuy9OdY8TkqKo28Xz9SMY7ordlrEs77x\r\nyQsWYXNxOtamw9/bI6C5B+yxncC3woGYWGuhbnAle8neLBJd4ZshA+ebVX7h\r\nYySH8k5GYe4M6X4GOFr4sZKoWTNZJVc88kIzt/q0cd+2i9fpB6tRXnnaEUVN\r\n60d1sdumWgk2IYw/Kp3nkOGPXfVP8xH5bAsm5B1iCuxWR5V/ecrPPMN+qk+e\r\nqsv6niiNJa1onpI5KPHw95jcWwMfE2gdSccSuLg5aliw/8IMYXURNH9uIPx2\r\nOMDgi4R4YbAJvewT/QlOzLuojdVFcMi4iXCDyFdMwRrRcWtKnSiRBJNbIaKf\r\nJJ0oNthRavGNr+My0iqDvrm400wQsjEe0KPM8bqrCiTSlgr4iKvhqtnv4Ufj\r\nL79pVV47SWpT3Utl5A9D/LJZnm9sl0UMa1sNA0N7+zWGVuhO2pgaXMJzJzvD\r\nh/ni2kW2Tsnl4VKRr2W7qB6dEpHlekKwGfTw5slpdQ5dcBDFPuWQ0vaS4at6\r\nOvh/3EKkVAOP7Y3B/B7UxGlfSAX7Dj5Ec/pzaK+xCs9XgknEMyWS0n5cA4xT\r\nu6TymGC1mWI/xXK0VvNz/R2Da/UP85VofWc=\r\n=iooI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5_1658486288876_0.7268029441052009"},"_hasShrinkwrap":false},"0.0.5-beta.0":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.0","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"52bf34c0802c6512ad663cd940869ca743a434c0","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-6atYmVeEstp3TUJskC7AKU9qJCra5m0gvCA9HtUYlBIWRgQHEQ7hCupSlSe5CI4htl590FrBjV/jz1ocGZkGtg==","shasum":"c541346452fdca54ef96dff20916e0d66a0d5938","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.0.tgz","fileCount":291,"unpackedSize":1504524,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpkDi2p4TQ12Iys3tcgRGBxosMaB1htdKozNdKzRanNAiEAl/xSkn1PR3hI9A0pbxsMZOY08Gtt8/Y1TRWCz73NqP4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi3lHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXpA//e1ZPB/cZpWuaade7ZrHdiNHDdg6KA8BAoFmn/tnboqGkZeZU\r\nmhwse4fjE14iBO+wckbB3HpFW1BE4RmJZPhuPNqCUohgCibkPShRi+nHTyXH\r\n9S6G0GoS68u4YQO9GmXIWfFsJ2xa5fVh1+0YgK3OyCjcl2pfJm3ALev4A5lZ\r\nZIRWtxNqZ6AzObcxu+mi6ev4UbRtit802pmX7PWit8CsLhKaw6ZPSAIyaUKs\r\nddoPFcZAn75awkHG9oXtmZo5ONnFtbCf+msw0xH5mjuT1X4yMAx9BK0A13cU\r\nXDyeRwr0q8qbx8rXivV3oyGpeMG+LJQrfNpLdtbnvzW2p4Gc1Bm8Uk1vOl4A\r\nIK9+iqmm9TgZ6V45sgnQKQXHONS/XSFZCg9f7yUkoOidruusTmugNY1Zg6e/\r\nBahxEvBGSssPgCjvGekDHDhRF6q7rh1uE95YRdEt5Q0Q1tQznq6fzktKbQYE\r\nbZZb25teR3OdztIW0fCl5CZM6qFHTlG+ceqVRj92fdorhhVocFnPA5ruh9wO\r\nk0/NB3kNTy63PP5r1DD/yJg+5LWpLvkc6fbVJipWxlwjCyiXehaZm3P2GwR4\r\n24K0gfJZkIICBx0n7L3HjqUjwDAeU2YPQZ7yqLIXwKpXiq0dYdte1N9O+cEz\r\nKv7sJaD5D1p6Fxofqpl6/nw2yz7ggl3ixJs=\r\n=tVVD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.0_1658737114548_0.27085458642364446"},"_hasShrinkwrap":false},"0.0.5-beta.3":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.3","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=dev && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=production && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"peerDependencies":{"antd":"5.0.0-rc.8","react":">=16.9.0","react-dom":">=16.9.0"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"81c8d60ccd06e74bf54cecf5ff955b8dcd365b21","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.5-beta.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YWnp5HVE1YGCwGfGW/f49mo9U+MFah7gHc1F6VKnuKX06NzEaZ/BSPPlnWFdZ6UW6DfjBuZtEHeh3+hYG3u1MQ==","shasum":"0331511cfb432dc53f3b19ca586bd4fbcfd1c7e7","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.3.tgz","fileCount":291,"unpackedSize":1477078,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJCs+kv2iAzthAC50MAAsRQo6y64aUURhxTu1rylSdVAIgfvWstpdDu/h2RYXBLgydDcA4YwxmqxMAZoFLBYhgmn0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi530jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo52A/9Fgzn7emWYXmWq1/0icbGkL/yhZp7aXzc/drAXxtunytkMs44\r\ndhSgCJwY+Lfrj8nXvCA+PNX1GYYH+Bko94BCwdy+/A7FDtL+apkjllMv8FI0\r\nicoCQTiIUYnZgjqr6/IoDwbEIBByAinIRdCmVGBsLn7J5XjByJs8o5EylTsG\r\nIU+EREnokiQVNX9uQQtnVNEWRLFgAqtQNJV93+1SI/sSgHE3jflFfKQuO0Sw\r\n4hY0QjHsIJw1h61CEKrQWqJfNtCDrQq+rfNJ47Tc5myOCvUjct1mC57nnax5\r\n0y8sFVyhUogsH3/icMAPoCTWs5jj22jwCPJeUntcV32njQg0Pl7HJ58vcpDh\r\nHUbL4qTxCsFravFbGtHYJKXTNfsdXPHH7nzl+RoPSpIcMVxXif3kLgrJipuN\r\nPRmnSD/X45rpmZiYq+xgmd5Vea6c7lI3hEsuPLnbFnuLHok9Sc0Ta1/87AJB\r\nhatMCSXedX5MHRjjGLvtn9mtFtvJSmv6pVGBkKS18Lngi5MbIpqM0Ow+pScJ\r\nDoLPle+Zqu9obCSe17UT6mUPsGy2TdDh3uDefVRbRemG8OyXsHrc/rtuZhU7\r\nFUT5DckpBfOK6xaO3hE/y0XiGUmiO3+fsh2QhZHMR5lmTIxFmaPBlR0XuG7i\r\n63jGGTJr3bKAJSWFcixz9W3JMlw8sAF7Ttg=\r\n=qisa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.3_1659338019335_0.3592649902649201"},"_hasShrinkwrap":false},"0.0.5-beta.4":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.4","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=dev && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=production && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"peerDependencies":{"antd-mobile":"5.0.0-rc.8","react":">=16.9.0","react-dom":">=16.9.0"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"711adb171cd5725f9c38857ee26d0d7da2f81c2a","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.5-beta.4","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-aHc1HJYgfnK4H6j6oFy/d2Kbl35p1Orw9ez3Rn1ryDaPgQom43PAxmyfUexcEanaNFG9aG2ciAUzp/+tIzqMrg==","shasum":"78e02b5c5f7627942c63a46032222d6148cb883f","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.4.tgz","fileCount":262,"unpackedSize":1333581,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwkBEKuKu7vXcroFbkxGIXvMoeBWLZoOi7qhNe2uSp7QIhAPzoeXezML2CEBFCj21mIUKegqRvcRcxeXG37fQWyADs"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi55KDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRzA/+J6RnFd6pImkV6BclTPVdSiDgPwMTTJXkENWXRxRh+1KntiHo\r\ngO6uH8emJafmfHfhIsvNI/A0pbK4aMlGdEufiGsGWqEaOwm8t5ueweUk86nZ\r\nCqI9AvBdAHGF53oRyFN59Mp8O+3zQ0LtJh4ZThiH1pzb8dki+Z6/Eqc1N7mm\r\nuGkHZkcSadEtfZQvKvzE6EkajcB6QsctRNCzN+mKjVpYfnBrgI2djhCdwweI\r\n6feckJZNrvKKMPOMMNS2iEWK+TPIP2bW5fWF3flV/Kecr/7mRblmNOq1J0lC\r\n0am4qVuismppNs6CNKRTROw5RBlADwMp1IRumMAAWLXyaDOlSWMNdmH9D2/v\r\nPTyl1cGGoNicTvIU8LFTICmngPi2ftdPAvEXjU4pfjblwoOoZWg1pK02d5EZ\r\nZUNTmrevFe1EuikHEhDk0Zg/zgGBmNq99szyICL6poelBwBtJ2wAgk7IsOa8\r\niFvtKMxSzpRf6gapPtHmOYYWo2ZhdCoijikX63AwwrxxBKTlzMWWq1GzJFcw\r\nduFogEEkAzxe7Pr16V+2wFrX0PjrJTG4ddWsqJ8cEPLNrNE95n5hv7ovZRLe\r\nOZlS7y7HMMOKLvINZTx9oAIcBmDcBru8PD+yh+8mFAwT8+Gb57EF/YjcZ/dX\r\nMjmHEcQIuRS9o2rZZ1fl9IzT1eqepNnoRqE=\r\n=7egt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.4_1659343491683_0.5726471147544803"},"_hasShrinkwrap":false},"0.0.5-beta.5":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.5","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=dev && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=production && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@irim/saber":"^1.2.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","highcharts":"^10.1.0","highcharts-react-official":"^3.1.0","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","recompose":"^0.30.0","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"peerDependencies":{"antd-mobile":"5.0.0-rc.8","react":">=16.9.0"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@amap/amap-jsapi-loader":"^1.0.1","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"0b03bf706b29fefe4f7e389f125ee68218dba71e","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.5-beta.5","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ksM4XRhJQ5IuxOSwB4jDJ7Ulzec4JE8vwK89JkP7JHcqcpXuI82K7M/ylliwiQ1mkUIO+e/FYeJPua+W3raXYw==","shasum":"cf0e56351eb94b1f534fb7d557905d5c7ad4dcb3","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.5.tgz","fileCount":262,"unpackedSize":1333223,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFMAYUQ5M0BCP+hIGrO5cQ0jUFQ8v01hjengdIED7y/3AiEAjz4cnevyAx947C/8txPmChhrllR9WurjSDv8lnDF1xY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi55m1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz8xAAmqaHircgyD8eUQoHDJmYF4HNnMdkB1NpwMtcbCYolLA3TT9P\r\nHlZD2dgJSGOFkDW4sjU2PFFLT7sPDUOUD0FsC7Wq2RVtAQuaylwhDUqVQ/cg\r\n+laIZKyL1D0RidwnIbza2Sz2LWmHke0Rn3MTIfvqZFIiabIz8qU2K3MgwBcD\r\nXbg/4oLZuu9lo1y1xzugEcKyBUAGKeq1OWr1OAT3KTAcNcIhVCMPMQas+toW\r\nUdUVkmQJQQZz0dsA/F8oLBP5Xyb9rwb5sfwuovviyTjwR2yCyxcMJJMAcXHC\r\nNSQb/l0XRBJCiHvb4veLQCFvmy6xZ7ESigaxTMftK7XgSCLwwo0WbnZTI6uU\r\nxN+S09De3CYfHGIbUbchlQ8Mw+Zfdjw9yD66DmVMLyyBJ/Smi+76HdVfA8ot\r\nyUGlINHDUpQU13qt/nYNt+JimoIPmt6nXBZEArMmtgcnNaBzj5QHHrqlnGob\r\n3zcZLjkp5TmuVZuh9wKrtsjow7CcHd1idvXCSK5raXtDcYlxhb8nXDfPvkzd\r\nORz1jB4QBlz/xfcmbF2WD5Pn0PWmKBmt29SkltJqi/gKaBUx3WnQp79QV9q1\r\nrLVoN4/+khQ9HlwGY8kmHwd976rwRH8I1rTUcKjmhgVZ+NHnU7NdNbb4kTGT\r\nBahqYosRiDsNuPb+he02TMFpm3V5AAk5jj8=\r\n=QY1j\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.5_1659345332788_0.2284436803296035"},"_hasShrinkwrap":false},"0.0.5-beta.1":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"f59308d25bbc8a35e6f5d6ed5893b0f8274d515d","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.1","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-SmzqCb3aLVwt/iWoCneVVJteS6zcGP0Ll3TjoaVKLZWQqShTBoajv7hUmGb2ElhAsu4RJG5soHQtbnZIRsxUIg==","shasum":"6498a2301ca9f89a8de0bd70c3a06fc88fcee2f6","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.1.tgz","fileCount":291,"unpackedSize":1506792,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnVATYXgzrmUbnv5bAE/e4XC/FL1XzbykKect0zzKHyAiEArQIudGMvu23b6EV8GLyW8ljPlfq2jB8cuVwG7RDyZOA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6LzTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQMg//WiTMCLPBfBkPAidxUuJiUd3VJNSpdn2AyHr2IsPoR/oISveM\r\nP9x0EyDuRHCU5OEqpVCvK6YcEnSDlePpX5uYWFQ9+t8IMN2Ttn+91R/sf49F\r\n0viOE8PnTNL/7wiUNZy1uIU9u2SV9euhPI/v8umUp3fvUJobwmyG88n94Dcu\r\nj9KCWCeMwrZ038wBNmVpLVXLYMMM2AY4Ik3jtakeYgBHUDThzsH3R2cNiHSJ\r\nrbQq0WoMuqD5IyLvGitWgZynEoW+31BdOdCot7Ppu3FitR7K33L0qDBihMXD\r\n6mkvqzXN7wAhvtR7Om5wAJsq1wBNTVaRnm/ozqXSgIx3A8GvN476yok2KELA\r\n+3wbTKZ1nqMBgh+FCugNmzzdbiVP4F2ynoKnYPaqFsbO1J5Z6KMoF46UQkbd\r\nLXsbL1IegNM5702OFIjQp7HcvoziUQPADUcP/xNTigAnrHWyHcr2sQWE6xch\r\nyvNex8/ow8FSBfzCkMQTXhg5VG9oZGvyo/2h4JrIemOdfdlln+qDBt4Sw/e7\r\nMI/xBUeSzhjK3zDUMWVT/XbwttuI6vXsIrfFwe35ZYTZI3FCz1DEl6YV2c1o\r\ngPPbtdieXOxq1YaB9WbS3YviWEX7HVdCDYOmjv79Cgol7zTx/TrBcMjpUXHx\r\nElOCfd/v6/nElA2dXEJpat1hgyAMscWbvNk=\r\n=wCFq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.1_1659419859737_0.5885719007073174"},"_hasShrinkwrap":false},"0.0.5-beta.2":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.2","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"7998ae7508763f5c59b716248811a99622c99366","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.2","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-6Dw3v1OdFFvof/xtnX40g7UB0SwbRmNQ3W0ljJDNTpYTPlmY5uRg61O9FtjxIIKKYsBTIDLAFA6xG5A5tPFIiw==","shasum":"c5f6ba5fe028770a4f70f86473262ed1c14cec96","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.2.tgz","fileCount":291,"unpackedSize":1507857,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTX/oqePAP7XwYlzvb+/V46LZHTXyAwYsbgFz9qTT6vAIhAOYYi7K3J4udsEqWBR7QVMOYRB8LN2T8D2brAyqxEyuB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6NyNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQVg//QTRqq2D0fz6bLgeK2Qd1yTbcHLQ7cRtC+IIkNUeegNEjEcaJ\r\nVSqCLgkEvxXQaxkFx6MWik4q8K32vsNkE5sQykl0n2CSuN73An4hpVjhir9T\r\n7HX1fMlEY8cx6VwcTIPrbTarkj+NIE1BqFxfPRtijxOoKtBVxK+07jfmrrnH\r\nMCN535638hDrd/QbNaP2qbRSOoaasDjj36xbC+Hp2AUX6HaFSIBfwXxWkKgX\r\nZBxHqJO+/sJTcPwQZbDNu6F+13brw6d9ph7i5+FWuWWg4p29QJFPSGY7WB8m\r\n8BMMvRfuh7v55lJJk5BZgGglhwyYrcKTDQvCePriTBXjMLOCqisQSIpUIbf0\r\ngHJg0m8r88NWZvdH6Lqp/aCL1wlpheThlQ193zy3fyaKWOvjvcZhbdHdfeyG\r\no7RIirZi8I1vgpBbviV12sChHFvxT29OxVPkzTv+4+OYBG0zIySkWkQFBlPo\r\n7Q1aK0+CcBAKkpX/EaaxCgqJheedMeGUVZqTUnNbNtUbcZYhXVZqC5RCOz2x\r\n3vtxvqw9wyuOg8L2OFXu/D4FIjPIUjkUMKVWuKoa+ScNo0MckvdctOAJRWIz\r\n6GqzqQkcwIwBolWWiQNBj+FB1mbT0/NrnIKsRgvVmW57BXDwgTJCuQylU71g\r\nS95TXF81EePBoQyjnImPB3MoOzwPJH8sscc=\r\n=6nam\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.2_1659427981012_0.7120838523590696"},"_hasShrinkwrap":false},"0.0.5-beta.7":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.7","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"fa86e2b64d756489c9ec01d201b03ca4634dfe72","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.7","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-9kb5O5HGJDSdwsntAFBAFpBfnoXz1WfyYXfBkFKMNJ+kBUIiRciIaG/rkY6HGFdvj5MH9UInroUqpwBJD1vqjA==","shasum":"b74fa90b1495c05c3e5e7d8fd2caebedcc66e9a9","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.7.tgz","fileCount":291,"unpackedSize":1507968,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBW9p116bgUBCWWcIGKp+K0ZulAA43mkJZ2FA4ZTVmQWAiEAtb/jN/qTA/yFKPVEIdozC43Pd0wuMUNKw+jRmJxOL/I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6OsTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5wQ/+I0PTNC3DybUopgbVWKhwVlXVIBN5mX4bQiy7xcjhiZy8MwXj\r\nQ6VrKOBwtTPeLWN5FM2rh/FOix8tEfNZq1Co7n6caiCJvWFpQuUrKcm+sFCs\r\n+w+3kztMjCAtum47IwIbpOH7mG2d1tRne/5YsUQeY0dTgpfNucmIXTrZ1Idm\r\n3innN1ZUTV+jPlvlxvG4qPuFZA/0b5cYyzgxc00rI1LrCsbVnuNEHPGe8b88\r\nkTVVLmqADXRgh5ddMveuse6nj45HHvi+/nOmkEfn/guNjXJvaCzAIfqS79Z+\r\ngkClZrXtCdtYvUXP9CzyX16R6d9s1+ET819t6O44euyZbIkTiw1FvlukVmKL\r\nzL3v3vJ5/L8DyARyQkZrAjFtThp5ETdtWcGRFV9WTr3KvjhIoIA+u5AkwbWq\r\n33cpes0P1PBxpo/sBri3L8u3Z2GirXvfeoXHr0CIU4stAu4oqXc4Xu/JMxEx\r\nsVn88XxqJoqmj+aCD+FYVa0u1GB8V4Twzt+0Yiz38yudLK/b6YWXUH8XeqiB\r\nVhz16+WNx1ePpHj4FdAYNxAaEmfvGHoudmci8lGL0zqPa/JZvvhPpsldguZU\r\n0f65TZ7e3dP4X7sO8czEHId/ZQNJ/oCsBW5qffEJRkIRihod3Z0hTX8q7jTS\r\nE7INEIlsEMe/bwxlnuU0Jnk40Av/cPb6h9w=\r\n=dFzT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.7_1659431698800_0.2330138896129299"},"_hasShrinkwrap":false},"0.0.5-beta.8":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.8","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.9-beta.0","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"dd25b2f92bc5e994a66e507dc9a24870fe044a2c","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.8","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-ik3oeAdjQ/hOKUPOkIwoF33y6B8kPxSyke5pVcPlF1Lq9ykEqxj4Fce4WqRiJ06CbL1PBkm9YdWxobUf4nlmYg==","shasum":"d37888e662bb3befd249f8e46c4e02a16bf7f482","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.8.tgz","fileCount":291,"unpackedSize":1507118,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2Be4EOmhOcv57Bw5f6unrYl/8EG9RyvPx/g6NL1aw5AIgYqlYvNgI5avGcHY1VDoD4s+FAeylzGdYmgoteGoYikc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6QrOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptCA/9EiUUMkl2wMUHC5PzaPAhxkQJLFJyfeE5N18J25DVyUuVCy64\r\n6eBoliMkWHJRzmDXGRGUK2iy1/WFih+UVpw1lJvNlzgc9LQKajz6+8Zz/94h\r\n2Hx69Ijh0ntAlhfTJU3FEB+/cvHSdgt4s4ii56ceGqGdGmsgd+t+a/7WzFy8\r\nOdQ8rg4a9Qed/McHIWFTbl5rPBopfnS8qw6ynvM8AKGBm+5QlFCGNavwIXVA\r\ntBugHaMDLsRbfRbQwfXaWyiBRcmmf1ORc56cG4wjamYo7XweRM0m/MBvfG4g\r\n7zgyNrnq6sSIAes+sYQfVUkA9cLRnzkk8HUD8Yxfwaof+kXUj0irNT1oa3uk\r\nj3gpAeTSX0mtuP0YbVHhW2jlUWhKwv6QgpglnhWYTXZzUzcjRLpyBpufLIn6\r\nBHvd+arSEl3bGVCJQkHJ3xatd/LVtPa6x7naD4NwYfMJqPHHgdPiU7hJj4DT\r\nW44pvJT+5bDkVzdcjr/cnCLP5WZ1bTjUmUbBg12HynZ8r2xtpTGFnMCsgPM7\r\nYHf5jdHmTAXCwDlwGvkHxRY1tOVTXa4Vr9rA6qgGO+tqFU2LAEAqb9LWoyx9\r\nrM9qZfkUQ2Xi4OSJsMCb9y8bd66gud4kyIX9SsfRPiSOwv/OIfLdfNUGPr3z\r\nqCBHTJZLlzLat7BFVop1kV+cGe0T2TQX9GE=\r\n=frA9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.8_1659439822203_0.6911138062473474"},"_hasShrinkwrap":false},"0.0.5-beta.9":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.9","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"85a06ec7fd3a5ad53a72758354cbc34284ca4c75","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.9","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-m8uj3NaSaWrwG8B9AB+Ji8/9+wrftXZIqI7o9cfpsOr1nF0hgrieim8Rk+h1+UaHZNH5FEXqif4B7Rn5oL+6Ag==","shasum":"bad47c5b1da839e31296d513d716b1db289371d4","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.9.tgz","fileCount":291,"unpackedSize":1509431,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFB+Wpj6eQ3byX138bnaDwWqlb4BKw9BI0Tx5AHMidCwAiEA9Q6fGyfKzHARzNUfQSw7DkRRUwWQ2uXVK8QvqbfXaLY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jymACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYBg//dAL2x6PRq6jHb8uqfI36pwfAVgX37s7SKm5K22tYhfupbzNW\r\ncR6BIxK+KkcPyiXJHBRqflPSNPHk6C9g6NrvXiuy3ODGFBJp8h2CaotX3B7q\r\nLhQDEvj3VMItcP393qUH+PbJDgFPKPBc+s20WA+uav0700/LYetRMQIjosci\r\n4Qy5FUAzoY/BcFJexelOh9/Y3EhXDl7/Pvm/igXcCt2SD+ak3o4Byy+kMMzt\r\n6yPrEufdISbcurO7IKRuHLbf8T30QcTj/4eTbbTStJhm8qvTHt+kVRlMweuI\r\nIj0vuO80pBAKUiToKCBpdvgJBXYArsclZv1IC/jn7MfyFChQ3x+z+hGYQtj6\r\nvJqOe7D6kmvM9Xf8JMSMr+EX7hvvLtTxVwiIH8JDwvUYutx5XRWK2xDoBo0G\r\nIFGfoPZ27fAawKGlLJ904wP3KaktJGx0AOLMpqm8lcRyVUVb1Z8Sq0uOZnq7\r\nRaqoXSfcOQUhkSn4Xng76DCdsnUid45x7EkOH40CjS1Rv2VH7sX9e9GtShs0\r\nC73mUctwqXUzNhFkEi/485fZEt03/u3FGYBDg1N7PuM/m8h/hzWA9ANn5d2+\r\ncwI8Kfz08rVnaOW7Mg30IyjpwcNyvHaDifQ5zmNHM4mI74yo/DktuzMt3qoU\r\ndIs6RXB/Is04yGEcW0eX/qk3IdDwiGPhLI8=\r\n=q3kZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.9_1659518117795_0.3182388516519259"},"_hasShrinkwrap":false},"0.0.5-beta.10":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.10","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"6354613aeb6a90da17c10547d5f7f8e23bd21869","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.10","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-1RYuNw2S9CBZMEaF/sU9BozpCyBVNiiOUKUCtplxT14xxSNWy3LU7RXLOkTYuJSKaW3Hj2pOqUKmTw4bmjQfLA==","shasum":"9554ebf747b2562a03d31f1c5717db5280bb0ccc","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.10.tgz","fileCount":292,"unpackedSize":1509777,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAO/zinRIaAG4H/CYpg85QViYnL684XcyusMXkOdsBRAIgPGcA2TYlEdEyNwe8ngXKClQzJfxNIzTYDrWIpa2mJaU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi63USACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJVw//ZSxDjBIILOJgmONTJpa1qeogxO2zdbIP9eBACIllFLRpLXyi\r\n5qmGvWrPtUwfyfY3FHh3l+yNbYJNLSVJZUXTRqjTCs0mhgSaffMsKAuKDHmE\r\nqUVrGPeQPNER01j8ovRctsDj1a9aLmv23TyDuaKFIWB2ts6BgRU3hXueCSa5\r\nzI1l3Bzo8bn5OMPATO3bNfOh9X+5RdIjoRYUoOLr9TDLN1bidsOBgV3NbSB3\r\nZUwtuhd8u5Y+KX48DSamg1U8Ql5Vi6zM1p3xhr2lCvu68KVmun5ySjkY83Pn\r\nWxbaRTxn6OgDJSb9wt6cuZAhDD3ovvtK6M6kQuIN3/3nJVN4muskEkp96KLo\r\nuZk5rho9JJmeU5mRbbaHkW4aV7RTzLKl2x1bd1NMA922MQBn7ODMZaDbnXEN\r\nZUeT9zcv6iS49ZsBlcA/cMgZV1fIXnq9dIu4h6ZoBPOgtBk4yVQWASDYT49r\r\nxbvJrActErMtNoBLieJrWnIuq3OIPnVFseMiUSiiGh44iapONH1f2L7yPT8K\r\nrBLaotn5hwtZXCsa/UU5yo0Ik0mBktvQa94uDSphzhndV4TUyU6LLeICRZln\r\nJ4tzgINDe7H1FSMaPwK8O+XXtHLY/rohCMf8wmb2W3Ngx2pIbDJWcv3AEeJP\r\nRWs0ySHMwaCAJPOmNeGWb5AZ6TDgwT0WfbQ=\r\n=LwCF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.10_1659598097763_0.8555362932743367"},"_hasShrinkwrap":false},"0.0.5-beta.11":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.11","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"5dc4af4a98b43ab364d9d58f608905aa14b750b8","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.11","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-BMTIa9fy0jbXKoe1D0vDsWo7HGrp1jjWXiKWAtZzeQzSzwtBYbO2M7CaXghkcaFgSyRfsxRVXQ6dStWQtkmKGA==","shasum":"5aff74b431b42032dbb74b9349bb7a17ae45cc53","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.11.tgz","fileCount":292,"unpackedSize":1509717,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpiD0nDb7VWIb5ScmfXOFdQyvYL3Ij5ku4QbjxZjDpawIgLmWTn8Z6PrZh+rKe/y3fPoGuRePhMwqeu75CfMGZFSY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi63YeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgiRAAg2IREmd8Iy+rx9UyE6ncE2bqi4kevKls07Rt26mwHg9H+T9q\r\nxFtYu1TFOlZC5bAGZv34CVO1uwnRz+bRH9s/rYa/rtlJWpGKUlVjAarfRzui\r\nV7/IbTLCtg6s++IHVzPnOjuoPnk+9eaQZukq9oLcw9yuLNQC5fRFWsLO+xHb\r\n0f5EyZclJB8fPDYory9AZnWqiNfEn38Yi8no9jumK42/IhPxPJWuY5TYoGtK\r\nCd4mYORND00eaF8AGmBWtbWJsXqsFd/UjLdp6zHYlmTB2mIHetgN4a1j8B+y\r\ngDgfLsBbNTECmUunxp/Tv5AMfeadNQhuLKcREWptuoEeChMIizl/8sx6O2gm\r\n3cazSe5aOf6PpR0lJtPGR9+4FDaxu8irpzm/nZUq2104ExU05eDBWvuYdwXL\r\nDcQiwMYoGU/9/kqCG/WrQNUk1+hTfXixCyLd+feLpCiJMxiXwy5OAOS+AgXW\r\n4OnIkhr3e826TKopfNxMytHNqmUeEvxTKozepA0bJ/ha61awJ+3/iy4SOQNw\r\n5KP4OqNhL12jkv4Gh1XGr+J5qjoxC45aa8mT51lBJYvVEAxKoDZV18f7i5pZ\r\nJKlJLS7HAmgjgDSeE/8GdfNsehOWGqA+7ENMGncCb+6OLv1PiimAt/Z/oW6v\r\n3bRvNoRgMUL3V5Qxe+vOS2eKQZJTkNmuBNA=\r\n=1PDx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.11_1659598366316_0.13221592191256293"},"_hasShrinkwrap":false},"0.0.5-beta.12":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.12","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.5","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"c10b6d7898c4b7c9c93fad498ebb928d81d8e6d6","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.5-beta.12","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-j7GJ8LZd3HxXGKCqiWha/VQM1h0NrKxll0J8AhWmhCXcwgyphNyn2ToreqDFj7+9LWtCzQnDpPj0Z3JpkJWqtA==","shasum":"2cef3c622c90f097d0bd7505614dfc8dde82be2e","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.12.tgz","fileCount":292,"unpackedSize":1509862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTOTBFYCgQVAjmmvIzNKsbWIi4NyTV79/1xkl3f6uOLgIgcKzbTR4YIjYcHvKwZrzcQlJUeyQaOOfJJhOfIA5Urt8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi63lAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdCA//T0WdsmiZu7LB99UQtbLIBr+M0VKowneF0baRNT1xQjB7rRAW\r\n1/ns8DJ4IEFduScArW1b9nDbZZQXaFN3/NODBPjDfyLpPTniMqwmmayUHSCA\r\n2Ne4kLiuVeN5uo/sp0/xujYdVF0rBgy8RkyLGaaoSXEdM6lc/hx5IEHi650D\r\nYtPP41fQ6RPNBvhZ22tZWv0nvULmYk7UF38Li1ALPnjibDfdsABN4r+olD6r\r\nB268iwxTzCJ2XgFgclSQkOmx0+yeDi4LzdYsPxV0eSpoYdBj6yNTkFVcNogg\r\n4jEEa9j4p3O/OtsDyN49Yxd75qUPnMqIfK4EhDivWes/+3zfnlJC6qSTtehS\r\nqMv9Y8pDb+OjPHQe6X6vOGBdo8PX5/dO8BAndfcYrYlW/5iLLlhVgsgL+Uuh\r\njo3oTWCBK5Y9AMjogrY0Bg2IYV4KwvEVGps52bKvmHzRygJTNFiLCIM74EH9\r\nVHbGDA8rviFI5gYMdmDXohikCebJ4oLsT5SX6npYsOiFRxr30sjJ21Cyfyth\r\nlcm8QJax525b2u5z/2Yc2tdmax2qSnwov1s3bdkmDZCWwNLHASjvb2A3DQru\r\nueUxzS+5zHPDHUZ1Zzx9u4wU+TVfFHrs3oWybXVtZWIM1lAxcMe2SRequ5Qb\r\nUDAeFzBzK1dHoNjgJVL008sViiBZjBP7/Qc=\r\n=EJMU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.12_1659599168293_0.5519875238578074"},"_hasShrinkwrap":false},"0.0.5-beta.13":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.13","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"14d593d75a049620e25255517bdfb6adb045303d","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.5-beta.13","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JnxIUf16H4eoC6hMMFQpnatIdcm9cRVBjHjF7cTDnO7SPpcPKW1S5Zz/aPlhdqnfvxLnCWroiRl+Jw53jAGt7g==","shasum":"213cc0379dee8978b4cd00ccea535ea0f1407dd0","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.13.tgz","fileCount":262,"unpackedSize":1333501,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICHI3h21PDlmDKllRVPN8gP8vLeKHAfgoizHaaeturloAiB9mlOKSN2i7qO+Z06Uf2v6p04EPkDCwcukDmnDMG+Gcg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9L+QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRdA//aHS4Dzrz6vfy35ZNNxCQXestwEKHspLJ0a1S9ptYA32ATsx5\r\nLkyc0gVhvTnIGfCd9FtuN6VAgleL/XbX1bX5Yty1FNcjEgV9E70Rno1NtcVZ\r\nnDnwhOrLMQLun1u/gDierABDRGl+Ll3gD1+Aat5PghsOIC/8isSFQqL/1zbw\r\n9bGwSoNRfzGT7Lt3sawKndSjSKmn/FnmSS5cUyCu55GCvSXEoPh5zBDC5ePG\r\n+HlJii96N4XumoX1hmQtWOzkncO+sMDVNoe0Sk7WOXsxsfxGRvxC6jLMH9UT\r\n+9e+uMZLEpDVkrwnJVMziaCstwTd2fCkQ4ZDXMjUeI6SyXu/OpKysVxbimkX\r\n0uDsJOcvbuU9KlQH3f1H6gMlSxopS4Rr7U++W+Kf03FAF9c8+I5q+X9FEYVv\r\n93Bh5syn4jiqWHvMTgeaSl0hOCLrL9LrqT+NkwW9YgQkQTrEDtxmzhctyndx\r\n9TzyacvER8TObj+GdECjkykWEG7yee/jkpt2RjqJ69+wV34yMe2Dq0MZ0p6a\r\nApFJivfHsUwofTQhpM9pkshFKXt7K9CQOvcsKws5pj98R0qh8jBPOW+owbAw\r\n+EJnj+B84oOBzu5fpAHgx8M4ccW7d2k+RR75BmXhR8/C00RfjQ73hdbAFUhZ\r\nsPeRAw0JChIsxZEWeOUwlwauSv7DM02+VhM=\r\n=k14Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.13_1660206992068_0.6133462839194559"},"_hasShrinkwrap":false},"0.0.5-beta.14":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.14","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"9f1a41a8f9e4ed3dd603456370a215e56c2ddb89","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.5-beta.14","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-BjLXJ6nDTYfBlBnXz4zaWXawnalVDPaMoEEm9RjQuuq62UZcvdDKMoaJHwK8Mfa6CB/o15iqJQp+24tIu7Nlwg==","shasum":"f35e1de380da0eced4a5c5682f75263947946a86","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.14.tgz","fileCount":291,"unpackedSize":1348401,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmJEW9Ch0H5JUyuhTDNatOer/VThcoASKPHaDQyaxdRAiEAiBA0efT33idYM8VpWB4WgOoMUtJm9pYHBgu30uVHLpU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+zX2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwnA//dkXctJSrhJGWqnX3auqpWBMxUnUBDWI8EE7jW7ssBj/+2Ygx\r\nAIrSBCIo2ovVw8xhag8MbJBdZ8TTtAjpKRjIQ9LdIzWS1rtnv9FbibPh26Ou\r\nR5JgfKPmd+aX3M1flfTJq0InRk3qYMotOQNjLqRmGQeINLM/6O+Y9U7RiuJR\r\nwYxOL8ajCAYCBqVYOMYG1POdytqkgiQmihmd40ZM7Qaw3jy+xKyeZUBlrskT\r\ntegBS9r94AVA/G7l7a+txw5I5mff8llRj8tQ/PB7Csgye9H3+wEMZs76tKvf\r\nDcseYWj2gBCctO+A54ywLEdTvHPiJpvqceqyXXetmgs0jc5+4imq6iyoMEbL\r\nN5EpXPhje3MSTvFRfKCIUphlq0gIyqSf423YVgXofkg6vUloMO6OBK5BYZ/c\r\njb/bSFCzBWjkADb9O6lA+PkzNNS+F8GKrCpMsGESkvssDP/IUAMKMa9Fh9Rs\r\nQmxCxFo4VCWEG7xeFIOYDDl1blq3+eutb2sCRxEJhMfKLuN9OkBxcCn5eEJQ\r\nP6upkytw4GpeM5AliwOHqdJEtfYfvNwMehMZTPKpnrfm1Z+Rvi9Dtc/V/j+e\r\n6SN5TGRoBXR43a9QfRq209ehcUDyealZOcxqEd8Iun8iRqBQPOjf4BFqQVk2\r\ngvXPd2lWSYWy0rAV+kq65TG3Qfq31kw4L6o=\r\n=/uk7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.14_1660630518611_0.1802428292230691"},"_hasShrinkwrap":false},"0.0.5-beta.15":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.15","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"4c5f267d59416f6c289db31408c7a97c2f7d2426","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.5-beta.15","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-/U2tiExAIq+27n6UNux9YnvB7R7ldnBlI4+L+d0HJi3U6+qi9FjyNJ8j1ezkmmsx5UJWJVMGU913uIwbE5vM7Q==","shasum":"5753cfe1877ca41cc0a95d73dae03cafeb0b3f68","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.15.tgz","fileCount":291,"unpackedSize":1348401,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmX5P2SvXsEN49sRHsdPvP3M4uz4MwDt3IUsmaVcul4AiBtCQUDpF1LV4BBbSBayLj8KRQ94wxQNptGFVmIjOHk0g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+zaFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqzw//TiWusR+XqjUft9J2SuhDvcGORxSvnANCQDWrigcGsskoWI7x\r\n9GxO8EEQmgwsovECLLDEFcD6JIf/4iTie9vmArJN0AkA/jXTtgb330zIWGkr\r\npdS98AmxWSza92Tkv0r+YiM/vZbt+z+I1vHylTCKTFIGohRWYqUFRXQjI0cn\r\ni4HKGnJxGjGwJQQsXCkYoJHyYIn36nCsdpzk3OaI6x3lfF2XQNRUJoX7iEBr\r\nfsBKXfR1xZvxhbgn+RZ7F57KiOZ61hXDsnM48XfbjDh/qL9l5U2XRWf3eout\r\njyNJCGTznDHSucyezghn6Sg+IV+9e3RV4PFTDfBHsJMhz+1V1PiUGUyQ/RYz\r\n8a/JXr4PPG1UqapLyrhJhlVHRIHFWAUHBmQ68qYf8N9YK2SaZRYluI6DMtZe\r\nEYLp/kI15aOUPSVO5+Vsp2ZuTzIcnysSZivr9V8LqnA73cejAb8qnMYxaD8q\r\nx1MBWifx5VqxvDjYcFzKbOxQMphz7xoCGBCuq0o5hjXKJnzja25+/Zy/Ub1X\r\nkBMhoadCrnxkioa/pIM+i6vQXIS87vHaTdvJirvg33JMaRpGbWhuhrRxsrQx\r\nMdeZ+d8p7ue55q7gT5VaTeeHWLa4BtnkZ18XBhJXm8PD/yslTpDAYWD9Rmv+\r\nuDKqAIPChh6WMpfdimYod3XaACoLsvhl2iA=\r\n=oTB0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.15_1660630661307_0.6139109341562994"},"_hasShrinkwrap":false},"0.0.5-beta.16":{"private":false,"name":"suo-mobile-all","version":"0.0.5-beta.16","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"874a3ce114205f478d3189cefdf4880e45a3c045","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.5-beta.16","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KeponEkk9i3hjSu3Js0U8BzMfscx0fyv5ly3pJjiK6S2Ls2kih7Gs/d2wpNG2G9CSNTKNbfbLxY4SYTZ2QCqQA==","shasum":"e84eea7d2ff31a14ebb507a2bf772a89f86178a7","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.5-beta.16.tgz","fileCount":291,"unpackedSize":1611858,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkLfN3cFmBb1W4Fc8xfawX0ySDB/rmCtpUhO/FYiBHEwIgD3EvAoKXB/m5pS96PrbZePEDUrW0tnO1Z+9uMdX46co="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+3DuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGlg//TVF68oGlg5TT/j1zu3ala5X4AmM1AcWeQ7qxiK3StNlPhOmZ\r\nonpQp+PCYh7EiPP7AeKCcMuRMJdmKNfRSHLhi6BMeez9za1cA0DrlBAoeAfA\r\n2VC/Hpc60HD9vgGzgEVCzPMgp2NY+Gs0xT3ksaHVOpPdXFDbLhxTOVGycd/7\r\nY8lS8zHoE7qsedktCJ5V2Dl5OJHPUuiCicFw9GK40PQ0c8YI7WQH6Ksiow/B\r\nvwk1A8NsTHznK2MKM4yCDVPwrM0W77ZZyxI42Y3yeLvjeVcQwfgRTcYdf5k5\r\n4aiVD5/14JVHfz9usx7cKjuRqr5y3tqbMKEAvN9WxqKH9pg++L2M0RG2ClSN\r\nLhK3JR3UiBr9zlJ8GO0yqPTzUSXtdRjZt222odele9xmNw/aFUHwgx9n+ClW\r\nJzgTYP9ltaGIHslBpMtPB8IAYJBlr4peEFYgyQ33JcoAHzwEpICaO9CCEOam\r\nxEr+A65VAkjEA1Lr4M+ci8CPtaoFZDh+qfj07jDbUX3vYAoLGu21j/7nohut\r\nrV5XzY6USkWgn+q4Vh7hkkYZICySqkNUq2EPtMxlWcRI1wuTNbVkESHUJonI\r\nQudXPERxBHQlU2zRizu5UHfyXGP2b95PgCpgVjJUBoReyt5TS+RgKApORetD\r\nnxYX8b3MjmNntu1oZJ4HIbdPe1TesF4Ufdw=\r\n=Ao1D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.5-beta.16_1660645614039_0.8002382808232458"},"_hasShrinkwrap":false},"0.0.6":{"private":false,"name":"suo-mobile-all","version":"0.0.6","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"6afc8ef3fdcf6416000f54eb87287c215a00a82f","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.6","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-9eaqxv3VaV3e4xdgnkLpKeAgjEICUUSleSvl5gC+dz2BAvl0rmVfx64SIAefYEpDt+EuNHPiq4O6/cv8wZVS6A==","shasum":"f3a4ee651cf5ad3be6b2b1a8250b086cfd7ca0d0","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.6.tgz","fileCount":292,"unpackedSize":1510632,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRFXvKQVXbtamZEuMkaFrSLihIx7iZjyOo9kEoOVS3JAIhAMbtiTgsomff/Qn1u/j+aasFxGp8wvrD53q/QV1svXei"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAu6CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplFQ//VN8GkLJOJd6+F09bH3FvV+cntlYifsd4AEiL/Gy1nmSC/5tI\r\noIn5lMEXlZk0fL4H6d6Zpy1/2+IJx6b+8bSNIlNgYWkMYQh+6AD6EdX4dy9o\r\nHQVNW6fn+6x/JvOGhfW86sppPh48qz5GE4yg6/MbFRmeYZF2RBRncxh+wRpf\r\nWqZ4WzH/Jv45tZnlwrENhm289G47f1lO/XJ5f/rWD7S1sWk6q/cqaaPaL1xX\r\nZrHEAZ4EYvHC0u8hat6LS0J4Jmv7HbNyRGRF4O3of5HgTo84uJ1zQuy5QubC\r\nU8z4C0gpeiGfMccmoNVlqx/LOpJhxukLM4pMK8G8IC8RZl+WmIEFysXawc+a\r\nGRla6dHOWS6LdAVA5mUmQR2IwouapOtNfb6xoelSRTtAc95VKVtDQSWrFgFK\r\nc8mokK1yJujYqtzPNfkdCTgMIy0BCQujMkOeW5qtDv1OGUTF9sY1q2FP1V27\r\niHjp55PMJbF0IEfIP8rMKGhRHlWEBvu6H2FT6E1rwd3ERLm1JboDoUO7bouU\r\nEdpD82qFUCWAbFo1nCcBqPdCE8Ej3COPswU7cNqMn9V97H1iVTgq330zyBuT\r\nlqt2DGitBtAxKi9TGJ4JJEY9cWqrzdgVzhCBoyOvRBtAv7iCprbJQNOxwZgP\r\nTqVCa+uTPFqNWwqQuwEY3P+2XCsh6bK3RTk=\r\n=TiQS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.6_1661136513840_0.6771913988282106"},"_hasShrinkwrap":false},"0.0.7":{"private":false,"name":"suo-mobile-all","version":"0.0.7","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"2bab6b2665e597acee282c24655cb1fb3a7482c8","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.7","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-MdrRa4mKQH3PAgL9/xrjQ+XKUz9Ev3GrFeTeh3r/puC9goFFKVhH9nrVtkIWY4gNp/D/aLOe5m3ib3wUtkB8tg==","shasum":"90f72c4bbc94e9b57c487d6bc53e259de5ac7733","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.7.tgz","fileCount":292,"unpackedSize":1510630,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXFXZstGjeDlFFP7xRP5HbNZR3DJYqdQLlkXu1V4dz9wIhAM6EWeXa8S1nzl+UgpEj/lIUsiLlLQgBzj22OFdNqa5K"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA0T4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr04A//dk/ZJ4YzHxK2YN4bLp1l2DRHGX7Ys9G0H7fqNOWlBkLwGSZp\r\nyfjZFwHUoS3ZbNnWA5yDsZZzx5SQoLpY+JwkGi0/BHmt1EBd5BOm3GKfr41b\r\nY+nuxwPykJ/LEdJv9RZ+3D9ulf1iMpNRMMJkVVlX4P5K3DhSMO4+uEYfEub/\r\nvg1Smg7ta6ByUnaZnYwDbHypy4Gtstg1ziL2px0qFFa26/h2/eqJJxEg5mzl\r\nT1S8U6qCl9sMOLsHPfUsIBTJkGMFmVeC2dembCYOp9trs0fhP07HpCr3849g\r\n454VveeQCKMXn8TZW/mL/toqs58K+rUaiP8QPDStI72YVGTLZODAJszYdnST\r\nbD1TMR8aFVOI6L3TtqJu3f9OUS99s+lrX3C3gntnkLnJ+dPXd3jTrJ9We9LC\r\naEep9HYyaexi6j0TZIsXLUzCRsqHxFOPt0QQLBKOstu/T1KaE47FhHVustxI\r\n3SCrbNn6OhUv6kWh1vnFjlk+HW0SjLoH9Y0eZhr/5fWUhRg17zi8EV7TFRgS\r\nzWF8Y+g3u0Zp1J4IPAbSokRLDX2VU6joNyM9oFjpGVdDbnEeoQ7HB0xo+XC5\r\nfdM5bxtgw/wdJhqBQhyheK1Fo/mZxdt7qS081vKWplmiroqNEhb0eCBdie8E\r\ng9iOPfqkiTX3D/1alXJ5/wK4wY55S9G+x20=\r\n=ysTz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.7_1661158648501_0.16907214316806063"},"_hasShrinkwrap":false},"0.0.8":{"private":false,"name":"suo-mobile-all","version":"0.0.8","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"2bab6b2665e597acee282c24655cb1fb3a7482c8","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.8","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-I4nHck1v8FdRndlVwO7FZh+MsV+SFWc1qSnzrX0d3YDL8naffL24sKzIJXjQdk3+xd4O61TBmmOKqZyVqRdPQg==","shasum":"6409f2997ca24666dc9986296a6302e0bb3bf137","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.8.tgz","fileCount":292,"unpackedSize":1511793,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHgZ5vYsICDKTjnZdLMnWI9xEaC/GWKvJF9UUvIfJRNAIgXYUryRPvMN/QZmFH60sBaEcMwIORBEtyyUbPr74iUjg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA03WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry9A/+ORJ/vSGY+zJI7p2sWOFFyseVpnUvHHzcacX92kI8iVkHCPLI\r\nXoH73LA1AdMJZppk7RTEF/VV1U9aK7HgLcdKlRaUr7Bj073GTCHpfJaaX+vo\r\najnr5FLBRzsL5NqYUU3ugwdqxwvOXDOXgf81gdTWV0AcLgQ3Mx7kvSVr9/eB\r\nb+P6UPsLx6PfcTW5OY/0nVcxzrcuKPvyLLH/kC97zZrm54Rmhd7Hd2mVkEqA\r\npDinpv0QYgtYwMWby84EHBkG8uR9SPIRESGz4le3vORXNOgMm/r5LBmjDnOx\r\nfyIKfwAYMji4tfwEARZUh+e1+asswd+x7sCGchvkS7fr/hyLt3O/VYjzN0IW\r\nxQxU/aJ2V31Tak32Tapx7q/0oCXCnhEwYmRwakaiiks65VgloZpzgETc7/DL\r\nSvJCXzzOanF63pAOn6R86MXaHvg8TrLrkbt50RkiOuy89+4B7/Op7o1x4GQ5\r\nXolqt/P68aaOn8MAEqwF3u1WVlT1Xt1rihH1CoYFO0hy0lDxL4/JlqYYJgWe\r\n0bvWYrzTUfu2yQpswKd12FdWZ/QT9Gv1l3rRWnKgATo6HriSUpGvFE2CJSUr\r\nK3E4Bw6wT94gpFVNr7sBMlVM46OFzXXLsXIyeUa953r19InoZ354Y+zIm4Ql\r\nhWXkjLJvnhL61kD8Fns+uvnx7+8+a3rjP/M=\r\n=BijG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.8_1661160918422_0.8736882356316056"},"_hasShrinkwrap":false},"0.0.9":{"private":false,"name":"suo-mobile-all","version":"0.0.9","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"c394619aa985a6d675abf104d25a001e8260e5c2","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.9","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-cjCx7xyEz/0RzWJdvEQiRdpxQ5SuZ1yYNdp00hLuKR+MTNNVKS//ebF6d3RMvCr5/gFNbJE3yCBbCvXBqbuiwQ==","shasum":"edcedc030bd74218850ea888aaaded8767605b38","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.9.tgz","fileCount":292,"unpackedSize":1512030,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMO0LFQSbsXiSNH2f3Qwi1+ZzAyGltg3Hjt6pA+lQAKAiAVqVRgNZ1kbcXacM8JxlKm4r0kmFiXxvpHFIxqkfbN8w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA3EXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxpg/7BUUhSUoCc8AGxR25IJGyiBYGVk+BK1s03RcmmhTFtumWMEHs\r\nHo6R8PQzxTSMdVXh3xiZUiZKA7KImznXpW6Xl1r4bLPEe3rCiKQaR5oKSnHe\r\ntigrOvQ/IXu9fGz6NtgSzXiXYXSD/EuzoLBUcOupyPfKKWmDtUDhiEW7pfHa\r\n4jFujdnqX8pg2gde3XJGbn28xGSjnihbJu7JwL7znFo5YhJau36Kr1udwH/D\r\na4rQ+s/4Qo66nZAWxQLV/9auvJhAmXuJCMaF1baFN2Dy3qE9AxlB1Um9ZS+O\r\n/qOkLmGSVCP7gWr+b41ni2PDNSTGrYc2teMxH+8ngaTBA6olw9rGXLP3v4cv\r\nIwGGzSPAusiok+5CzNQdERfzWiZxcJGMUeGi8w4ITC8Sv+TFlZs3IZy3Xy/z\r\nWpTF9uBP0jwFZaVqf0cSWOZtcIOJEakYv6bBRV5kvAfM7Xcb9DOvRa+gNl8u\r\n79YV9DvhMFq0hMEH93TpvmGFYxcT5leEr/8jjeJK0BcTjvkWgWSzGsTUb45+\r\nLgWGXC8q30sSI3Oey9SStRq2G38vEL8kZKAmLAGhgJK9R9LqDw5yQwhQgZUw\r\nLggZSiIUIHquxw8kO2u0Mv0ATaxsEdDAsR/InU9Sif6cBX9eiOC8/hYh8Rth\r\n68frcwQMBz3y3NCLhz9kPhUA5TOdr0XlwRM=\r\n=MML7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.9_1661169942772_0.042388094060770376"},"_hasShrinkwrap":false},"0.0.10":{"private":false,"name":"suo-mobile-all","version":"0.0.10","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"437cf7b7d7831f7f6334cdf8b8e8c0ad0c452a6d","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.10","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-X+JFOo49b+O9Khi9BUlSNmuICm/lK/IQREclizW3zU/5bYDm9o8DFmS3yNpz3nrpFsmJtmDyYVE0bG9Ph9ZI1w==","shasum":"1c1aa2ffa4f0eed1250746b3ca5a792517f03110","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.10.tgz","fileCount":292,"unpackedSize":1512024,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4ypn0ElDKi3qPrZ9JmCgF+tMgTYcbr50UGOwFBZH9vAiEAjzHw1asXiVMgT6Tr0OI+3PuuJMRHhyMld7IwlwLHNIw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBEKRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0axAAkvVYT+OsKrGxUsbIShp9TZuTL8yAEaroazxWcyvy8F/sttev\r\nH4/t0j19x3cns6RPUZaDXriM/v9oNyCAXlTzLiZOlZSDG4Fo1p3XPgpw2UsV\r\n+5Zw0p1RDEb1+7IJy7pUCzQZ5EYOhhlIGllq0Z1GeEMesH9r+qx+5Q558Xtl\r\ny3ImkLAIAkzTdE4ZvRMjuDpKc/Zz0PY0eOxSF+9aFjVIKz/NBQqZ59o2oZ8U\r\nt2dYUlHxKEmZAVG5GsmUyMCulZqvgxCKdn5LsFptn6XGQ2id7hBToVOC5tT2\r\n02hGn/D6/Ku5Gs8Cydd02ZrtxvWR9xJcLYNYOb8ddQG7sNoRfGKuY6tQn1h8\r\nLSb6gXo31Zyc+E9cY6Gw57njXu3nk7f2hVCNrOcqdIme4wRPu15JQ62l/oNw\r\nZFWsKhC/l3Skfdr7/5+6LOYkjEcLFzsY2pMyGOJyV8FD6wY8YMp7AndnjRXb\r\nqDcUaqdlB4gUECuDBAndxhfhQ5fPlYT6psshkuADJCQkRdUPAqrgz3gEsXZT\r\njloanjm0Q/gXcdxNDiVFpTWcYGrn4W8ON0a/fLiQmYMEDNzMxHwvkQbbhOg7\r\nnrfOFJn+4rdNXOwiJEUUKkczrBIkvYdAWREoruk3FWEduJESU1Ay1Spydv+B\r\nHQaezE2t3h6GD8rjCYJTEO3hEV2EykyrlA8=\r\n=5ATb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.10_1661223569208_0.6976547524391543"},"_hasShrinkwrap":false},"0.0.11":{"private":false,"name":"suo-mobile-all","version":"0.0.11","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"b5bdf4e07a11fdb678b654e286085654533f7c52","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.11","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-ZEzYgvA1Eujq9pqv5cb64Etic5Z1cNkjnznEozTH71OF3h1DrXQeVmhb9qI4vMZFGJhxNXVTYSQhPGMVS5CNag==","shasum":"1fa692a08873acf67059e266e3ff2d0fcc63fa43","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.11.tgz","fileCount":290,"unpackedSize":1506734,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhITT8tq9KgPvHcMgqjwPiwuLHzpDmGqHOuupoXfpmHAiAnnb+CxhUIgIxgEnVM31870l3kGPc5MCRjzt+yl62zhQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBMv1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQ9A/+JCNo5w9VHUsN53Bz4NiHg6tA/gGZ4TVYqfRND9vpnLZU5e8K\r\nBU6B+GhsDn4isxz6TP/6pBf9K7unuauHi42j6DtmjXfcj7p7A6nOsn2W4Nyk\r\n7rY5HZs0HbI+ZtbAPYMIGsesTf+1GMJ4qN/ANDVSHKVROLhFOzfVYmVcgCE3\r\n045tLwuVkMy8VfoQzcEJ/NArS8vOgK/bRByf5KJCh7w08+ieMMreTCsmx8AI\r\nez8aUv6VfsGzw2aQoYu4DKKOgFKVoSO4jLeGeYuEHCQAHdi+AlwBRhztbz+G\r\nbIsK10w1JvA5SG47JLBJ0Q2S0Oe2jGj7pRCznfNHJu7vCmLyT97PA1nXh7w+\r\nJbrCkJzDG18OC8bnw1/43tdp5jrnxj6lyInPT7DVmtmtXFBeDp0a1w17C4b5\r\ndPgC+pPxa2jkYX6kv9VI7L8QoeNp2LUo4e/Ftu5H8LLoAcLAxLrDgn1a1wbY\r\n4reRdnVS3fp6N19WsYbXOdXRXsCXZIpHbRCppvbYL18r1ceUhbi7qre7MZP2\r\noLdQk88UKitVaGMe8XNnG7+epAtTox5u8U+v1++EHx5lNn+K3EOBqulKQDAr\r\nR3rVlEvm13diD6umz7miCZMW3FnrGhNsK3VuMFCKYyAvTxi6OJliSrcOxsNb\r\n5KAto+X5CykR8B+evx6AlN2O5tb2O1PP7L0=\r\n=jb9d\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.11_1661258741043_0.757310264769115"},"_hasShrinkwrap":false},"0.0.12":{"private":false,"name":"suo-mobile-all","version":"0.0.12","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"afaa8c85ef286d2f1dcb25b1218ee73024fb71bb","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.12","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-DVmfTg2AwpOgClEINTWwShxN0LBzY0Lg1MlP1ut/SjbnyBhUaxTZNoTqcAYz4/JJhZwO9HZY/ENC1RXKKrEkVA==","shasum":"349ccbfe0cf36f23e9f5b94a042f309a38cc2563","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.12.tgz","fileCount":290,"unpackedSize":1508964,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+sK67gIbxfdT8dqLQQkqNgMiW8bX9COuzMCdv7aoAxwIhANLlFozmviapZbSYa6wdd0M6eRqKCxp5WBGtSRX3EwyC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBNt2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKcRAAiAQnBXF+L9ps2T3TaIqDfu0MRB3DO0A5LT/0uaIvCEiWv2X3\r\nIk4p+qLf5LlCDBaNQsCSXdeY1C3zRYldXyojeH3LchsGXAd36zst/vjeAVCg\r\nncomNS2ZNKt4xsW70LZDlQ5tbx5mw5RMA7BW9RHokStzSFrX7FrHIUO68Bmd\r\nAuzuzF35MgaG0szO+h1yLD3DuCPWNHrXDFyjYBujaTWfOMZRrk7r5O9QS8kr\r\n6MJmGZCH5scyFCQ+16+pQhnANtSGr4NPy/zrhUXhPXKjwQGeTBc4DiO6NTFq\r\nBpEVpMsXOJnyE7Ey4TplFV9gXZCKXmhpnYyfcEd6NFW1J9A3/r3xowBEZvhy\r\nk9KzrLob7uoXHbL6tdvZtbmyPvS+QQCjeenpfj8KKQcupQVPw2Hz5xPvvck/\r\nimjHsT8pw2S/o/DMf9NTTayBcps3UzQLAHuv+nn/gG/lg/jH0diJR8RSmF55\r\nerGNooukDG5rPbDl4v119qIiYn8MJi8rQbAEaVMig9rXDd6fWbbnVl+B1HCy\r\nPMjpq6ckN3UWRKgdcZURlz7xHZk39aHYxm31Ue0VMBnhi1hMck81GnfXRpcV\r\niwBsMnIDAWJK7tA2i+S5ljkUflze4SiHJW+xDKFfAbAdg6+jRyM9zyc9CnQJ\r\n7RWfZVJzlpnwtQ7sKdDj0eTdF74p/hGyxx4=\r\n=2lni\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.12_1661262709941_0.2850912423655434"},"_hasShrinkwrap":false},"0.0.13-beta.0":{"private":false,"name":"suo-mobile-all","version":"0.0.13-beta.0","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"d85aa626ec44d5cd55852a4dcf241d9b28b7e703","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.13-beta.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ffaJXsRWRvsHe38a2P78gv5JUOXt8tBaIT+8ur/LyOrCoH3O+b+JCi6ue0MUluc8Hr8caCBj+Fra5JOz3W4ocA==","shasum":"3ff422e27f0367c5dff1b64c0544ea1c03c00762","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.13-beta.0.tgz","fileCount":290,"unpackedSize":1736390,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDompJE1Tes+bDSw64N6CeGVRFP4ZdtcOxB5ftLQiDljQIgdfra7pOqsp6J0HY7HOVAQjE06fAg7MyZos0LkYewtE0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDYEFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrf7RAAgpUdTf4BuUeNzkl++9mdhU6pjEkjS0FX9KorwlT4re4r/T4M\r\n7BJMDaR2ZA3HMDBSJZWnXy0751T65Myquk65mLOH6+Z3JQfdEWM65qLsAtS3\r\nutIPNycX408dI3W33SWzmAW9YZVViJSQcAQmEQwKQuFNFhf/GghHjypdpojv\r\n6yguy9hbwaNYw9THC2J1aBdKsOCDWYi8Pyt96BNXPYk6NE0ilExFmuoIy2l5\r\nf5fayS2xNJKm/PoIUB0DUDmTFKAIL2Mlj7CH7D3PqsptIyN6/sD/yDgXeh1V\r\n5mvr3tj+hl8GVkEK0LwHpJh5LgoUfDuRkN+9ET9bw3rzGWGzwdxFxGigwE5L\r\nOjdEiEXaAU/Lpa4Q2tlJBgbasNc8gV0NWdvDfNvTAgmbvviS5OIOoWbMZqzm\r\nZfUL2ztKp3KZaozWesnmhEG7I4y+HYLDoKz5lFRF4dlgkBRm7yPjlI0+XXC6\r\nN8mHJS0EnEtsXePJZIk1BD4TsicOKgWlVlBp+wIzyLnLEILtPZxXqwfAxj2w\r\nFw2oMnD4ewFfPJjwcSq8YvlEC1MB1LvMKuZID/aFPEnFqAG//Iww4HO2+Neq\r\n5xIg4foI6MTK2e7jZVfTsGOyZbgwtf/nP3vmC/zBpmvP7qDFROksfcuErpri\r\n53sSf8TioiCH56vEhyyovvd5Vb/zG/+vqYk=\r\n=WruY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.13-beta.0_1661829381459_0.34574157403342975"},"_hasShrinkwrap":false},"0.0.13-beta.1":{"private":false,"name":"suo-mobile-all","version":"0.0.13-beta.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"f5f4213178fb84e287b1dcb922e99f591350ae38","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.13-beta.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PFWFeAnIfHBo3PukxNKaPVaDMl3Zw1clLKt32rLqznQmfwi+evdtnpqIMoGpcXtS9/uRofokewZgi+c+KlK7iA==","shasum":"5d206cec33ff2ff0ec8eb2dd646a2ab9d33f8ed7","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.13-beta.1.tgz","fileCount":290,"unpackedSize":1736436,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqZNamnIMJzORU0BxdN/3vlhtumbj6rltD5lYlBKw80AiEA1b0XY7QWtgND8d+h+twhcv4RN2siqGnVtHwkpKfOOtw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFWOgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWHRAAgzcLXNz/MrZ0E+SDP0PRSfvTAlXUOdcraMX0sSZe8Ij+KZxr\r\nBknunu3EQNibE6GQr/PZNEk0xwMtp3oNClrWH5egB4yy8VveVPlhWOjsR5OW\r\npAoWH/eQsZr1AGpXVGBT00/mUgsXND74JCfMkNbEAnvxoXXT3/Xj5UFrQ2KB\r\nZqse0SiPSEfO7LIlCCk0NoZoIVovbZRL4IvNGeUmVVoeqo2+hME+Hahlx/aG\r\nVLGExEbAnNj2oL/0uKZ5agYGgNa05Utteuz8JF2fZxg6HVDurqZZZ6FSMiZp\r\nPjo5atAekHxuRCXpDYW1wJQL2uvk3zxixhkGXEi8SrwTN8iBQmdrs7woc3km\r\nEpypfAgpwkg2DUmMGk20oRS8dyPhCqt5Egylf2E+6CT3HM2mWl3WQtjHxGMQ\r\nLQfKdDE1J7cIyHfamtDajD6dfMuCh2OdtGPhY4A1al1iZpq20UUPNQvyYq39\r\n5uXizxeIia/PpPdTdsxvxDvpcntHb9dKueOYFxb12+Kfee5hqwl+ubZ5OzkE\r\nMmGKBZXJU5pKt6oiNQ0555FuJ2XyIKP0e6kCqvu5VnJDgQtiRAvl2hkZDSZp\r\n4tf540SZRo0Kogi5ZWTatgbXW8SUEYtQsQcCfAo5xSiKdzZUApZ3Fvm6sFre\r\nuQGh4MCTXsCxF0U5Ovs/8lwEK978kO337F8=\r\n=u1XS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.13-beta.1_1662346144332_0.43284937500890663"},"_hasShrinkwrap":false},"0.0.13":{"private":false,"name":"suo-mobile-all","version":"0.0.13","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.10","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"773e04d67e9a9351a731abfbdae5b4565c0bebb0","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.13","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0PUuasPfqFpvbVUCJQ/kVHS3tERD3zbNaSugl1SVGn3tkEtiK0CEr4tnaO3DC6tLyA0W78VxJHhLHnd6pf0PeQ==","shasum":"6e13afdf6ada6ce70cad5aef45e70ae820f5b229","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.13.tgz","fileCount":290,"unpackedSize":1736429,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH09+7bUbk/roZgGV1V5dPaWyXfAaeF+E0Za/zM9ttwAAiEA+dCSRvgd1ZKC6+u7ud5LcdnvSUyvZF5UI/AVqyXv1LI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGDC+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN7BAAnE2v5VIbvLtGa6qfNQjPNQeiHXPMxvm2EZCrUQcOYk5V9awi\r\nExJ4Qyd8//27N8AqcpvYzyOatWERkMuGH3FLGNoMwLNGFR+4SehpR1ROSMdg\r\nt4Dg5XWzAGUkXYlaidV6V2eD5/5LDGkyNzbNgsTEamH9/2i+XzcXTW14/eES\r\nZDaF1DsQtqmxDWlNx1D+Bpz+pby3RrQ0BgQx3srGRIBwULGODM0YKHkNU8Al\r\n+h6syZVm2Aj50ug/OT/3UeMGRAJ2ThTnCd09nLShF39kdmmQ4um48QHpF5tw\r\nqG/cDIFBOdC/TGq6sqK9JV0hWgic5T7TDNuZSkGEMhLYZBMJnrDzTkknr6Wy\r\nLA3YvvdNiPpDmMNwQPXkJRKp01asVqaiwGOrY03DaS2l9fOFAwHXtnJjhR0s\r\nOT0Ec4PsXQQnRG7kCOJ+RNXEfgyZgIqjXiEi6l+11Rd8Wzhdzbeg9NIUYUeI\r\n0EGyMo+CsFVwxBZfxvKIVv9jJ/DpqPFFIKK2V4qSmnb54UNovMo9A2pZ26Eb\r\nNzvG7mfe5hjTBbis41NiX806plbn5iy7M+fXbh5CHDaBJnjnscK2Avz/jb5m\r\nWk08JxYCctam8xUNCtPmY7ZVDDmV+es199pWq/s17jtsfjvwZY36hlTOhOiZ\r\nmVeSqgDJAy/ddJLO++i/Vu21wqoZu76UK1I=\r\n=nD+M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.13_1662529725832_0.315103709908082"},"_hasShrinkwrap":false},"0.0.14-beta.2":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.2","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"28bb8123e00169fce7031ab6cb2411f1d76033a6","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.2","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-YmV9yD6NkwwH3tbrGbJaw43OQJgAjGncDgLYOkWTWKkt+2GP0UU4B/cw0jV0c1yYGmF/yEzlrkIAnFRtr00kfw==","shasum":"ab476407cdb9b6941e60a6851f1061b905b9b517","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.2.tgz","fileCount":290,"unpackedSize":1513413,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0RD9A065tvJw7/xmud53ysyqJavPe3hXReTud8IPccQIgT4ZsDQZwbGpiBCyS8KP7GEc8TIJP/ZVNDkf3jXrePT4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIbdyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH/w/9ESErt7EONNOSR/SFmNyz/qQc7V3Legjgy6d2qcr0pEsK/zTT\r\nnCSL55AI3JeaqkPUSv7lvADIpKi6Bruogil2BXP0BXhotYgepAycPTrj15eh\r\nt8vtEpsYBXlMjGcLK6mWSnfafHDc0yW2yC2tKgZnXLeRc+d3fmlOVHGB3vYI\r\n+9tMdZeRBFTHwXk8MRRZ5i5EspXFVModgn9F1wvglNTx4t3JM7Zytco0QCI3\r\nN1mvq0N/4abCtbFuktlfw4J+pJGTHXjFC7W8UqFxhSaBxOyDU3ExRS/OKqaO\r\nyAvldWy/TAxxxtBH6DuxxgH5ZFsvxezlJcNfjNYuU20JahlNu4WCtDQvSVKi\r\nAjn/zETTqdJFauasusJrqQGRZAcpChQEOlZwClIWykjUQAni4auNDjG5yayQ\r\nrbJwPCt9Y//t7O6gTVKeMIbn8ap+hfoQ7/Dr4pMzhZ27Ow/Rt74/Pdr45QoK\r\n9uJj/haATRjIfSPgSzUON1q6a/PDTrkUWfg/alt54pZ4qkyF2Cmrz5T7hE0c\r\ngpSC13KKYTRQRWmkRh9mvaSXcv0N8cb7j0JbdfZU7+w0gkrNSF5HCjFbUS33\r\n5fdKdx4rwzs16U5OOI6cBt9gwxF8YQvVnvjdwRQH4pPTTgFvhlenBMz66waU\r\nYWoJdVoq1NAXfu8Lp/Aq1aoKc8SyDz4UNZ4=\r\n=i2QN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.2_1663154033884_0.5044282933536339"},"_hasShrinkwrap":false},"0.0.14-beta.3":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.3","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"58f779afa6513b8c311a66973154ea55feb122ac","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.3","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-31wM1gdLAIZe3kiFUknWkT6IOK+folzEbS2bIQ0TXmYLZeR68X7fTISARpNTzHNfWB9Iq+jJNbePLr61VPizhg==","shasum":"8459421208c976e1483ffcc4a68e19bb55872870","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.3.tgz","fileCount":300,"unpackedSize":1520058,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeF5tDcWPWb+EPomIxgmn6KgVJJfuC4ld0Q6FgeC7nyAiASWUIxewbkFcinzmOblDGq/8AqIjII/0G2AopGGubcmQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJ/pgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoywQ/+MvykXnYUyrrQVBKTfmWpvZUgoxr9TMwmF2UlLtKKL540AC/B\r\nxtVMxx6+8m8NcjVFO2td2ZZg82k/Ch2QWlL05V7hQnW+xBrE+gZ4Yqw7iG/o\r\n78ax33IBo0G4x2fF2yuoyr3+KkwwElhElG9QG5YHJJMYqyURPTPwxzEPaWla\r\nUBuXIUy3ADsu9Q+BNW07UJqe9jye0o6vx6GcBVEkc8gEb3TcUiJQD9Dod1E7\r\nICJ8jkkuS21Sdz+I6Ip3ZyFumaZEjd/xvc3fPIWu9DQ+XmPYoEGV5tyyh7PN\r\nVsRIh2fCRlqJFUBZbtNo7r5NZWTpckiR9xIcfNTcaeYKUN0qQ20V+BTmrtqZ\r\n3LebNkEty0cy/8O7dxQFfeds46tESa/xKZvX3RzI/EAFQVbGrxwV2mwhKyR8\r\naviUGdTx1UbuTJYZdmPs1KJj+bmLmL8jJrACJuLZbc2BN7ImUJT1r0Wl4zUn\r\n0Mbk+ri87/LyzBFpAnV6gdytDqJQdvP3eUVZWuqu0z7qzL7XfRqwF7r/MlTI\r\nrVLqArb9l1aPAlnIBXv/qeNEOb0BwK2mlddLDVeXUG/v3H5Yl0GDraWkautw\r\nO5Swteitw7h/hqXUn+CjfbkBIso7E+J39f4cxx7TuJ6W2/QlJz3qTGjuDB2j\r\n761hX7Xtr8p37h/3viBzSvoEfpWdJh9mPno=\r\n=n7PG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.3_1663564383889_0.2505244343107962"},"_hasShrinkwrap":false},"0.0.14-beta.5":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.5","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"a63ceefa99946d13a0bf7adf4f893a9e21b5e970","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.5","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-+lVXt3D7JKj0qfgzPZ1zDwnMCR4TDwy64kycRGB86pgqWAZN3ZIbhzOAJT9LKSqjUiPdGM5buAy4nOuKcOlfjw==","shasum":"3123c329980bc61736b1b63d38aa2117f766f4de","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.5.tgz","fileCount":300,"unpackedSize":1520102,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEI44qwS/E3T/XDFF/MhzC5iNh0avBKAkzbt3LttTSQQAiEAt3hFK4u9GgcFhqtqmGXZq3W4tzfaqpRzpZBBBOhMnk8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJ/7GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjuQ//RnX7ln6aSv1I/4Y20i3hiZALwMKnk9ma6Y61XytZcwPha5jD\r\nHt36EJribidjC9LiIVduf6JcgesSbOAjxcvyZ5EBRWCaLf0i/9FGR5VIAXyL\r\n7UUBdUFO88tK5nI405LgiNSeWG5vIiARcDJnU/9GE95+CNiSifnsAVr16vx6\r\nrmmquz+R131zsTMEK8YYsMab+UjkRaM+pmJQZsETI3Uan/pKD13MnU/EJuVw\r\ntgG/XrWbn4UKwfFDFWH3eddvryaRgo8CUlbOEJcji2Lhr43OR/zw+DE/SU/j\r\nP4oBvDMPtU13HG7FUqLSH81VTuA2DXDMXn8VbVc1MVscNyjnYEqeNrV4PvG7\r\nDJJAL8grVuRRnWrQiJj7RrTFcJmCmTIYS1/7Peg6oVVvdAB8WVGQo2EmSAgG\r\nhriKXUQl13EJ0Mo8L/QFOf1uSxaM0c7CPRZawr4w+E83JlVpMHcE45SqzIZt\r\nPLvQN0om8swkGMnVM7EpSAQRv+y2MzC2chzrkvrUeyEJMzU9ibX8MohDWvz2\r\nQBdb1D59YhKyvy0mcmD2VVirol25Z0dR8WhoLvOi4UyGqVkY7jjcavDonYqe\r\nyiQizptVjY0+Qrwm9ZwiZAGw/hDoCJR4iZNVN50fy+pWMPcS6NwVFQ6U/XI9\r\nR6288Zv1w6ynEZ50FlX19bRp2/s/ud32Wo0=\r\n=y5fF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.5_1663565510607_0.29179145655938243"},"_hasShrinkwrap":false},"0.0.14-beta.7":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.7","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.8","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"b3bac1cfbe9c60320c47981f6ef5874b7836f2db","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.7","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-R6GoEUPsk7GMv58A6CanGnRJe6h2F11KJxHkt02rztRf+Cks+aTzAi0TIDUujPl4AfDxbrrktFFiYFouQ5wifw==","shasum":"7f9d314022c219f7cc177bb9295f0b4a7b540ded","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.7.tgz","fileCount":300,"unpackedSize":1520502,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDqLSomihuP33DaQP5HbPRPhMfi8QbGsT9MicT84hv1AIhAKfL6u59eIMN0JgLJPWfxgCd0FCi7brhB1RP8qhM0DPx"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKBYWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkSRAAjhnkCqPLsb0ycrxvGN97GK41iTglNiSuNaD8r/qJ72dV+dKe\r\nNnlvAO+1NOG4V3MhIGtA56gfWIxVXDYF6HkJaxitqbjD8eQpyPBEPQV2VS2c\r\nXjOk3Tjb8vxA/TUo3DEzs2NnbKn1CUnM79x07DNI1ObKQBjriFmTCoos0uFA\r\ngczfLJc3YHyjcgl2ktumLS33OHRDvvxO/t6V9bAW4O/mg1ag4RBIvxFWSeez\r\nxa9WUaOnzzmcb1c8T37vKiVzwWpclqeBfvBiSsau9e8o8mj9+HVjUeOPxyxm\r\nJK6zR9F3WXLyE7cvlf2Gvo6gNtkBPue8/lSM9nxUkhQV+L5XEcCRudbNlSbC\r\nuaiCXU/HXNKuwH9wjYvqnXbFL5vlF/lLTAywCW4ULKWUFbg7/pC4mVWPZd7X\r\nf4QBfm4vVxug8ASdWlV2e5TeyEsjyvHHRtgj1mkFzR33KY8YxOISqjJspCea\r\nkez/BtJktb7p+81PkFz9MSBdAGVmtel62JywplL9DNRwu5UTplP7ukx5EXEH\r\nymKWZiAoEOGAKhM5JxOFeEcE9B4fuSgkX4w2183OoeD8P38o60U+grwBCm80\r\nWS8kDhVTLCO3UBQP3qh5TP3cnek8jECRXKWQxCI3Ejbr8bMQUiyoJhhlbZcM\r\nQ5Mm0PZ7DM35dGTNcRa98e1KGwt/Loick8I=\r\n=ZQg9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.7_1663571478218_0.46770972491660645"},"_hasShrinkwrap":false},"0.0.14-beta.8":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.8","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"8ef14fe60490fb6e3ffd69c3c5cc295e1b23ec37","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.8","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-2QBmuLBLD1So/6NH6Hv0w2GiCEzWVdc9QerC2qdHzfmZgzF8w3W8asAFnBOBULwAwmUwSIWfVTfoPwW0/OXH7w==","shasum":"74c91b1d68aed1b333a5d3079136aa8519511fdc","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.8.tgz","fileCount":300,"unpackedSize":1521178,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCSiRLVSwDfPS13Ai6RugEvCRZ+wtncRYgSFKVR5+n8AiEA4PfqrBnu1/HAS/klq5uodts6xgt9NZNKMfYUkTrg+H4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKCbxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO9w//VVN9I9YiXh9lPbiaHpOk/jWhT7uh99NjVmG49awsf0VqlzZg\r\nWVtd7naW6gXcjeCCUgb19NHtY7cxWyt/jVjvj2/SXHxu/y5NV0gJii43ye4k\r\nZ5h9weqW4LZzv2oPIJEKB3xsUCKjALllGd/8GiSiURZqiYZg2wt2USpZHWFS\r\nIJYhCie6+mNbXrxiEQs55k0w05iilvssC8aff45IGVLqAMXFCaSChLsRK5r+\r\nis2z2iXjzFIwAIBxDaOB5fXY9hyLik9fNkZ6WM9mum54noIqcfrp/iVPp5p2\r\nDrt9/JqiUOvBgqjIbYlcQ409hj8KlG44lcrML9EA1MuqqFANyUs12K0kbMbf\r\nymyl4EQKSs2TRLGYPLcW3ukmuyKulLecHV6EzEqFz4F8kiDQLeWVhV4avpdd\r\nA381lNu9qlr0DxMrVvm/yMsdCjFEjZnWIQtN9bD00qVypvEQARXhVcmIhNs7\r\n3mW5UWAFIUuSjSNsBZQF93D8MZvZkxNQTNmtRmQNmYPnTd7nrwnb8WmdninE\r\npp7X88nWMjuHQwuARwCLJ3qBKsTtjcm6u5o3J66Kb79mqfs3YU4IjA80PX81\r\naQ6BTtQpzd8Bb5VK66nim359Pm84nA9vDwdAtOSkPkfT24fwoPBsgGyotpSN\r\n3Cd3Cvn/m+fpHN/OiEcwGcdyKRCwDN/wtTc=\r\n=Sntn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.8_1663575793104_0.7362948423431368"},"_hasShrinkwrap":false},"0.0.14-beta.9":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.9","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"a5bdd5af65c176f7029604b813f17c43f10d9ed8","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.9","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-7IJGn4pqAzs8CV002hi3eOe0KKsdR+LAYox7F5SWqJ3MtbJEDxf/AkphMj5yF6WI18euO7RohTs4RHoOJYNfzw==","shasum":"c09cf4e71ed7e516826f127edd3b302511b52846","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.9.tgz","fileCount":300,"unpackedSize":1521185,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICYY2IHOTgnWOp9skT3R+2TCjqP70zjCiZlQtV8l6bRrAiEA97a6BciCuk1wA9ZrdLzs2NA+VGIIdQX3X8JtySbJ5FA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKUz4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHdQ/+MCRZUasrz5lnPDvp88qV76m0U4MUT9N8dRYvvP1Wk0o6uS9E\r\nmU3qKmDWQ6qYv6pMH1G7NvgGnXktY8v5I61muJ002rKl+JogqVNuWh1VEemX\r\nZDhyzXb8obucwrimv1UYUXeOt/NSUZiNrRCxgEHvPQxLwf1Wfk7L795H55RP\r\njO7h7L8RUUhEzO/QPmX0OTuBP2iyS6o1BLS165JiPzH2e1l3KDTOWoYDfYJf\r\n4JyMVHkWFEBO3etOFbXbxeKax/IVImUXMS8LyhVRgpKMGFgilT3xtJ26aELi\r\nynumqemg74VpBE8KGRkBcDGb7VBmqbH7gbMzap2yCeV2FR4IsAn2bDzJkvoi\r\nzAVmD5QzQzJtlfrLxTQYu/i4HYLqyB/V8uKJxnHUEhiQMODQhs7G1KLxyda7\r\n4KPvQB9gfRJmKsJu4b9O3xAzO0nsbSU3a6EgpoulMZAzUo5DgfbQyf7ndSxp\r\np4KLJVzrzPQLxLT6OUxVJi0pVwk7nnGmCkYCd363JB24XwRLdlTLaY20SOH6\r\n7OhPFlnANn/UWg4LzbqtUqvMqIfSNcXoLHCQNsPrveCgQ0fPO6FQXRN012rT\r\nRyyRKj6e/zQ5ytMciQmQYg5y8Tho3kDfWqkg60SRaT2tJXhn3Yq7bDfGzHAO\r\nI5+xdPQDeqEk7Xh8udFbQzXlvJPy6nPZ67k=\r\n=Tud5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.9_1663651064637_0.6743571381178537"},"_hasShrinkwrap":false},"0.0.14-beta.10":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.10","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"bd2d90a87589c97f7df94d9cb6aab8ee7d93bcac","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.10","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-9SNqJgyK3FccQm7DOft/JdXmixpib4SjXQi3qOfYSzWd1t8viMsQnE1E+3CKIJFPZEL0oKQ2+NvZ8NAoqqu2kA==","shasum":"c993549a0fdcf1a0708e189a2b65d2c1bc0c2e41","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.10.tgz","fileCount":300,"unpackedSize":1521182,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDurAu1HEEtX+DLwin8z+hCtq5lBeseoghuKRHd9uGmqAiEAqSWKpd7W2XdbbMej1Hh6jK3M6oKvBjaftPxvymtogoM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKrKmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw+RAAod/Se4kcQOXsncXNrtgyFS3UxT1+5nD1liTrFW1jTZg2jTay\r\nVDUZYCTm25Eiv76OwVKRuxCfOfS3KAMiymoMnxqj0T3nooX1DEQhtIXKKS/S\r\nV0QpOqB9pSlICpH5rI1g6vfqcUd8UUpsypd30gVzVa2V6Jd42iZdFaBgcSVd\r\nYAjUzwp68gObAs4b81jm9/AwQ+C2rnlmGWLopl+XfXVbPB/fF6QBWvtZrBIR\r\nQVABJqzoD0z9bM4i/Ijmye276VVwuCgUgjlMPTUlxwlqByr3PaDgdtSx17HP\r\n806OX+TItH6+hq7srJHsVx5LgRTa8eOV0KVqKFR0qbLShJBvOS6mdhGd1Trd\r\nkk71OTNVDqs04QzoPgZ3ksNT8vN8KqYdoomy4mVRU65CdyI3yD553JPvsoJd\r\nO318V11Ehe3LIpykm6G7qn93q7zSY9dfbkzXyS4ruL6VVJqJ39AILsWt8TZT\r\nznbRUu9i4V3SSVZx5sMjXejrihntvwv21MQlWfEQcGh9FUhspCs2egapjqzI\r\nFwXTimWzC5tTe2veR2y48MTIpFKXzeLjzuMgAP1MeOX8nIfdEdXHNAt82eoL\r\nwDXNri1M0t/9zoZ4ZwOmQe0NcFqAau5HYYn5bRMu9CLcZ5btj+ygslMcfpMM\r\n5ijDOaXP3Y030C76YY7CscnFiAezTZ3cL3o=\r\n=yN4G\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.10_1663742629987_0.18380825831882386"},"_hasShrinkwrap":false},"0.0.14-beta.12":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.12","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"754386525f9402895211a2753131f384ce74e2e7","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.12","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-tSq0DAaarxn3/uFnMtghVjGO6oCp3LhlM3rS+kjl147pjEZ5lHr2Avw+TKABHWau5nMcjbo3VFD1GO2BrHWMgw==","shasum":"7737676471377c6097b0519e11761225f389b263","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.12.tgz","fileCount":300,"unpackedSize":1521355,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWau9jz4zOaKvUUp0Z8p/QhLZYlyDSBJhnCfHYROkEEAIhAJiHZDKq9KSXwv7vU46z9vQN1y4AYFTZ3F7Aeyd8437n"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKroWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6aQ/8CAOt3LgoMWlw/uKVtX2O5Fi77ov9pk7qydBpUAOlI4W/DtkF\r\nX2Lm2Cv3rziYKHM6B9qwB0ojnFvddKGB46pyDNZbQ9/SQ0OHc9MnyHNMbl9o\r\n0RGouUfe3OGvtcBzcanNcbB6QUmSEHEdEBU+mHlOQlj3l97LZmy3tbIyyYUE\r\n3NUJsFITMr6kUVpmK3bVrPxbQSiIb3Fyxa3Orn/R7Xlp0amU4aVB8aDel2fe\r\nnqo169+RSeX5Oluco6O7kjMQol5TlNdc321IgM/rCPpxKAR/F2Q6kx5jLzlQ\r\nRA2z5uwQWKc+dvv8frxrem8q16sN4i+GT5i4Fz1cdpwQjnKduzfHQCMOKqjR\r\nnvyMiOI/nsmLk+pHEIUgBC9X2tzel/ZKQnQ6Kz7TB8QS6F7GWP5hQzpeQ4eD\r\nN+NzNH23gte7oDWjZYoEZ43hjU7mOUmrF2VXVFTk/Jiq2qWIlUZturbL6DvD\r\nxx4FxUw1o29WJCvooOfzD7lcIJcc2rwAAbn0EdFuzbkoQbTR/8Xlu9rt+XU0\r\npq9NuabE9qrt9unb7Yh4F28UmdpJgOBEylgLuMe7Ksx4tjTdpyqmkqJHsboR\r\nrlkhMhDOUiS9ix2ktzd8mT8HMncyAuJ3FkXgPYXRQjudqRJw6sEM1FGyLcZz\r\nIESrY0Tw/gXnJ+1bhzUbXyCEh7yi5SVy9tQ=\r\n=OqqM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.12_1663744534696_0.5219979414582216"},"_hasShrinkwrap":false},"0.0.14-beta.13":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.13","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"5c9c98e8c20961147d28d47ff322b110fe46a84b","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.13","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-s1gm8nEVpYI+67k21CK4+sRq6as02FOppTu4nOOFu45kXD6Qw6WnfNnKexFL1ehPQ6H25Tbhwswufs0CPCHyXA==","shasum":"81a1dd7da0be5e81b81085119090723652437f3f","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.13.tgz","fileCount":300,"unpackedSize":1522184,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjNkqE1TzZ6QbV0msTH7edacHkaQR7kn8zphyx+H+1lAiEAxaFW9/Uu6DVLfZxedwyNP4ei8yP1ns0lLPrlA/I3gN0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLSf7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqihBAAjY/folpeVDNrTFtczCTKsM1ndxdQRFLJwqJk4+ewSHi+GCcC\r\n/aNEIYmQuiN7XeO2l5lM32ugTVzyzGXRwh5QdUO9oKGC4JMejghOjiL/z7Hl\r\nzID2G6aATTapl9xsZ/LnZJMp2XqNq8cBuRw8hTxPLdaQCBfzYtvYWY9z+eVD\r\nuKwue4yJ4i+c6P/Hk0X/s6i5aNbTE05yb2TKm8eH2IzrKCLaw0SHXkqm5TkX\r\nqCxQJkmw8+Br10EVVlmGSzJWh5boVhI037k7iF7Z8bup6imgbGL6UbVA9efs\r\nUSU/qD2/Q1xxVuiznYXqcRZyFt2Chszn/9PdO5aJsBhyIKaI004DuWqEitZz\r\nW4LbNbcP6S1cl9uni1pyDMHUuYRXLcLinoCmy9IBssoEqEkop7uh8lJKGlca\r\nne7CsWiS0zGXkTjfC52V5+H2k4l/kx2uOnYenbtkrk2J67p2Ct6AUC+vDzMF\r\nsfOwRB+I0AboH88wphPw0JdtmPYHy/o8OAp7tqEpNLc3nQhjwc5Rh8keIeaj\r\nONML5t2lLY98Kb8saGjJQK5yKmqeeYcVGdIx3hlUhiVVbDLKpQSdibWYKCrX\r\n2SEzCbquQQOBaE/bsQS1PDBn2qUj92N2MFwxgcpNxXWSk/TiMsnpJSnxCtj0\r\ndzZn02JU9hswnUuFHw1jOKVWTvrNA4JrXCU=\r\n=GceC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.13_1663903739382_0.4935744664254236"},"_hasShrinkwrap":false},"0.0.14-beta.14":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.14","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"063a7ec4f94b2f991a1877ab3486d5fc52566d56","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.14","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-CuwMZWiBIXO1iiGCc2VX2V1Gu+zA1SNcouY8fYO/i70+PlUVt+MBASnbv9DvdtBZGGLSK3/yItqwcZei8qWSBg==","shasum":"79f00913c05c69092e5c2c943a7250b5d891cfda","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.14.tgz","fileCount":300,"unpackedSize":1521498,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQbTdKGghiT3kGc7FxI24UR83jLwnUi6DSKvqlw+kNuAIgB9DuDURQy+/NKKkU0YF96+SOw0HSxda3pd40q7fV8M8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLVCDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpofxAAnFamPc76y3pcs+y6RBKLLUSWIBXR0B93+dhHW6fgd4hkdbBj\r\noEJqLyPFeLmqfv4rCe9XyO2Y1LR0f22bXebDS7CaXeSSkQ4eoCSuVYb6uKW7\r\nNbb7y8DU3Tp7/kos+FwQ7S5Fs4xZaxr6ZVHanNGOiogte7ocKCuqbfh9N3eP\r\nek2082/jPia5fL18PS6K3FnJXvY9OYUFtZbTqEYFjHUqCLOKPfAaUkSH06Ou\r\nlxnAhwNxSbWfj8vfU2DIKqNa6DVW704uLy9yklxLgqXCVy/dz0vsrBlmPAoa\r\nom38KcqxqtSr0rqVPY/OpApGlsBXxselyz4wjzjvvNUmNktsAghX38iE5erG\r\nng+rMpbajn8UGz1jrxUy9mAqStQy4A/jh/XR4ojcmZlb1TddTns7aFrNigxg\r\nbDCONH0510xOBN4Tu3HwSHI6PxjfutBq/QzogUz0PAEM0XIApKoysgtXM8lT\r\nEuPrHEqZNeJ7D5WTrTcYQbKAsr3ES9boyP0cgjeMW+sYO9qFephslgCS5ckI\r\nBUW3zov04UB0bTfzX5Q/e8wA58+qaCuwmMrmF0EfxxqlgwTMrzGe3qsk8QB4\r\ncHwQVVYis2izRULc41mIGXd38PPbODIOO948fnB5W+qx6iYfEoIg125sKJcO\r\nX+Lkgu92wBOZ3tgT9dJFDwrCQwQSZ3XiEOo=\r\n=yy7E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.14_1663914115589_0.23937688306141514"},"_hasShrinkwrap":false},"0.0.14-beta.15":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.15","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"6f5f427b53b766808715756ffba273d24b482f6c","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.15","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-Ip8elTJ3Ujv+q6W93SOlxAE5bzJaGDdTk52T9IhAxF5a+dsN/I2QEcpALbqSWwLjqmiGYV2VOQikrusd+O8Z+g==","shasum":"8168ba07799086db2846e26587cc498e432ee2c9","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.15.tgz","fileCount":300,"unpackedSize":1521628,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9lTtvrHXUB2wQmH1nFjTIRcvz1E2whCFfm68pPuMGqAiB44p5DOlMo5Y+sFKLQz4c2ssmg1typgUx6dE72puRqHw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLVKMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBqBAAjYYO8STbRQiOid+rQbIMNhuiO3ZI1s6vkY9JtTMVaB5Ybhlm\r\nYuUPcadbLiVgON9XokEpieaX5VvaaIEtkk0PWSyo/JmpvFXfFBMzC3J+uT/X\r\nE+6GlOyywMy8qDGgHKUq36ThLysVxNrndXuQaJYCN/sk1FbsPQ5cWkMa5Ob/\r\nab8sPteyEwcCD6al+APUIY2cFq9FpoLiHons91IsDPJBdlV7TWyx0ult7Z4s\r\nRK9I0b5zO/CxU3BD8murJPykL+zwqWhp7h343w+rcPzM2gyoqKF/oROs7RS4\r\nHfBQlL9kY4w0VQydeSwbT8G875S6vyYCqqv+o978BGU1aoMps5GKFmPULjGH\r\n3rANuHJb8GYejWee3jqtrGDiGU3OMVGjAOSllRHdUs0K9MGIzESt3OJAijvj\r\nkkS6tmKBqNG/bo3LQnbHUxQcwXnFmA2lcBQf0dA9DIpzGZHEK/gU9YMEeKmT\r\nDBpxtEryKYTKsDs6PkvM9mh9g+tTM4slhhxEn8ornqUq1Jom+z6MaWCmvDo3\r\n49vtQtTVf1uRXDlJVOXFHrIr7cbaNik1u6sBCMbqR30mrgySwf9PpO9FxCSl\r\nwzli1csUzamiwuk/jpAv2qqBwE0A5rCvDmJ2t5F+bU5ThcchGvjRkLA7z4Bn\r\n43RsXCcQsaQWuh4gI3pz0tZ6So8acyIfsm8=\r\n=BFmW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.15_1663914635859_0.30127489631725846"},"_hasShrinkwrap":false},"0.0.14-beta.16":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.16","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"b7e2f70e878035a0072b2153e612c336a293de52","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.16","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-8v528zmDrYIWIgXlvPvxwFYZiWT6GF6o/p66p5cLO5FXPZxK8y9MmeDKfFr7lAym0kb+TEFUc92ywMlJniB5hg==","shasum":"012d6d02ec0e50097701595c60844077eba15301","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.16.tgz","fileCount":300,"unpackedSize":1521748,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1YkccxcNBejrX0gn9kLDSZCHoftE+bZ8KLbE3dS1krAiEA8nT2dv5MJXP7nGTmJD2B1HXom7+KJUMUbU0mZtTAK+w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMoubACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtMg/7BcMntb3Siw1u4Fa+W37dFMB0fw0ON+6usN9t9MWzzxu4kJaN\r\nxiK4NKnsLGiKTtbw9X3jmbo+cQmlTw9J06sn1BF3Tes2l79r/A2QYsyJUmzP\r\n4yEImT6pUudqnz+lQ+6wu0OXCsmyRf/siO7zw5rRrlLxOELEz9mR4Wv2BNEA\r\nYLb4RVk6TlJcKb2XUNm+RhATSQk6uw1AUzp0FuGbLNPjOoPLY14SykjAUHTJ\r\nsSnH1Wdcwu2mVkZqCGPSAJA1FBykcsBj7P9uBcW6vcorkK2UA3j77lBWFKbM\r\naW5iTWKwY6A0YbPeJuCPG5MGkQXpHQT3DQ9BwGFvMEo030kmMKZAIagG3fAC\r\nr8Pk3BuLJT7g85JxL9nDlRDdjbWWQamUuQ5zArIg4BicpXVWZ7dPy8fC24AV\r\n7Oj2cuEFx9Z8dXqC9n85WxcYYRdDtNOH6D8veChoqea90pifgaqyVRKnevcH\r\n7h3HOtKgSnJf18ragfhRQXDcffTZRZ33+dkEOz7Q4/uI4BHGyIW92N19Kno+\r\ncjYO4kSi2+enz3IfnG6FiTZjb54QrfT/Fvsk0yaOW9WVFNxYoitxyVVpob/0\r\nTKu2W2x5PCJtyvp27+9HdFrCpNLJp4zhP7IPp3ugr/zczSMYwxh47JAuLSDY\r\nGSj7Dwc2s7vkvSMNDv1/UgTlBXwzfcWgF7s=\r\n=1GqE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.16_1664256923512_0.28714255997614235"},"_hasShrinkwrap":false},"0.0.14-beta.17":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.17","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"4bc47dc520bbe93af392846c5baf94ed6a4f7f29","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.17","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-n0LuFAkFzSOy8bN3PlliKXBoLbi7dU6i/FN/uxte2gelbQhgmBsoKaBvaqk8zQIzqfP/gA6OHvILMHYzPMXApA==","shasum":"2ff0ff8445fed4a135308faafc2c4071b3d7d3a0","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.17.tgz","fileCount":305,"unpackedSize":1540493,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsYcswEmz/D95+YQpKkH5xSiy1Q20Tda7VAituaa7A4AiEAjFZ7lmCZoIA036JDiv6tqJO8RfSwKb9UtaWIuXMyKTE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMt+OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSMw//csZWsUPmwBZRKM77UrFhTWkYC/7AMTVirErWMYTR0t8esGzc\r\nD5zBokq/gYvtFZVfEOOA1JOJaTjAbDE9dv0POhNzQzEkiaB1yRPlxzaA05U4\r\ni2byHNtvKj2i7Sz5pba4AkCSoINSVtVE8VKNke0tJYg16f8J9CxaH0X4P6tb\r\n6/7IZDUlQnJfrGhFxSS3pRqS33U6sZkMwP9mFOfQGd7gDSOiPyvrciqpF+Nd\r\np6u1KWjtUuDtHDAo5ZQvVnfFv7bZrdbf/H3bTQKl1DwNKJgNxCwWUddIA9Lf\r\n1gTn1muD1DZo9SGuYyo+2b8DidAbvkgDkhzz1MooAEpDq3FsxJ88t7x/eZ12\r\nHJAkuJrGya80ezFnDS28zczViKZR7t2+AdlJL0Pzut8wsFjhJIGFO5t3KLdL\r\nd4jO6D4/9ZeK/dexGLcANt0L013KC6oSKMC4l4oW5mVh2FSmNipYjRsRPjtu\r\nLdRHEox5tfq4H7wat1QBLN8l6D1VKjuSeRhIxbORLqBmPsRNELIydcfRngDv\r\nDSLcr+ma6/rwwAWE0HvNpTTwZYIpjKZkW5rnrLa6oF1hBvTHXXE2uzUWEfaA\r\nOwJzfDM3OwVcDzjg0hIuIQM56aSr4vaUae1frxQOnP5UfGFzhA7FF0OcBnKi\r\nNcw//ikzvAi4u0eHG3iWFqUeDjwiE3PF0PI=\r\n=b9tL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.17_1664278414300_0.32734150812560436"},"_hasShrinkwrap":false},"0.0.14-beta.18":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.18","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"19b08d3a2d80d236ea6288cfd9e07f3f5011caff","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.18","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-xHeikdN6YhU+cms35UMNqXWRKF6SSsaTCZzg1z5iFCLUddqCPAbDQZAZJG5VUDnD8+pn2t750mxCSQ8Etlr2uQ==","shasum":"01f6f6f57df7d57548b850dce64b0542499de837","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.18.tgz","fileCount":305,"unpackedSize":1540754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqVUyv+n5/iStkA+w1UVi6sH3Z/s9hEWXKbFxl+aAlnAiAedWIQ/0UvvA+GmpfQd7Tl5K1KU3hAIK9hrbB0bW/uOA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMu7CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo2w//RQSUOJGzf5ycsRTK7fPyoGWInMF7bzexgI820GHOLjaCIWkx\r\nOjlNjhlKrFFW3fDbNlWOBVQYLYVZUu2416zDGfKzObXWWunFBbiDS2JvYEPX\r\nA+fpL38F+RgUQCc3WVi9owIwKaJXHiOHeweAS3WCpgNH9gvgYyakCmfbSvBC\r\nTNFQHvEdOZNUHd+1AeFkYa0gVLEVS3/6UBx+z2kIT3fCzKPrOsgwKDguF90w\r\njl+SX4Ccqb8GBVjp7pN2s2wLZtEW+4pgir4lboujB2rv15GmjsVD/ZYicOfd\r\nU0sJj1lUYDjtEdveJcHuA1edHo1ExokNI5osfTZA61GxUxPOUeoN0K4tNKTk\r\nSbjD0Yz4wFWMlibiXdH1YH8f++lc7e+TeKHarpKKZCgKvL9xW6rjSgA5d+jH\r\niKtqcEAByNVJSTuY9UXlMSX9HmxjGMBcqY8VJqj+KSE7KHcXA4+JozuJ5izr\r\n+5Qwut1abW2px1VX8bDELWOk+333MVTLECLG0EuNHK9GWUtG2iNN32hfFvMp\r\nhXxDESoRPi9IcnwF6S8kmmzED9/zcqv6MBlyaEysc8zaIQx9Tjuy1FPXDvsG\r\nUu3BVYzNzL11+4dMGCD3zwWtD+oHvWAuMrCKpr5s3WhR24r/KDKz33APnGhs\r\nHpyIy/vVJXl1h1Y3kzejCt278b0gg5o1Bhw=\r\n=qyyh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.18_1664282305991_0.3003016195194286"},"_hasShrinkwrap":false},"0.0.14-beta.19":{"private":false,"name":"suo-mobile-all","version":"0.0.14-beta.19","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"1ab3c1ee50651ba4f216b44ce7da0f064834ea7d","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.14-beta.19","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-iLRi1xI0X1l4Xom9A/iiDAcaPfzLn5zAGjdWPJDVzJVsc9SD538sxtPoiw3zhbnHqfdKRyMTvMBK1YsbMqTACA==","shasum":"23e63bd8414787dca8973ffa06950a7f83d5135b","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.14-beta.19.tgz","fileCount":305,"unpackedSize":1540765,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9tS0cvE4btsIW/8tRjQjElZqd3O8Boy/IR5mqUiBLYAiAYL0FA1n0PnivQ1TBbTbTpTH4rO2rCmiVxEo4UMx61jg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNmGGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwYBAAoYeiiUGzoqbrHbDO/X9aTPTMr5akpIPU4ycP9YQyRZvUz8Wh\r\nXwDbxzOrxbAPp6+JeFpGPYuEYxIu3sU9x8QmGw43gYfuhoJNU5NqKF3UsBS7\r\nypCpvf+frDWvqbc9tg5n+MeUoY/j1lQlvhab4whbVyIQTNbSb4UdRhm/kAQG\r\nEvsEsl5vOdtPDVH+xKw3U1i/1bbW2/Bejq/EHzO2MMNAzXhU1w1r2qeCtFhh\r\nIeZy4M6VofOlJxr79BRAWlELNctScdldW5Vdj5ghL6zBeAkvjSfA+EZ9CquB\r\n6xJKnzaE5lEnI98WpinFl8WPinhil5QxzIXfM1lYK4+G3rCPynBQXvdBjsIB\r\nuMZmd6aS+T0jb/+9199AQbUAfnp3tniJ07Imags5+ILLl443yZRukka51P9K\r\nM3UNMcTM0wn8IVI4pHcMRTIUFRQtHC0vMUpt3BMn74JDwe7+OgUzjbz+EXk/\r\nWfKZ+4I+65VEb01e2qFxqg0GMAne3TpJ9HNZXK/Brs/qLSv64vIuEHKxCKDg\r\np7CaXNRDsD+tPiohq6U04bOf1kZDv0VYqEULDg5pG5lpKq5v0TLDTZQZsrFk\r\nNTwiuGmlWcIoeehbFru76Xw31kV1IYQ1mhymp4wpE5wA8GNmXoZisdh/mMiB\r\nKNiLFNvJAlI0LYg60vwyMExuagCWdFWSJh8=\r\n=b842\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.14-beta.19_1664508294370_0.664954762949888"},"_hasShrinkwrap":false},"0.0.15":{"private":false,"name":"suo-mobile-all","version":"0.0.15","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.13","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"f03158ff8ba18516a6d0956b63db0a8dc96ef097","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.15","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-PhI7E2dMAMXtQ5VFAUMC1es/rjHhvXbwq6MJphON9U6VRuT3tVV/dq0XYGrTwmR27RL7TdhKPDxmmJRzcKbA7g==","shasum":"21703ae59c231c8eb8084fd31c385bdfdee3fe2f","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.15.tgz","fileCount":306,"unpackedSize":1542766,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAtWMbmsVZFp4WtC5XO3A19PPTTulhXNzOY4ESIsnxqAiB0K3S0DvlUgMTfU221obKoJNKDqCO2c9yMuhpwmgzxUQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRUg5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrGQ/+NkigPm4gOVNo0ag4BIVjWds+2IrD/bjzu0YtHNpD8v9Y+BJZ\r\nSLwVElFFdJPG4SKjXC9wGnb3V+wl9yRXSo6dNJIeaJIQrK4V6nVbueLSXzHZ\r\nxITc7oVmtPndWqorNBBJ3wkIeJbiwDgZvQqPK0OQbb6ZeVl3e040x/m4Ys7e\r\nCGURO1oediGC+eLLakgbi+teEdrsqiYBO3or/sGb+fjXWyU+We8k1cAtvu5p\r\nz3MtaFyZHxDfmUpMSCsGADrjjWUoPcFdGoay5GgCmi47AZamZvzJRfjh9OY/\r\n++1ZJCZdDAywXWIhl/Jo/hR6NGPM0CfT2nuRFvvux8lj0u5f2VjWtm7DO3mf\r\n43WLgOOJGDOIiJjxV1VBOwgxUTOMbTOTAcywlTBjgSBistdE/V+zI3b19B3f\r\nh8cbWF5sA1w7GOiPy4YkO4Dia2Tc3wIAr2zaMMGXnT/qythw3oEn/GM4hYHO\r\nW+PEKuzKyBJ684vWZID4tvz1NuXzI5RDNfAhd8Gm/W4M9xl3Y2/B3iuBUSJ9\r\njRgWnNEZcrbCuE7nQ1VvgHys0EsSdg2k7MOW1GOX20Pbs0VBLy7UNojUgsxo\r\nF0xNRjdR0sFR4ga5NS73orJVjwTooZsYlmJIo11Rokewq2AL6IRWivTi4hDz\r\nyxzp8j52MYY2/QYr6pDf6s7xzju/Is74/EE=\r\n=so29\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.15_1665484857575_0.37880704370206697"},"_hasShrinkwrap":false},"0.0.16":{"private":false,"name":"suo-mobile-all","version":"0.0.16","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"76ad4b919cdb913e0c6f279f6b16ef96094f9194","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.16","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-0f5tNQUgWPPkFRb0XAvMjp4tFMDHSjV0D3FpdYkfSz+NjpG89/Upy/no4EXOgw9mtX1rDHxjqtzR2eMiNw5pSw==","shasum":"2bd0776a22c37efd984654b378a1e424e0126bad","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.16.tgz","fileCount":306,"unpackedSize":1542923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtDsbiZmtrVYmJd5DoWv8EYoBmoTsqGtLDcAoqXHMJqgIgLxVFUVAbU1wn9k2/sbDpwptU7lVzQo0HRFUgl03u2nk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRkMOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGQw//eEQlpCMabXGS7HThVCiadzRHIRHZXu4uD6eqVcED582vlYoN\r\nD0vltQeuhKW4MthCsHz8WZviWCBw/Yin+exuCkSAZKfwmFp2mYBwE+pxyvmE\r\n48FOuR70vlkKWHwn2tm65RwVdgwBltnHq3V5voI+54oL3dVi/dPlnpX52wEE\r\nkAxFrz/f4qLz0tfPdC0cztNXxwOJNpKsTBKNxIbaXg7UMo0Stqj1EtuEGBsn\r\n1wq+u+cQIdZmA7xjHlOHazaDpC8Pq79tuHfN957+tmiqLOzDOkuql7n4Ye6J\r\n2sNPkhXtPtYZy0MobVF2swTeKlv7f4iy/P7D+hBf+ovi/xoWTERfe1I4u6Kv\r\na4hxte7n4GVLqklTfS2aHNQ41TFP9wK20iBLaWQ6/2EC5bLXnglFIewlZxm5\r\nNpAStyKMXJc6pExAE3WUZgzyONKdMzDt46HHUIUEagWOXyc9lOvn6YSHYP04\r\nVBwHQy1A0CxzZrcv5AbQX97zJpjj18hgfCvwgzczw41cYiV5CSwCiRduq6wW\r\ng/bN4fRaRR5wvYBt45DwRG+QXDRKLi/QboGFiPic7M5E2DFBAnGiVl0j3a/6\r\nFsydAXYahYSoBwMm2v647hHzUT7Dl+BXtGKVFzYFxJ9ofqEve+bL//JYCwe4\r\novAG5berHESEAmVNOJkcpy8P87GpMkHytao=\r\n=2FZ8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.16_1665549070564_0.4970789235017101"},"_hasShrinkwrap":false},"0.0.17-beta.0":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.0","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"986fa4d96eed269fc12164efcfd70b72b96baa4f","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-hTUcNQQX/UR+bmEBghZBnWEzsoxmLgcE0a9kkVe5ZqoiOHsS/KTSRqdhptWwFb9uRBQzZHtpR2TOhJB83MYHKQ==","shasum":"7ed07d4b6ed9497bc82491987868318870d61918","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.0.tgz","fileCount":314,"unpackedSize":1548985,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRwIHZScVZF4EUETDe113ouHqJE5xfLxxTFOy3hbbckAiEA+GRkIiHPr5yECQMMZZGsSTpdpnu2ZDipU55ogLyDvfc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmLhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ5w/7BzVoMNcHm2cm5iPAiLhWjyaLnQGg5vD2VVVyXYApo2eAKNwL\r\npKBxyIB1Zpyj6/2+CbDx6bBp3Dwv46cigOj2mNJV1/HBnD33orNhe2/ReoaJ\r\ncRTmVcp9oSh3iEr3icUc3k9U6KpuKcs8tW49d5Z4mJMQJKFfe2bjYc2JEHeH\r\ned2cKHbHbncciElDsbrSuq8q6jkrTb+AJFT4ev84tMYiaZEPrjLAxyx6Xob7\r\nD+iLAoE30BqxT34Ka1zB0Gh8cg8xJK/jw6BB71Yq0RWVwTET1PP71813JOmy\r\n4uUXKna8jqQG+Rd6YlMyU8I4bMLamO0DFleUJ5Zye7gJzq13QMhf/XIk3Ftw\r\n7S1kwxp15Y+5yMRHCYZK0k7Ifap27TaJ3/Dl3jgN35t9LywLFMqLmaSsdtio\r\nlF0kBV4tnQOmiV1/tQwTxbPhQzojo4HauaMEnxLDwRGRyEUj/YcBlqKOb5jG\r\nHsSLTEYnOnS8xpi9XFLaoZrPdd9kL+VVTO9Y7moMET5Es8bl2yIBqSEA3XBb\r\nUsiju0L51VW1MgKp1orSkXCW2HdHxTJv+B59UXtyiS61xILjC8atJWYIrqmR\r\ntmNDhQQiK6GVTjurhKFyxxen+4xlRGFAmdK10C8a8MRmJCHoLXDMFEhawjFU\r\nDvSICgQHQ1Ts9zI7N23D4CBV3EChaMBvoTI=\r\n=yddJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.0_1666081505119_0.07348174443530286"},"_hasShrinkwrap":false},"0.0.17-beta.1":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"a273ceb1113f633fb19942862fd8473eb40cfc27","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.1","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-Qqg3bqT4trPNctspgVeXCqQ322LqkrVIZUb0RxnkQlylhiTmXx2VfZCETmx3CgrTD+gU11cec2CdhHZ6cq0coQ==","shasum":"1be5c837f9b6be823bc0e043ebd2affc0381b6d1","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.1.tgz","fileCount":314,"unpackedSize":1549245,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6h5EUCHZ+oZedd/f9BsSuoxFGl6PvI0M8O4/XavTOtQIhAOYln32rFw0vQWh6Xk6Q4JH0D7AQwqF3ys8k8Yslh8tE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmUuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmouyw//Q5OLa4tZebl+wQ0B1vdC2s8DPGut6gi651rliaiRnmnz5eg5\r\nbp0utGKJWfb48jGVdv3UcEO/jtrnLOiqWvDh9dlK9f89PNt/XBNidqjSSDH1\r\nBNb9UmJgVxMNiPiclZNs3I4Uulf9aamxkQ7fZLDTYgUCLK41v2ZabHC4/Ogx\r\nOf7nypo509P9r0uM09dLnto266M8090jC7xXytmVJnE5kT+S2UOo/IYeJ1WY\r\no5pngh1Rgiwlf7ncAhrrdzBB71NTdueRYJo1dTqBa7oDCT8Zzu62X5bzuvPo\r\niZO+O9mE3kuR/wr6r5/ts1pr1DBPsnK6PhF0Sd9LQX9yVGMuw9LltH9Nwt0F\r\njR4axir0V7KXwc4PUkg6in/gTXHPunmIRYuuENdN/GlHh6ELY4IWsEpTxd1M\r\n0rR6cZ3RbxgSQI/O8jmfgo7ExpKJEeJdu6SUqWxyKohiCLNtNYDNaMPWJ8mG\r\nKeGGBumRK/8IHoicqs/V6A7aXek4W1SGE91+n9w/IR1U4hchu2Q+BLja8Uuk\r\n5x00fo9Ifdx9FWKvvdxMMhUMG6OteOo1V9WYtyYoW0Y8pmWT1ydttzHEEsfY\r\nww+XKDNAM7KYqLj2hb8JO/k692zNqqMCQoWTdcUCQz5+q12QdCx8AJXcP3KV\r\nqM4Net4ZlkcT2LEflqbFKgAy8jOjweupTE0=\r\n=NWgh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.1_1666082094403_0.7237983528300123"},"_hasShrinkwrap":false},"0.0.17-beta.2":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.2","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"02d9715eca6150a2425ae7578294bc18ed6f3bbd","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.2","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-kUg+/gVt7/t68erk4/a24m3CyDaZ+xvGsj0uxMuhXzSEVDjWBYGH842n/Q2QxWwrANwKJjaqzwy8VPN1PhwdOw==","shasum":"afce2c2e48ebfc8d0f6c2a9b100cea2880c489e5","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.2.tgz","fileCount":314,"unpackedSize":1552207,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIESY23C1SgnMBFCOFmYJbLId5UC9g/DUuiZKnuMcAB9BAiBGlTjiFNR2t1apRNHk6HzsUN+itbMHjZvgP22jOYambA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT5FaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHAw/+NGvduv1L8/PJlzK3bRbKFSN/KBmGuH1+11xGvbm5f26MLRLK\r\nEdkN001J0PY69ob+QQ2ovYuOBOg4F4c26zBq4yrk5EFENgLda/7x7oZbta+S\r\nY/6e4MN6V8IZBSR1R9vl0/0wSnC+dFO5CDqJ2cSW317hj/vqJ6Fx+Il89roq\r\nRGaz+ZLiej1DG1yPbU+/3ahnlkQu0X+nF9dGBjnLDa+mtgX+CTegU9ZLvcw/\r\nnrCh9xiQ99ghPfdXk/fBndEUnusBpdkzDelB4SIBg5j50YzhuxZEFmJFsMZR\r\nr/npMAAsAMa/x6FImHWvvr8xEdKgLj1vzsNtAR5IxFC6oyg2k9M5IB9NZskJ\r\np8u80s+yA8ZQ42/UGmcdLi2Wh0uPT5wJfQ+S4GWLtJ/i9HWxExhpKkkFu11n\r\nnq2CC1Xm/22UvDXPvCUcSEyY54ECEZ0fHypwgVOnYUd+8qr4bYYF9VnCHN7A\r\nV9qmX22fpTAvOVRc4RsV00p8LExpFnXgDWoDJMbPm2EF+K2CAXQjFNNr7qww\r\n3+wPj93VBYWfz+hoyQlQFAcIc1rwpo3AdIh1Va4haA0qCAAw7QZhfLsIe56g\r\n/VVVLD4h3926qd8b6/43Ba8d4HcwDnT7/HVxVbe5X/v2ohm/i2cTf7Xk+BA+\r\nMyxq049Nq/695khJgpo3qY8f45KoyreDMTA=\r\n=5Zce\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.2_1666158937853_0.7233794071687241"},"_hasShrinkwrap":false},"0.0.17-beta.3":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.3","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"17d68c7724e2832c1f017762f7496c473d31c9a5","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.3","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-n4xy/ystpU6XP/qsqYTNAepnjLbo8eGPiv9AAb5wqqbQ/YkskwJwPpvsEGz2N7Bsw280uKTCpbC6ywYgXb2FDA==","shasum":"ca4eb3d5f37d39ca0fa3cca195225a562f71220d","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.3.tgz","fileCount":314,"unpackedSize":1552376,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJBocdun2gwwATgWk9tklcncu5vYQEleq6stsNYB4vMAiEA93/hzRufb9xWmZHx6kEzFwC2wusldX5d0MmvnKHUg0Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT6GoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKLA//XzTRLsHGikpe6hYrNHfEQR4m+/sgtdger9LJ+G2XXOiZbEav\r\ncvCKYmTk7wXxycCj5J3uOcAlvI06yX8w14bFEptpWQ03DWSVZ0z6j5KbRKlQ\r\nSAV9ZkRI/VXN054SF3KOLcYk7nBGBMK1g/Ol/2FqWz6LUtqe/UpPpSCCZusP\r\nXpLVJK4w9889ZHqrNvizLPvBd2BiRMwD1XqD8sosmkvLxyNxEMYCTWEKYYJa\r\ntX99GP5FdUZ44I9ys3S1zQblE7vsBDkl2rjMcuumjdz1ozqmRU8GRrTu/X1I\r\nUJ28/XeMIvbHG6QKxnCTQRA3oh+AW0/MzV6tKUd1RKt4hf1y+gmluiR1Kxl/\r\ntayyB+ppkssL+Hp9MGMlMoj8JWDkkeGjmTPrtFBBZW9uLsXwHVUSMJ8pCQsm\r\n3K+mV5D4fSWSDP4aEr7K3S88pH1ierXlWb+aV8T0fCEyHXJbbjm7LRc3HO4R\r\nS7De6ZidZvs7v9s9hrsV2vctAqK4HVwJQ7bkrC6JewaXNbHbGuPKd8QAlYxN\r\nV06lJSA+Ssaw7YW9d20T8wqV/7cvub3cstVIzVW5DGBsFgG9pRxbQJTUNrde\r\n1zNPlanJQewz7mXbp7M8yvw1hG0UrgkqIltnEfk5ygHvv8j49Na/1VrWgsoJ\r\nQ/9SkubMdGknYIT1v+ImVgfjAUvH4TAMJtE=\r\n=2ZCA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.3_1666163112645_0.052472541858622934"},"_hasShrinkwrap":false},"0.0.17-beta.4":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.4","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"7162084b7f95eef55f72d55c23800bf88200b359","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.4","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-eeaOIv7UNHvngQoQ3nAfKB5oAkFkRBVh8XA1sPX9im1UvTuhWSBf/dFnOhM1xCTxci3S/7ljMLDTgZT0Odxjdg==","shasum":"847bef2c64a69384fea1c3156321603d7bf77228","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.4.tgz","fileCount":314,"unpackedSize":1552779,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJkhi2nrmLW6SagdpEIvb8113xOiZPqWq5PdjKthzORAiEAlh4QfjaZRTTOF11UufUBL2UxCUHpiEh9KZ8uxTangYU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT85oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr86w//Y3erge56kQMoTIEne4pBCWlaIjpEpwfh6lWWcD9erUjvE8xc\r\nevKs8fzIkHKliw5RhzlCege4WCp279w2b16hLwroYr5trVmGf9eHmoXb+K02\r\nD+lIBDWnW7FYCdDe8uRE87lPYzJh1vYVZ1WXNaSF98BcqLuG86ImO61txnqL\r\noggmJwOCAvb7cMdGMMfqYI/9mHbThu5JIkpJdGWlkErzTnwv4iSDhyjYQ5G+\r\nLL5+LnlJVKN4fwuoRAXHUOGgHxBdtXsKpWRrCX9/n5An8IqXJVtJjo14Sbhg\r\n3vsWbZGTbnTRuWKcYhOUl5zJYVjAGqGGHjFxqa5nOloqcQNxh1+bvGJjtGa2\r\nlSpeo1YpsmpZDQJgDbG4TYhtJiiHdh4gV0JkV8o4zREmsyEWtJY1SsxKwDUp\r\nkfGCkEm6uMhjDEtjgJohonCq39cmEEWaRiGdtfSpA8yuMAckIycf5LuD2i4B\r\nnUgPAN+TlRifyR/1Cj4RDbxiqT/Zap0J7p2XnF9IHbi/K9qCS3/X9tjK/r3N\r\nLtDt0R62NPlAjpCud/i/VORUXBF2LfUh+KWX69pQDmqXBmRYgUmWtsjqANnc\r\nPLRTlBqkXOTnQrAxC9HLdccij1c7JDeQ3D6sQ4Z1UfMu/HEl6/lrgt9l0jGo\r\nS6pNHHU6y46izq4304jSJUrr0VfnnQzGOPw=\r\n=zYhd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.4_1666174568091_0.708865696255115"},"_hasShrinkwrap":false},"0.0.17-beta.5":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.5","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"9b683388a2a574b8215176f284f06cef8b05176a","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.5","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-GD1XAPP5T+f9KHcLgKlUXld+biOTOoRz5+NewBx58QTfI0B+dJQ48GSxggIOx9ro0PB2QT1nswUn7/fFJhV7TA==","shasum":"2400b72c2fb87bae86aefd26b197d8f43d486126","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.5.tgz","fileCount":314,"unpackedSize":1552774,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrtmMnjyvlsP6VxSKTGNExJNBd56SLzHxSqhihR+xFhAiAaKz8B1h4SxKWkYRWGX/gqz17/B/CUaIvGDMW2+s5kHA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT9CYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+yg//XAsnCKm3X2j55t9rW4kk8UvMgnFmHH6IxrQ2r59HcuNmEZMb\r\nxfOisP2DntalpwWfUXUMTKeEU3k1eGt08izUDYktVfVaYDcclsaB7bfkMrAk\r\n1eKccW8fqpUXQKyJHF+MrhCwW7GObqByI4ONa0MaK0yjUQ4I7OKJqLRbGVzV\r\nhPlOeM11hV3ZlqFgXoGZO49m7/SivBmUbdVHgKYb4KcnU8gqR0O4xYk9LquI\r\nR9atxgOkWWVW7UnSnMgMQlWTlmdxXQfhIxXkhw0DkeaXGOFf4fZAJk/qAXyN\r\nsv9JPt0DU35/D72LQjycoBbHkjATSdh2RpjWI2w/DmLN444qGSZvVccaOiEA\r\nsTqh9AwmSv2adiDwucpkyTmNpqGZoFS0jo0/cm4i9oYrdNZpdNM47lcJWF/s\r\npdhHu5lExUO2o1+OqRhztqtdbLUEOowAfBOtihilsbQ2SieBP6YdtR7EmOe1\r\ncNnTgvco2qw80LIzVdgo4eITAQeg7hBbedR6vM1jxWvz83CHRtjHZ+C5gvxD\r\nP2btXoLXbz+N3PGzEt6p3IsnhvDJmOCbyEHAYlznk8lEEY/CTqPArNWXgk1R\r\nn8Pqk0rBFlVJ6Tp2hLKbT2fFJGboh94YBUMbBgiBEmWYbYigkO9cteULueHd\r\nkiH+gupVPImTEp3KdfMXgnd4IdoGUGJuq+8=\r\n=synp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.5_1666175128587_0.8734125125618848"},"_hasShrinkwrap":false},"0.0.17-beta.6":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.6","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"ae9278fe6250c8b1a3380c2bbbe600e715b2b726","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.6","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-j6k8O7JKtLhTqu1S1yOfqGnh33qxXuIUw51RLmCl3ORC0KX61ixVmhcLV1LjOCRHqzedSm63J/w3c0OcS5NbiQ==","shasum":"3270053dc85d1fc3cef8ac33ef002432bc52e920","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.6.tgz","fileCount":314,"unpackedSize":1553486,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMWdWSifmqrg/yqji35r27ZA3CPOjK4GEOlHkx/NO8fAIgUEmT9HdzhlcCGiyjXm1SYC8fKWryDb4oxqGiyI2a32E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUN3WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvGhAAhLeUxvZLCL09QMncLjUUezr9KZCBjPogZQGQ5OOTq2O6obuL\r\nX9L6U44Bg2RTKkOpnBKCBv3SgWRrHcvKId/D2SoPLMoQmTR4qxgI7HAn1Euf\r\nfpTv+bIJQb0bN5P++b2U6HTEhpYPlBJ1QipUbLH6pLGTGfEBDPod/+wh+gdO\r\ntfJjo8pvslSIIXc2dfq2XW5lslwzg6ddkLo+G0Fqvy6sVslMxgRSzhVrinb/\r\ngYpQt4090GRgyp6akVFytWXqFjxkY9KXl1Rh9IRReoAJPpqSn68hY4XcT1Za\r\n2of8uf3WYdoOSu9p0DSKLSFM+cFD1MNbs04h+2NS28rfFNp1XsXbWHaEf/wS\r\nGCggr5HE2M8VxmhAFfKC/I8wiOtB0trCjP7eZlmC8yE3K6DOyda14Wk32U8p\r\nb6GAGPyHrVcwoIrwcVM9kAhXFT7jnLXgHzN03yuvHFZEJF+yi1f4D7xrKGnS\r\ncgognkVcYMTx43Oaw3rwVUg4OX4lCosggINQEVttIT0VBxvxNooIc3dpVLHx\r\nmHhQieJE7mYY6ojlT/RWqXUAAbsuanMIfr1H4NirjJI1fzDph+FbHCj5C5wd\r\nb9OwI+inw3Mid4/9psJIxy4D0I5OC7b/67tEfk2+TplwD2S8wY/bnZTsm75M\r\nCcoK9tgfn4GoHA+PA1GWGW078SEC921zm84=\r\n=f15v\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.6_1666244054286_0.7290888147514558"},"_hasShrinkwrap":false},"0.0.17-beta.7":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.7","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"e7ad54be3a5b3303abd37d3412f01729264be0fa","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.7","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-yPkY1CSzNKXMZ4jeq75P35CcGNhgI5W2GJZtKYco6OmbjZ6wP7nZJK1plM6c7BO6dhDXhJqpZzZs6nURRffGXw==","shasum":"63415a4590c19d95c0063f60826e99ea79e7d31c","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.7.tgz","fileCount":314,"unpackedSize":1553523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDC/+QPhQKf3esQxMy6DzHJoi0uT9f4sgclzcUp7sN47AiEAlp8Wbb0Ds7X6GjwxlFi7mCCWBZxZhui70Xduk7W01T4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUOOFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAcxAAmUDziq3zL4ybuJBMV1w9i/0kVqKha1BiqHxh5KfNNjYB+kzf\r\nw3d1nIoXOysBfjlzxprlRjEnYhJW3vf0u/jrFxzNPdZ6upkrz753dehGm3dV\r\ngOFrmH/5GlkrkRLOqAsl2NVBvtT9/ke4ViIiq8+UFLZuIK1Txwr3k7GrKnzH\r\nYybCXgzVtFtu+ICsxwzxfAw9pTiEiZ/ZxxFzT0dOjVsgFYpyJiCEcdvp87Oc\r\nW3uuappVBbaeLe+1yNWJFbnIcSs92RMdS3HfwoOPhueEVQIAmrPdz6Ph53TC\r\n5SGrCtssL1No1dL8X+7QjmUJkSx7AV57v4mqf4sQLgwjiPfbufy5dMniufaZ\r\nK0qhn2Vs+M992C0yNupQBAnmAZ4zRXg1RzJl9+HCVIsA811Q4NiLmOiMgA9l\r\n4QuOJfU+zsiI+SzTXgQJOE+2gAwHJwVnCz7xi2C5UvQHi1ueu0LmXqdy2QqJ\r\ngDcPmmcnnkB6x/5I0EUnl3O0Pfry1rcvLvwTftswePDKnm1lZL1HBAA9EG2F\r\nidXjJPs1xYEGodrVxIs/02iWLAAnrZ+masdjijerqzGO34YxLZ7saVaUO9I7\r\nbUghqRm4iSm0CuCtedkig+A7ZWMGZDj96rGiSTtSmzl5iokuPxtI3oXpWNRQ\r\n8pAocXc6ACBRwyhOx7/7SZ/iPo1lkCG5pH4=\r\n=cVM7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.7_1666245508745_0.7564684719975248"},"_hasShrinkwrap":false},"0.0.17-beta.8":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.8","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"c7b4fa526f343788ddf7de26c00be6dbc600727a","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.8","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-zS2KBeG4o71VH7vJLxDawTTIQEYIIo0oBKh0Gyjc0gB0Sl/vpmFEVQA6s935ETqRhEYwmIkfnNWyGzLtBVhNMg==","shasum":"3c96840293999b2ad130d2e40b73abdbffa405a4","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.8.tgz","fileCount":314,"unpackedSize":1553607,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvDTrqkwpRv+HalSr3Fdli4BYiXmbYz8O6Nd4l4SRkTAiEAsVz30CZkkFapY4t1whJf6427vkbJY+6u2OTBpGKa2ZY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUOkWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYbQ/8D7XtaOFnjczpmr7xh9NfCf7d2swPHB4LAfWzoJvtEZoZm2z2\r\nSybBaPytJ5rL6v9gNF1to9HLxFIaZHna6rta0tX2NBdNooV4ZDuRylkkitKR\r\nWRQTinHZh2+VNO1mpaz8mcn+x0Nwx8xD5a0H3jB9f9GQXdyTit+7GJ/cF6+C\r\noKskFnRzI+SLzfpXO0QavFEdvS7ifRXnS06zdoy1cEjNqWsy6TijHkLd7B9J\r\njKw+p7RM8CEPluds1B/FXORzP24Q1edTTTAC4pd3yeo2DwUnw5e2WkHFp3xo\r\n/5LNPsoJgovfV+CI6w6xFuZA5piHepE70YPtcFH5SCBi6VT/NNGXn4dIZr5W\r\nhqJwWGPxlgD+Y1cV2bWCOoXtlM6JgBCgNdkzrDOCqtrfN136FbhTceRfmGK8\r\n3ZyfVuEK6OSLPrr1YqH7fl/f35LhLz/WvmIlNbtKU6DL+fDrotAUS6OTrjd1\r\n8eKJq8Djp56KB42e3guWnSmDdEqRxkBd7fW/bbAUHJlNoJEYOHWJtXU8yI59\r\netrufF9hooCvEghK8OlJNq8wrK61qxCigvD/1LgA4nrNtR9g5WMy76kUESap\r\nPCb8vWtCg/9zseGfemtH4YiqKDbA60w55yU4yI45h/L2Djx8rm89KqARriyO\r\nFFutGOg4UUUOeqG9z3i2sKWsDUkeqkJegCQ=\r\n=YlKw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.8_1666246933789_0.8724679443351075"},"_hasShrinkwrap":false},"0.0.17-beta.9":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.9","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"6f3c6dbe873288cc66933576892400ded5849bcf","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.9","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-r0pN1GSNhcaT1xIK/2v1c6tUY42SixU+jBV4oraVsbJanhpQXVn7fkUTTpTHYKjFlHLs70WKw55+geaIJcTy8Q==","shasum":"1997cc6cda765fb76c6bb4c9bc8d5333a7b90e7f","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.9.tgz","fileCount":314,"unpackedSize":1553432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTHiBoZoGUFcx/1nIB0yqicJQBDQe6QioOEBe3vSwt9AiAVKMhZYRSA314ZJJ3hnsgNTu3MnGpLWd/Lnm+YMofGlg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQVSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjKQ//SFG2hor8npz3foc2FUPJTdYqLsIwuRP+oCGB4CwqNAzwATfa\r\nqphxPtEfhf6wS1xzKdiOrDa9J48vs6rS6PqPeJjlDYWZV+7fxPg94nwNfgqb\r\n2NZ+TyTSQCbactCg3IGPFolEL+wn1jzXImIkpj4eHcEkLHPBiPzrqNsWzOD0\r\n2V7DR7Te/QYuLwA7wKqsz6p5sr3wrG2ZzQSo2YS/aFYmD/WH+nESqCLVoF3v\r\nT7j8rd6szpB1x/eg0mSMWlbPgkshSIp+RhlVFJgHsLPeTwigooM8jHMmyH4S\r\nAs/hBiJfqoBwNA7n/TX8bgAIYX4qp2kXfLQoVZsLDOT9o7IfwV5RRxUggdo0\r\n41A0PqlcNmamd1WvmC7WHPLuDtH0Y4S1QFnylWSS4x6xJeV8FxYOqvH2OtIr\r\nHGoNJ4MxJ2OaPdmgdv5B7l46fhEe2jWMknh3BzaomrhJOc+5tLf1fNuo4Afa\r\n8AlKG6T0/phXKa2jFSnbX1QsAKuOETfp5VKYbs8tjPqKxHCyBa7hp0z+JPow\r\nUmLzx+Hbb5gZy7ybZubsZZmEhrMJ+W4jwxSts/PR6emyR1H+3wGUgNQmw+RM\r\n5lvX5+JzSzPaCHov1JFNAjKNTAyfsqBXLz+2c7e3W+zYHW/5kqEw35V/CDdl\r\n2YsahToMUNLQGBx0w+SpbxOx109LVeDBL4Y=\r\n=gBQX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.9_1666254161923_0.06488000899805102"},"_hasShrinkwrap":false},"0.0.17-beta.10":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.10","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"909a1d4e901a7232324b2ffc8092b5a18679d26a","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.10","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-ryixetIDrOQwQbzLoybYUnIuEyO8V4Fwn8XsSm5tGI+QsrZZbXDrqPRoTAG2we2/kIvrlXX055nbVmL8ERgbkA==","shasum":"37ef1250754f881b3e146738c438ab1520f9b3d4","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.10.tgz","fileCount":314,"unpackedSize":1553566,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDA+KSWdla75oTXIgqHGNDKrwqyennqg0npUdIVITYrYAiBMIM55ReoqWflKUbf+mbchDMfpxukfpRPzLqNUHpTGOg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVju1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopZA//TSMH2ToqiKOm4CpQ/UVr+2idJBKGxPwInyJ7ljiu5NonDtJj\r\n7b/4Y6NOBrlSI5Bz7gHfHwB4qhz36K99uoDiwE4Q+SW4ZCVsmIdVFCPdeMGb\r\nHjE9PKTg4Q+yN70xkXGizHizxjB0JMTA8TpRF9lG4rc9ZghdkAyfa5ZkWpNu\r\nYlKoP6QOl0XAkbOnrXjvYQd/QmBcR8ohrXMunPD5RQ2cehrhl7KKX6hYk+E9\r\nDc0JK27HFYl8EJHHPbY+oNUxWCmMcm8vgLKB7bPttOadnWCJmYJ0TuP3zPkc\r\nxcmbGhVeb806xDvhtS/SEGHtCe4wL5sdrbViPiacP05styR+TN56AVAf/zyK\r\nRmSFYexwG+N8ZsrJP3AbjlgBNIes8swrXh+UJWbFOtnZGWt2S1V/0g3p37Yg\r\nXf1YoyQsUnquRhZUb2MNkOhJI4KoMClFSV4mZaPejlctPTgb2tHdCrbxSKkl\r\nQttQAhInpqBXRDCwzexPf2dh1Px+Z9yyoRujNK6Z/Py3/zKL0LRTw2Mt0G5U\r\n0Qsi5rv40RGcghfO0VW8z4tJmOLfjRLVHpYM40oJkyOdig6ieh9CoEzmEXJ5\r\nmlNOaJfB0xiqZddLOgNsNKrQXaJMUv59uG8lFNuGECdP0gyCPKeH8hBzgQEn\r\nMZi8bK+mFjuCHmisNXH6wMi21lIyVB8zv2E=\r\n=iU2f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.10_1666595764956_0.15511163364764124"},"_hasShrinkwrap":false},"0.0.17-beta.11":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.11","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"c1537c12215064c92de22ae44a82c52d312f82ca","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.11","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-j9Sa9aMFfEBdH0BdM7i5S1yVYdmlJUdrNpeFveyup+C0cMGFTTnZlwNdNvC7FJwy9wRFB2z28anj8ElP6EVelw==","shasum":"e3ebb0f2955f61bfe1962a4bf7c2278d70c62c07","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.11.tgz","fileCount":313,"unpackedSize":1549818,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHn6y7+NxsQmqOhhuE0tUOgEHu5IqmLySdKECFBxw/nuAiBftaiYQBNnhfWgxZodwL0ZJbzPelHlAWuwKlmPUVrIWw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWKNGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Og//QjwCEUU0RBI/11bdAdWtUYrYm3SpeHtEzMnJPLv7Hhzu+Hb5\r\nuRBlk/cY/Z+59SDt1XcyqbOG1pgjJ2FQJSB1iBI137DWEeBodtdMgBy50QBj\r\nU6t+ZtEkVbt9AwXq/w2vBHnzwvU51lD3PVMSvQA7CvffCHbUMV2B9RAaVV+y\r\ntWu03+JCFU/T2Llp7aDKkrJuoSLqj43e3Psp7owcVApF3vD2ebFkMgMJbUMK\r\n+xQavGBEBvjMg//bE9AbheBkt0fZndpCs3rKbaLsuk8uuwDqr33d75WUFw7E\r\nMFJ4Gm67M0RgK/77YiKrfdaJKZw+nsVEsdZufygDjV+XkZSdUrdQ/r6YvB0E\r\ntEeE26yIRLvX9snTR4TR3P5GGkUswA6GDuNbuGRixwZrtxy8Vxc5kXwajAV7\r\n1/726bwJ7ZjNGYCPFEPhdr9brkGuQAaP+3EySf50smNO1bdna30ldB1DvK/D\r\nPQnL56itw/0DRSq4W7GA7Ky7Gw6t6Z/5+bdCdSnexA1EMQ32IssVGJoCNJib\r\nKiQNThe4AvO7uhIIYBP4DxNCzZ2bZoG4X5LPcqihBNa6OEP/BwhkR9eljcUn\r\n1QO1tNO49/ljW6lh7uTMEeXYdomWcIJqoeaZGvkZw0uyh9zNOaQjdbZ0bgAS\r\nnNv2QZ6FsfibOfHckSratGwmIeJVIHxj96o=\r\n=kbDf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.11_1666753350236_0.13693131928869695"},"_hasShrinkwrap":false},"0.0.17-beta.12":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.12","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"73cc502fcab2cbc848a2d8d303967f99dc8e1b84","readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.12","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-JyEmKfuKBPnuOpwuyUcXzICQ6P2U68UbXffCXkMz2v8MrWdoQqGxT4tHw8il9sqyg6Faz0KP0slrFwJ5xjMgUA==","shasum":"159d388f6ba188c487b9b28c26644962f881ad3d","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.12.tgz","fileCount":313,"unpackedSize":1549821,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrR7KO4FM72dY/JqAylb2z8fsV7KaKPfcyNwLlUnzEtAiEAmybEnUDTxQva9kjaGwlS3dV6UjHkaBWyGzxrtFOMmBE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWKX2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoamg//ecB3r2+vV3Pn+Wa/+OY+yPoNy5bqboIfr23uMi5Y8tYJtWJY\r\nUaXsqElQ10i3Iz1YJq4QlOcEtBqiNqCrEuXP6bIi1RMJTWnGr5rwFu6L13Il\r\nCwgweWRvEN7iXz3+WsLIkj/qTSA8hwdkHC5a8VQGMrsxalgzKPsn3MX5oYgr\r\nCJgeQvLaiGfPlJFoaGDEmlOkZKv21TjytVPYv0W+ufRhBsWqXa9sXrYDD8Vs\r\n62HF7bbMpKr3SWRf7MtAQOygT+DtjgbXghlqrnsq4jdCM0jX9sxb2Flr0PUS\r\nK9iWyQPgzx37+ysdWKINNuUk8O2f3bU90ruNxUoSey4We6ynDFOTlIYgg7OQ\r\nW2U8VD4QSxHoXIss8qZfLDPT+happUWhEKntIqxxvZjdK86NN1F5N4bGFWwD\r\n86A4F8SEoa3y0W2qfVma6yhVvv9QA13KvN3bU5FBgvCebqCnGUk6uNEBou3J\r\nKIJJH6ZcL+E9yV6+lSBRO1XKY7xkqMFnkd/d+EUKAnhlnmX3BjU80ZO48iwD\r\nBoPEY5SO0cskBuTrjETPHqgk0dfveXbDCABOZJ6p6QjTOAYIH8UMqEA7QoCS\r\n21UNdtP+iRgGp8b4/b8OyS7GIXP4MVyA149t9+q5ioG0B8yq8Sfb/MiYspus\r\nGdJW1B7nHGvCs/BqqHSphZsqwtByfrV9ows=\r\n=B0ND\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.12_1666754037740_0.9392857863433914"},"_hasShrinkwrap":false},"0.0.17-beta.13":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.13","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"ec6fd6eb65a24cabc29b5770937b0a4ade25ee37","readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.13","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-SrFSI+TFhzLX3OcwJlhDD4eDDucCvggVpiHGiS7M3GYamX6+VKTliKgkVqhNYusCxT7D1FrmhGFzav8lZfsjJg==","shasum":"798e3692539a671e2350ba4b3843922b3830fe9e","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.13.tgz","fileCount":313,"unpackedSize":1549851,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCA7rNHtThYFhGPtm6+l37aNXESIgzPMbBo57DyEwrmTgIhAKFiD3MHHlrxKhbi8+HdWoJLSc0eldaW7baxkjqp0W6M"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWNZYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoh3Q/+PNSyxzx8NWjkPrD7dVPRCgkTZOAbaGNZosjnjLOID2FSt29n\r\n0HROAwUHNui+lMn8ArCT9HYTua0z91TGt4ypu+2jHM3jVrHhfBXTabn2GrjI\r\najE0n2DWDKWcjFXim/GfRetD2uqpDULIEzgtFYzQuiRhtiKCQz6iMT37S0fE\r\nyF2dFHds1kMShPslayxv83qCIAxg+pAWYuGuXYyy9YKENBxiDOJu8SfHYFtq\r\nPeE2e9JhSJWBIAzKzFffGbsb6w4itl8ECd8RlcFQVf6kZruu3fE2Quyf2Sby\r\n47Gxx3d5v7YVs8cnf+cqiqjOU901HUjMo0f+j1229sYWwcTKQE58S0ZRmpHy\r\nMYf3Ai43ThJwHYDSF2uuI17iCE/7HelmSQHjjU5GVyVNLkUOMPM8qxhV4SPX\r\nk+FMdksTL71CBegoFqLxYWI6oBlGrsaR8D5jLFdrBN5JwXoDbDUh1VGC5fmf\r\n6hld3KJuDxe75oW8Gb7FpIkFTpRJ+nIKNqlPrb1htc9jTWrY323NbY4EVDuV\r\nJeuGkup+7gTccomgaMid1mfEeDDqIoXcq3NHu7E4CFyv+0fMDq2qI+SKM6cA\r\nq4igfqDWz6Oa74K8VfalXEKecXqh1vjueHd+rd39D8CBEExjNUaNgsIYhkiP\r\nS6pHiWODCgrSUEe+rPZYxiQ8+gZMCkOCLYA=\r\n=T9UM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.13_1666766424027_0.10604796016669171"},"_hasShrinkwrap":false},"0.0.17-beta.14":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.14","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"ff38b175f98e231a66236eebcfd3a00cd5334b51","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.14","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-1yu5VK249JzMThMPGoJksgPV+MZRRLrVkM/hs3UW4y1hLVuVH1AspKGl3stL3M5NON00IcTbv/bDYioGAD+sUw==","shasum":"43f7cbf1a5effccf549ce88e38ecb7734810540b","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.14.tgz","fileCount":313,"unpackedSize":1549909,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4lu8XcW9gZ8xHgdmbwd3PohlqKMseDvkDedGdXsjjMQIhAID7j639xJLryLrH/z5cTLWMd22RtAXTn53EufjYznt4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWNvhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLOg//V3pGP1drUZTT+7mGmY39z+Jg0qTFs0VFegJKNFUGUSRZH1Ff\r\nG+19nZ3nm9jvulxfFn5l9TDgx1GJyfTnKSqJSG5s5L1cv8gdrzqBxMiEMxYx\r\nw5PcVDqEuheyhlCGPUgCUViu57T/rEUW0ZTTP2A77mqJdbeOP0syrLjm73hz\r\nOmrB+qzqbFMjvMbmce/rLwx79H9ir4pXwDD2wwG+UgR7BYBh3yZ2JdSL+HYF\r\njjw5Twby3FOj94gHtko4lZeX9jhybqRJSQMrlPReMG4bBZTrli2ohLHoHn+4\r\nt09afVJ7Fg3j75kagXWBCgyMRBICOcdZR8PsdvL3QZruIWd5yI7H9eJOfYCw\r\n1iXSQK5PB/I0tcT8ZgteT5ngrxpRTUcoe0xdOOaALUOfoDQ1YtjSZmOZw8l9\r\nfEjxpWW30568h951FKZ5GQuRsRgaVKeJ+Zp7/lbdN/smxDmNsr5HN3SrQ62S\r\nQLvrdiW/S1hqVU4cBC6m9NcDIEo46SGRd9V5jU/vO382JWSjtvCtZbMNhzMY\r\n3A2HQzpljd8vrumP8RENMrT5KAW8RRzqJ5ewnpnKrooCOWTA9uX0FwlLMdRL\r\nPWdv6nCcLp8yHwrzx6Vq05bdYtV+h4hXChwW0MeSzZgDtoI7AFSrB6i2jYPB\r\nSheD2xbZTYJz8n47YSsfb/5Lm9tha2upfnU=\r\n=TMXS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.14_1666767841662_0.5717856794111924"},"_hasShrinkwrap":false},"0.0.17-beta.15":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.15","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"6ddd426620786e5f342053eafcb49e75ed0df12f","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.15","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-0bA8N+91X6PyWHQJte/JZ82hugKOW206i6oNOgF9FRePJIv65YTMeNBUnjapVeAcwj0NAkRO7iNSBs6MxpyxsA==","shasum":"2b7cd056bf65d397e0fc1a0a5c61b4592a9026f4","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.15.tgz","fileCount":313,"unpackedSize":1550245,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6I2XmozUamr6Tznpt+Y+v82iDxjANlzIzojYNmmON6AiBoFqLBwDoocQ7RT6t/So0P8ywWJitFkoMkFBaktf5B6w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWPgQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEGA/+It1h/tfL+Bv3oKfWv1bnjx8QG8+kVGfaavoXea/+z/TYrmJ7\r\nmc2kDarrh9l6wbGzFLDcz6xlhwqn5fGU5WTmF93DaiTt6doPpp7dOB5IFgjx\r\npwrXVZhaii+fSxCgDn1XA7tovft78Mc0P53CQHVTUKdYolIz4GSua4hHESzZ\r\nTIDUOuCIJwqtZ7pMUH/ssZTbZzk8SISeTvkZE1U1mPT1jQb1Wp4mlqk7czMP\r\nlJiHk4FrhwvUHhzA2uxfzJO606Fv5ZeIOmctE1J1DdyRVZvcsGX/D/1GLSCr\r\n7W7BCLbUogx1iRXTQ0s2/nGDzyq8QdvqwYteKMrYAmPlu+Os2ewvJx0RRX5f\r\nnYCGussndHYSAAJwM6iHnfBlxoYshfbmu3C4StZXAJ9uooS19pC/LEeNZ5fL\r\nOSjQTA7uSlRdmwUarUd6bfvAdoLS+VcgySFX8a+pFlvw8g7xHYgS1EldEINQ\r\n6uf7wZ2cY/2+ny+L6dzg3LNFjwng81WU8k3g9FpMzOZ6LkBlyhl5TFEoSoE6\r\npqzuff9FEd2i7LtB7kp03dxLb5GuWgfM2gepIs7Brts6aNnbVX7CaIiWv0q6\r\niEn2QBs2eE0bYQYsryKKv0FpRH9an5YSEYE7tpFUvYoobf66BQWKcDXofCPA\r\no2YLFZ+TCSa5G0K3SDgOBBPOMwz6/hUO39c=\r\n=KfQC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.15_1666775056649_0.7087368343153748"},"_hasShrinkwrap":false},"0.0.17-beta.16":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.16","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"8da36971e81c3221ae65b8620425303d59f2f637","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.16","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-Eotw4Xr6JkQ4J4ZlGFHk+U4+nwGAjO4W5QiBe0X5zKjLq1JxjiVpOmquNJuJFeLHKD3oiDwwXsSkraiswjt+aA==","shasum":"fd00ab2bdda2d63cf7bfa3f1fde82050cf1e880d","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.16.tgz","fileCount":313,"unpackedSize":1550162,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGf2SQkU9p+edgkcM8GcQC0RnVelM6Ze+SN89Yex3x9AAiEA0BbyD7VDVpsInTKK2vyblNvXRIil4hpdDPSy6UYdb8U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWRDhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrng/9FLY/2ukUvjLXLFC86x/3oiSw8hgBfIvtLxe6dXZlxRywQWpL\r\nwG5Vw0VYbyUQLZtf2Ny2IsPEWNDim265tedNLRHKstQ6ZUvc1afe7d89quHm\r\nSxjOXjIgd0FwnYCPnC6se/b7hB+AC+0DqukPB80F9uNY/CrMltTCB7ZU/HvA\r\n7l3sA0TKH7LjB8SH1Nkf2yHYI6O0EpJyrERMYpXBYBSCORqnV7ZWdZbr1VHP\r\nDrdET5YUHvkq+QUG07Nc5F8fyJhdoIMasD2FtBnUSON0AG5sUgDHK8QB07vF\r\noTIJrzfEvAVXcLdNI9/7sRvCiySIIFQ0yN+iumdW1xHyB5ny9UOw6LSMsrJS\r\neY0YP9I8D90Vg4AYiadenrZypwGFTM5/M19kuUqwjF2MqEkk+tgw38PbNoas\r\ndUNEk6Vdl/W9q0wCYEaV6JuOn1EQSxczRASo+lVprhurC3CQbbcZyghluWwe\r\nPGVwg6hZB7jSctHLL5mPcyQ4hA5K7I1T3s5SnED/ssq82+1HnFHbIHQPtS0b\r\nbkUv+dpyCTCXxm71R2AH5wqq5i8rfx0p7qEPtOpjyBhi4b7yCAL2JReNydSJ\r\nWkbqaLFLWRF+AHq9uhv9TMoLcn0Nufg2iNYrCuTw8j2JCawCv85dwCUAuS2N\r\ngtmZQelGg6EuBiRPJeNEuWN07zvCjRyTtqk=\r\n=rCiJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.16_1666781409255_0.44257007598312614"},"_hasShrinkwrap":false},"0.0.17-beta.17":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.17","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"4b7e2617b3f5aa563fa69412a1cbe388971cc195","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.17","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-KBeB5LzmFMMvAlN0fDv/GktZZLS4oiKMWgcw0XrGRPKH+Nk8+5/fSxbzxa5o5dlGEg5ZXQXE4T4t8fy5OOxVoA==","shasum":"0edd5044c598e73e6897d26a15e81fbcf1403d44","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.17.tgz","fileCount":314,"unpackedSize":1551052,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEpAPXv62mdWdw8ieLKgZV+ElDqghJG4BaDSeWUH/F/AiEA5w39c21BUIuueDVoMrwLh2RKCLDvc2jRPhcZSoX9MHQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWmlUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTZg/9GYT/u0tueGlhnyXZXEBBOD6r3EytQ+m1ONquT5A2y2dqvnGn\r\nBPCte4nA7/uRvaV1PHnnXwET2uOmCVC5p/gqv8xiJOQapoA9W0K3KckVz4r7\r\nWzI61V5SoauGHCNGhUxd+kL3rpc5U35TXaA5WemCiYAtQ/mG4lDQkObj9SHe\r\n35byrYDHYWhrTX17rxDvJ4Za+qUqN2SW3yd7DWyvyUKNEUmJiDXAvy3vswV8\r\ngi1zwG9cKjFfnf2q4gqknk+5pUFibVbbfe8ePJsRH3sOiF9SeQk1eJrw7IRB\r\n1l04IApfRIL1SweFop1rmBc6It3RvwYyf21C5H9niHFKSyyw2FGz0bvFRKzZ\r\n4oe4CdCjHqf9cCIJhCEGJqFpLjsCvM/BloXcLGSvqDwz8reGWEh1bAf+Gf4e\r\nfQjXpd92kQJLXtNEtAdPfipt+EOum2yLmIbwUQPY91xZvfvcpGoNMdRnmJvB\r\n8zLuQQtZSyRrFGhI402AnhOv8R4IcdZH6/OhnUTvbsp4pKsuJxCHzc43pOjB\r\nYQ9BFlQiAQRKqTyone+FmM2ONpcsSDXkp/ZlNChi74UiPcGVxBXVCfV/yB8E\r\nCzCAq8c+NLK8pqGz6458dAs0EnHRwfoFyzpsfUftXW4qtME9sn8u5UtwJneM\r\noW06FwlYVVe/z1+aIg7OYuRfCRRK2EeUpf4=\r\n=rlJV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.17_1666869588727_0.2921188309769309"},"_hasShrinkwrap":false},"0.0.17-beta.18":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.18","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"be4adbfd4c9129f5edb9938c16abeca5d567600d","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.18","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-X+XIUdbZCXqDpEHa+n/bO6dihznOR6egM6w96aR3+FlkMepANfgSUQnBsgF2znY7xog5bCEAbZodYw/f37Zmhw==","shasum":"49ab6a16f511a0a7489586469ef01974faf0bebd","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.18.tgz","fileCount":314,"unpackedSize":1551077,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnlWTK9Fm497p1Z+SJHw4cglRpqYYTeFN2xvqycM953QIgVvrbPz/5vyrTNHqZE5wCkwDw4X2D9UEhMAWQo1ldaqI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWnKvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQXw//QZHaUFBp0FUTp/Nf8rbwb9oOF8U4f7qj3UUoQoGdQ6/75yQA\r\nrsf5utNL8056Dy5Ghr4RiQ4NGm2IgXF+f4W0kTaGMgRCbo+ZMh9nBwLA5WPs\r\nO0MUL9XDsiUAjMXVOwpC8uG2IhYZaqr0BrinqmYvx12zL8JjbfESK3ZrXLoN\r\nEG6Fc9jckBRGsutxKYq1JrwGta9wkD8FHTiI9w2a3oCspN05zG5die6C1N7p\r\nBg9UXc+q8lYhY45QV4lSIWbvHRdMmgCc8mwuk4iLAHe2NtV7IeeS7iZDxq6E\r\nCR/+xmSywaNtzahOlYGVsw2l9rAQSdC7mLBUhi/rhpUpDIAUG+miHbuuyH7Y\r\nvgKzM4f+GZMH0fCqg44JI4zLioQONxB6z0yZFBzZbe+/Wfh7quhwCm6ZeJ9y\r\nnJGUWMyGN4AM/Iav7p/zKtpU2ggsToF32kS29YXAPhKhGubmoSHOIExZJfJz\r\nP2sAvjUlIgOXMYvqKMJj9fkHQqrToTjrNAezkmIQULpxyuOvy0onCHZ4gvYA\r\nlhGSH80zg7BvYUXSC3QeArkK89AMtJDCll8hLXiFItpQCpRaiRPbv3ktYo5f\r\nm8+DdNRh3CsQ2B06B7tC6ZRi09UrELIx4Fi2MT9CUuoPN3yxUPH1/gObnzW9\r\nxi8oMf730HUP4RBH/VWfmY2JntlZksgOwSQ=\r\n=FPgp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.18_1666871983011_0.5762140199960422"},"_hasShrinkwrap":false},"0.0.17-beta.19":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.19","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"663f53843121105c491c63e90c2fad7c28081743","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.19","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-4mL9xJImEh+hoOIrxxP+0N9skFqgGTPLk7s5yjcu4pX2akTQu73exdUdbjX2qnnHa4CnuWaVJuGionx7GEHHSw==","shasum":"dd08f3014ef2346e68be22f07d3cbf177e66a84c","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.19.tgz","fileCount":314,"unpackedSize":1551075,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQRhLbH1Kd0K3D5OJdbg0xFnH+cxcApgpy+T//IAKpZAIhAIvRcARjbeCCp+NIf84uhqqExcD3CiKWnrz//zHTHVWe"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWni9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkSg/+LYBVEO02RIa10wng4XxtwR2cAfKaV2y6lAcuIhOBbQGsOLWC\r\nWaENEMV8Zact+fjhsRN48D17ec7Ew3j9OHakiZKkZzmOVd4QT1WGEOGYVm1s\r\n+V6b3wwvX7f5MB1JlNbxpwv2tggQJJW6qZ/Se+9x6qj5e1JXQtMYEgkJe0RC\r\nn/eKaq0U6z8Fbp8BUdz91DuuEop0TLi13ujy3dN5qO0Nf/Ac9j2Spg4HUnOj\r\nMh26LzoGTmO4wK6LYkmojEYHDZ3uhvdh5NH3daaJmmghqc7EkaIlKHCUUdvK\r\nJKKQ3g3dZTPL5tKi9xMSYKPPbi/E14Znf14GR+7NhL/osD2nSC7sHpPe19Th\r\n/qkUkd0yvqZ7DWIaFfv2e1LQADwQmGvqCFQ2QUKs7C12aY3HceBu+NcJuTTh\r\nTPDhcbJCA+n2vf5aCP6hycDEK7J7fkMeMiGViucXtZ5VXfOs/mrhMvhqJ+Mm\r\nnd06GePnNhfG+q2O3/NczwGWSpTFdQwhLcX4OxsyJkmSWunXu9Ls16gFGrhb\r\nLJdR2qCbT467U5kQ2nQpBPHq5x7k+dmnwaI5GD+Hb7sev8pXeS/4lrDMZXS8\r\ne1nDe4ce/+yrwNDJGR8bImG9mU24tava9/WL+W4ycwPMlQhzpal2P3ICGIxA\r\n4D1CSlJdrEyzxYLXW3/Gdse2rT1Q38O1/is=\r\n=pXiz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.19_1666873532780_0.33013063949483956"},"_hasShrinkwrap":false},"0.0.17-beta.20":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.20","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"8d58c429de7a07195f6683ae5e5f51d13249284a","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.20","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-5Dz3xcu5axm1ZlrasbY1+OdXieDiUNzF7MbcCSRuWSCG4NdmPU1jk9kbfkDK+TcU6vER+TegWsmBU7S1njGK1Q==","shasum":"871d229db669aa2eca0416a1d4b558310777ef21","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.20.tgz","fileCount":314,"unpackedSize":1551438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqZipMKY3Fw7zhOnmUUaaD8pl0qdxpzN5dDTNjqrXe5wIgUtq7zKpADvP1DbCHjNDPysCl9ElNpy3CrA4xYeY5PrI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYgyAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogAg//f77eKNg/pxlRih3BvclYhO+QKCuwt9ReXMeuA6c9YASs3TwD\r\nYgKE7U21JUGvsOwqaXOB57+g8wOM6meQOW9oLLbFPqDyTageJotsa+V+x7Be\r\nXblSLlmVGlxdzCGjwcTVXlF80z8RipxVXHwNem1bJ+jNKoqKEMUn2WdaWOx1\r\n6LuEqis3Q3Gz9iqd1GTr4ZmJa8BTpYPGPjFmmj2A1jgaEF2rKDuVN1Y5ek9u\r\nrIROSZ5/OegvRc7bjWkeYO9ttyP4NzZUDWPCccCneYjEdEeLvbaxetWtl3e2\r\ncqst/RLjNp0m0rvesfDjh/6ccN2Pm878Jwk1ZQJsWkvlGDniOs1prwmEwTpb\r\nbx9IMP1fT2ygwglYnKFC+ymydQDg7MCCP0iKYM7UpLA5VuOkGK7pbFPVpDeu\r\nQeS3SYlBlHxH2Tbq6hXr9BAcRB/D3PgpR0PrxZtAyM4L7K1jvtMJzrXclouV\r\nwzvla9PGahKizB8rRRpaTr+Ismy51QIF61tKZfriNIHLVhI8e/a7BI/VkLcG\r\nnGNw3gkS6b8PhEk/eHWYkC75lGWP26mgoFcCoJD2kqc0cGNDaXKE3jg9yesb\r\njLBTd1Oj0VHK+HvBxbbgccdVE/o4LN62jAYBtBbmItmA39sTUk+3xWenJ+Gx\r\nwYS6KWxtKeQ2cnI7kBB6wxojIumgZ8d6s3g=\r\n=pvcC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.20_1667370112049_0.9396807901159705"},"_hasShrinkwrap":false},"0.0.17-beta.21":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.21","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"b27a0923a3728d054df35c40eec019659538567c","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17-beta.21","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-soxIY2PfKXGX3fV/FjvzBN8VtwnGTps1G9iPc3oxGnqIMHx/86qQqKI16oydrN773flapzKoQRIsdIf7O7aWzA==","shasum":"137bd18d4882ca55c3338a9ba0251f9a29337101","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.21.tgz","fileCount":314,"unpackedSize":1551596,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDifXRROCgxoIcHgw1/y8fU2IAOZbalf1d/VxQ4MNjpCAiA7UdYYjXwTC2XsD26U1OcTMsTAcq8SIie4adAMsFqXbw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYhiXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1vhAAkYCAUZZDp5fWSMJM1sgUPa4ImybvhCXQMsxudrmtT0nZ6Lu7\r\nHZknzkj1iSEjdPD1ac+4RTEVisBqgtncTv5uQIbru6t3PWnSrjWabaW49HN1\r\n6Fw6f56KSb3VVrd76I6wgmMHVFaRSfLYGsVg+mfeF9yr5wiss3Ssrh/D5PSL\r\nAbI0Rw5MZkMNH4xY74unVY1PP1swzk9gXMVCP6RF0ZeU84xyRiQmqLiavTmG\r\n+swMKS00f+cIjX2YYRnu75VY4a7lLr9H3PHMdP1liwL29OtPbyMfRwalmTuv\r\nwETo6vWkxdmc39LrsBb+v9iNWkVDSuy8ECzaQyZQEGm5MAAxWdLx/htWg8UC\r\nYMnRFAK5Ga9kuAiBrTXLZBQTGHJs3GAgs17ii26/bYEBROWw1k3ySKIrH5Z0\r\nmH+bH+wX8xO3QfUrgs1psRY+qB1iFlvufeGeER7cgNt5EGk+CI4ROxYQUizB\r\nYVb+3P+TBKbZn+Y81KhPNB+Bh2KGyV/l+/uNv9u4J7LNb54834j4rnJFxDWM\r\nDwXIZ+totOc19011yGUEgD26T+xKnFpbcU9yztfrPUB+QYqPOCG8iLhP8TKq\r\nHlRh5cC+i2paTu3LqDCJARHWB004epekpe3ZDRU1O1CCUw/sRNP6kCjZ8iUJ\r\nEocpgv9DqNxBvvgQEiZWrymoQ4g3aV2wCGE=\r\n=eLOu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.21_1667373207413_0.8378142468022991"},"_hasShrinkwrap":false},"0.0.17-beta.22":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.22","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"ef47ae705d42db8c1955dc3d5e59ae148144a3a6","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.17-beta.22","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9fUev3yH0eBNTYv4blPoT6ZeSvvURd0bQbopbodK4UHwAxZCYmx/jx1ZK4+NBgWVEfnfUPAtYmHprcPySYfaig==","shasum":"0c302345a8a79b86828054f1f6ffe3e0f78680c7","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.22.tgz","fileCount":290,"unpackedSize":1736442,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjuNhRfsnlm6h9WUUSg/M+Kvx4luEXtKO1klWPdbpoCAiEA5wXsxA/+o62ZdIxF2/eC2XC8VOMfcXOY9LAAiFaU+dI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaKJYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmovyg/9FW0ozVGcGoEHEHP+sveTHmFydyGopAyqsvBQBVt/vLR0PE2w\r\nGrsmP18iEq7z1fgbmZ2nz11PH3hDtvWsm/QmEPdteHJfSbkZu2pM5nOi2B3O\r\n6uXhmJqkiWGAE4M7S4tgs4RiJ7H77a9IeV2BbejqETNg0MWAhnmIBmN8xTRK\r\nmXhr59MlWb7ARyY02VUxbNPT7eJcyH5n5/OXA2nUUSJKQI8sIJVLirgQpBdl\r\njDcqtF9x8Sw/CgRN5hl3ZpUg69b7cHtnq3RR9e8kCgUVSARszCAhcQo5u8Gt\r\nSKJG0V6/wycuFWfxPKc7ysi7gO6X1Y3kjtZ78Si4YeJZwEAltvOsJ12UskOS\r\nVXcMwMlH/QqZOA7EBvR8NA5r4Bq+e9++EWVvmZCEafFH48Y4RTgFabOf7wgJ\r\nIIhxN/z5r9aaNSlZMVU3Lk7SMEkpb6+hkIiPWe9WiVnSDM3gM9sHiQ6yNXAu\r\n4hMLzd4V0sksHNWFEAsyYFNuo0jHw/Co2PuTMWJi9T+iVxZCA3bzeFq/0Ac/\r\nyqrKHcSIENZJBySlvvpyJYhBaRvkedc6J6V8A4efhH4Cnji0niaYlNV+fmf0\r\noXsE8NGk34ubY5X+gkZP8B9LeUy7Pd6zdRWzgUNH9EMvaufxC0uDWFaHiwTb\r\nR2t+m8gP0cAE+KYHjQ3Z8ZUjhcG9HDTy2mM=\r\n=/A6P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.22_1667801688231_0.07667015941460176"},"_hasShrinkwrap":false},"0.0.17-beta.23":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.23","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"60d598e2f4b9d8b4d6e3f0ca8dae827e24bbec04","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.17-beta.23","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-uOuLqBTgzy8PlgSMz0TdgLBZjUIp6nbclt1Ev6ppOG5In1XuP2zO9XeqN4dHSKf7nuOluCGYplk2cJP8RV72ew==","shasum":"8dcafa0f9c9c803fa07d797a0a4348f42f432505","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.23.tgz","fileCount":314,"unpackedSize":1788645,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICb9atT7BRv5Nm6FqEeUMyXAvpQ+lm9jtYqi3oDXBU3lAiEA7O3m7sbQo5XU5JU9kLwJ95jtyNnQoCWoNNHK5+INxeo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaKdeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy0Q//TdnBn5vLERth/lRzYO7yA42l6buc3WdNVr5mh50KMju/QbEc\r\nInoB/a2pTrQHMm5woJHkqL6vpTLEKHdDe5vZJmg6Gsk9BorfrVKYiyjjWJa8\r\nyKSBVT94vptvzxxyKiR0e77OvxXuBILzj7XghW36qUC9B0RT2jqVCTPTT+g6\r\nOe9rJT6wBGhgSh+bphNndVV9T6g07+uzDruZEiuC9tjOAxJTT/jkTxnzVFvi\r\ncBqPUYQAGQ54pjQNbnB50M383BvTrrGgUWTWLU69h8ZcNgjUxY1MIZHnP5HG\r\nkC8xC0XsesTHt88+TK5aMHZLTeB7WVzXxndrPoTFD9oVVpoClTEgsawXlut3\r\nqPXGKwnShnO6ntWNHGwcLpdffAnZImVY+ex1WBe90cgDN25mOqE4y2fpP9bl\r\n2MZVkhTPjuL8czHUYrkfKsfGO69RtkktC11T1wjA6zfti62KEu/ngvWPmwcX\r\nmkKHkQriebjxTlkzcLMpMycQpI1v7SCCRQbq0U94fiOBP+3drJArpsmoHFRk\r\nIsggmLTFCPw8ikmF9D7CIYItC2mQsSortqPvv04LQ8AULcJ7sIQqS1OPRItI\r\nerDr/QLVU+q5PzwOoP7UCNRjCl9vpz26UGE5h/ZvW/2hsPhk5kZ2oXVQ5rjR\r\ngJRCC/hIp/cq0s3BHGX9plnOizMRm7jD6as=\r\n=e5dF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.23_1667802973825_0.6243321776339257"},"_hasShrinkwrap":false},"0.0.17-beta.24":{"private":false,"name":"suo-mobile-all","version":"0.0.17-beta.24","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"c2db44bfaad699d2da40c43d37d6c847850fff8d","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.17-beta.24","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-YA1EPFr5zZx/eQLaQxJRMC4gly6hsglGmJpALtoTO8qzmB+w7SDWURD0jq++/XiSUns8XVx0r+puvsDskqyUbA==","shasum":"8cbc98c96629537326d60bc66e14228ad2666659","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17-beta.24.tgz","fileCount":314,"unpackedSize":1788613,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbgtia6h/c56bHDA4QLpDC6vBTdwFgI1LbFWoHFu++CAiAcpX/c2OO4SUxUANTmChXaugteM0eAJbwyboAgy+/h+w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaMHOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8Eg/6A5zJa1CoO2W9BQ9aQytdvc0EFNgMpxCCHrmy/AICQN8AmGPI\r\nZodANIAIDFVpOMJbhJh51rSflBOJiwyDdznUDrOcIAInrrasGuZ52fQ5JGGl\r\nm82qKoSEpkGzSyHIgwwoj0XVtbQMUQrtfPFZR17RaKqvpPjVQDY/po/BpGDq\r\ncc6nW1+m37605/Uf0uRWait/OFQGAqqSxfjKwKl9e6kmZkNg/ah0piE5Q+/+\r\nvDSNqswIFDUikRpgCaCVfUyzrOCoswHo97yPJAApD+gWBKBUbFDpJx363re7\r\n+Be6PM6bmhuzn7UpZirnrjLO9XwhQr5CsKLow7TqgkxATV3yqp/5NGZLBbba\r\ng4I3TmYnVipfHsUSfahL4ShxQmPYxNpvPqGIprxjvThrTCpH2NFVWsDVui+Z\r\nsfdTXougiS9xgTniKBFuYqGm8PA+lGBq4pqmzjl2wK89vxH4pdTy6RNKwIV8\r\no+GVMvSXAMQSxfHygdtwAtp6ZogYLIKCRiMh6+EQLSgPXzgC19wDW65eL9+z\r\niV0IP82DzgLj5VOA98CSZqDaZztQNV80CxmDQaQKfH0cdf6vyYtK6kP0xRjc\r\nlguVAJGvA4l9d7s+7G5aCGjCkJKdkrepRzXlE8Q6i3ZrSIDP/j/S5lzNVMAQ\r\nEA2jQ9ijQgq/GxIZiRyuBRFwfs0KfRjCW5c=\r\n=45U5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17-beta.24_1667809742168_0.2700996121547188"},"_hasShrinkwrap":false},"0.0.17":{"private":false,"name":"suo-mobile-all","version":"0.0.17","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"157b15f0ad83063ffd28b22b599792ad0120b104","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.17","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-RbESRZJw3r/EMkiqAvhh3amr+gXgPB8UfWbUHx8KpZ1WhE2K5XtJitPzyuVHVRvVT+9mDe1WEYgbamiz+bJjJg==","shasum":"19ad9cf883e8d1e7aa8c45e458444557878bd504","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.17.tgz","fileCount":314,"unpackedSize":1551661,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFq0qcgmLps2MdzzkuGBOSbQ8QQyeNemHVNvTF52ZEkfAiEA/G8RLEu3XSEGrSTIoguPt9L+AskzpYE7yXX2KtZiBpw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjazolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqElhAApE1YCRRUDuSCn2nIGCk9GxXpzwzeRY6Cosv04e5pv+OAhx94\r\nOIhcxD33F1kWz/JQg7UzKDQzj5IToJCKpgeMWdohNEcM7Qs6RCnh0w+uDJW6\r\naoVmIzjpUKQ42BxREOiYtPCFBFn2K9M1DYWU0ha30YjaWju5hGB8/fLljeNj\r\nxhO9dZGS035C1B5P5hr+rTX+LohtkbVqePKtEUSQFAQfMMTQ+qu6nHS+9O7O\r\nhPYUrodDZpzpWQrWmKGxSyfQRnU0nlDfVL1Xh0kr4ZaOM5qJ/wjCehAvxQBH\r\n41JSFUIl72AK2yCKGY/+N7KsKQJMFxItLPvOPTMvnB1JAJyEf1wb/SpIPiYV\r\nmF4JgK4V4Ed8HHKLo8604EgOcUkSknSR5Bop6xgFAp1wAVbsRgWLlpH/ppZa\r\n7BbNxWNC7HysSRLqeFgqbsW6vQSiLrlVIz40okQ+H3u7gg3mUqR5f889gGkR\r\nfwZtOMaVFPgiO2Kh+v0vWUMj6rNV8+swyTCYcgUCrLyJ+BVkA0wV7X49uXPD\r\n4bdT+RYSA0Eg342VZRV/ZcupDCQ8vcWY8sP6eIFYAzsDu3Og704LpQLJ5uT6\r\nlw025G1kV0pKhdtkwdJq8EpvEf8Wuh4qni7b15C5oHpmALepwhRudFkHXtKf\r\njnd1SRqtThw6lg7MyIUqasT1BCvdAeC6Cfc=\r\n=W5IT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.17_1667971621531_0.2961975148598621"},"_hasShrinkwrap":false},"0.0.18":{"private":false,"name":"suo-mobile-all","version":"0.0.18","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"16398e60fa793a7be39cf704e30b877a23fa8819","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.18","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-MSkf50YrtG7rDRZJVD2aDGqMqfM7hqhjCJIMyPWON0HRo8aPe2xFcoYlQQ8ffNgzYGMpjoKWavAf/R7TZJOAOQ==","shasum":"8f68db2b2167262206c2b12bf208b022aa46f85b","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.18.tgz","fileCount":314,"unpackedSize":1551659,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqz6zx3mlZst6VQLs0gBVpsOdoIighPlNswWGsNtyXNQIhAMd7S/qClJvXHa8GjRbezci8n4BnG2ZQzywNM/ssQwun"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbGLhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlphAAnpnOTEtXQntyeqRqqpmS+Iuy2i9qsc/NTmRFWaJbBwRcYKDN\r\ny94RXdcVgXqgCO8HRagfAFWMzgPIlmLM+tDRY89RBksbyZCqeVJ0/b3XIhHy\r\nML+9rUnAvsbi++gUmKfK01qczpo/UaYAiN5bvuO0pYXSk7gS8aX/QdHq4Vxb\r\nBYCRNsT079MYR6IaPRMyMP45ZThzr1x/ZIFowW2Xx0QrkoN0HsuwEiUPIYol\r\n4vninjRvvbIBEqHJw1Do2zRyp3HVTOAA/gWxNOScX5yv0T3ID26fhIJ1jZtT\r\ng/v9KOuPb4vPFvxG2Iu0QA7Q3ZWvCqYyc+SRbmui7Gra+1nAwEEL3H5P0q1E\r\nD9RnA25JxCwNoWWOrxXVO9eyrioPKL3MkLpCIz3IVxlrA5hGn483EpiNyhEG\r\nocrFYv71dqTz/relGcVLFNkYtTPskFOpdd0MVrQ8/j0IHNlLKd70ecumF7RN\r\n3ddLH6AGt0FC8IpIf+PjS5W4AS6psCL2t83RRec9LPsRB7iWv3Z64shsISTm\r\n7UtXlAZfboAZ9qNAsC1bFMI7NpMthuEWK485BH2aZB9NmejNVeXohh4eEQQm\r\n5ML6la8DIWSV8VcKdC9CPR7nnNY+l+z78gxUqYDjrhF37zKUyEv1Dch/qCYu\r\nXDwRSESbw/i35tvTSuIG8tHQbsrsSVShscs=\r\n=XJVn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.18_1668047585581_0.49972552083568145"},"_hasShrinkwrap":false},"0.0.19":{"private":false,"name":"suo-mobile-all","version":"0.0.19","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"b02c32d7978021c290a016b2dcedcc3499cf2dfd","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.19","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-56Y41YLfWAOvWj6tcT8JO0EqniWXpR0LR4vkSm5bNWdGSAYdryw5sAnBPKk6mtHFBQYTBsUr33H0NqwrLHWkYg==","shasum":"de02c277c32c8b57ea10109b73d86050a91326dc","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.19.tgz","fileCount":314,"unpackedSize":1553157,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBd/p2WsMfxskG9L0B31VZzpzFIpYWsfIl6fmPhC6gDoAiAQ2ZnPGp8iTeIwneO9MhcaDlIQXc4fzA6SgBHcGzvicQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbOb7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8thAAjxuIObcwg7SdWkXD5tKtXP1fpCj0HXBApqiXn2Ypx/xaZf0O\r\nU6ZwUkf0bjv+JCSdI3nz3e4sTKpdTDYEoaHfNAioKnk8Jon9EFcqYBcfYa2C\r\nOStGTwC+qXPCFgIDIXxPXk/fxUjetSqAz8whC+WsJWzsGwFjLuy7Bv65oBsO\r\nEbVAqHRcj+GkVZ/WsjlrLTQGN9cGXenKMfRgC1p2awTA6ffE4NkUfFBvLSC8\r\n/0viXqZduhw8g7d2A/u+j8iHIxchI0zdcaCT/Pkb7oqZiuVeM6F3hdKofrGQ\r\nrDHJyOqSwVZp6lt8uB5ydKpDusxbFj37HebctJQ4rqwl+Cf1G8UI1jDS0+pJ\r\n8AhjmZ/8EAtWdu2/u70+PVzmR6cukgLeoRsGgX7996b3D7bWJ8XXFKM3SeAX\r\nijirIUKA6wGf9e3OVz5q2s/O+GyoNGlFZxb2F6G3dfdiPWFHSW2vMv983zR0\r\nBzlP2Mihj4M0t2g0Qf06yHhTz48TbfqoFS/8MOaCfQK6qKlLBmIGF83eC6u7\r\nyshW6NpmE7eUad95OHZHraQDt0Bg+MglHxqFWlhp1O2xgfmv4VgTR5CCsJHI\r\nVcm2nbJqyvDjCyfPoKlsRJbBc0O7x1sshtjGtjhVjqfgBwVDBmtBbENmk1pt\r\n1g+Yg9Rg8i1938nxewXsFbosKZDUPDy8oOw=\r\n=pn49\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.19_1668081402758_0.20121422358747054"},"_hasShrinkwrap":false},"0.0.20-beta.0":{"private":false,"name":"suo-mobile-all","version":"0.0.20-beta.0","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"2dde7701408925d591e96f581c9fa51bcbc927b6","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.20-beta.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-hKep1yTgNMJXukDXf2FBl0gxgGANCW2OjzxBNRfnfPpE4fRLWBX2CzEqzuvwLy9hlRix84xrSJjLbxLVdHPn8Q==","shasum":"f7a6c500bb84bd591082766838b793ecd24a07c7","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.20-beta.0.tgz","fileCount":282,"unpackedSize":1427792,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgYRUpsk/YgajLF9dqhfP6L1tsJ690ehV2sCrYcuOemgIhAK3JldATcoY2vhj4LCdrmrYoOvZpSppkQ/spL0Gg/QVi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbbbJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMvw//Vg/ANoal1lc4jYk9JH5Bbnb7eKzm4Bn+LZxvjrsuet0b48Km\r\nVRQ1UzA8GN2zheZ9dNxtFKduMXuBuzU4MJWpY4OPSq5AyBgVPbnnVkJ3ZTX0\r\n/Kfa0ZHBeuFue9aGI/I2UshcjAK97ZqS5v16j31voKX+gmJ+AifyITOTPHT8\r\nt/5PMlT/LNyfXc9wCNZoo1V+PNzubCr1323vI1cJmopxZ6YD1/Lb7AFSzySp\r\n5emqScrGAPHXpLTeCSE+y/RZ7X1XVkreQ3ydHks13rJ5SaruAjqGoQPWY/Vl\r\nAtN5f2eIHJPUSZg0IPq9XBSiEenRe7DFmiFoyLGk1BbgUHAJPb3p26uiuuXl\r\nHB3Hpl6ZZR7HBRTjl/aTBVLQwwTOQm0rdOilOD3rpKAVa+PcmJn+JbpTtJ8Q\r\nTvIdX7l9r/BXbjQ5NNcYTOYJloWSlBFp41AG+5eeVre8oFFBgVLkvGqZMP7j\r\n78JHoBkuOjBdGAgoIBddl8w7WuKc6JA4xj+Tnbg5zkoCaZmOIKoQRL7or7TK\r\nUvIB4NZhNitXsQUggRtD3qx4x+3iIQBg+DMd/Im8qDnJTk7oT8tZolNq9zRK\r\niCRijKDUAtMp6FoOLSlAZ4OL0HgfWd18ZLM717w5kJjIattWVY+5HW2GA0bi\r\nKbuI/8bz7shqFuLEwEoSmeT1MR+PsGAr8Rk=\r\n=Pjk5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.20-beta.0_1668134601139_0.7341640057472054"},"_hasShrinkwrap":false},"0.0.20-beta.1":{"private":false,"name":"suo-mobile-all","version":"0.0.20-beta.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js,.jsx,.ts,.tsx src && stylelint --fix 'src/**/*.less' --syntax less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"fe237d90b37603d139fabc75f06d1cc7a95bf2e8","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.20-beta.1","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-54HZ9XrtMd7DwCqA7LTV9/DV4IrpakDKaEK7jF0ceW1+TCQTnplR7uYj/3DARoBL7xAz3qqFPFNy2IIait/+fA==","shasum":"09c994ffcb28bb45d732785e2aa56380dd320228","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.20-beta.1.tgz","fileCount":282,"unpackedSize":1428080,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCqLEXZ0+2BEcQ8DU4NiVt7QelMzlPsHSNMPBBpBW+bAiBcwigElYcP/fW2vdN8YkZnRGaPTmI5Mvy2Pb/P3EzNhQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbgXTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqa7w//ae3sHgyVtHv0FxDnCRsSCtS2uWdpqa7oglf7smn7J8tLcgHI\r\nKPDBOcJ5Lcvn0dkqup98Q3oQ90zgvbOvFMOHXnLnrKcbozY4pnivVkR4lBS9\r\nGEAS3bWl+T3AP6XKhPotSCyWGX18oSnvNYomd9OlijWu9ApsMIU3ucJ/LoD5\r\n51ktAJU2Z5VPr3PfQ7HV5UV8GdsuLeBsReav88j5ycHWjitGs8dW+8zw6B4H\r\n/SQTt9Q0xunPMZ88WzzX8EQgRoxIfYAAZJVOG5ly2mRbjHUp9nHnLxHrtXsK\r\nwWY8OaYZPudKT4cw/qcMr+LBZlVwNjR/gmGqvOjv0v52YdrWbwyf36rwuYBv\r\nEUS7ArgxKua9cXNjS+k0q8JvVzLp670FyTQRW7GYHXA+IoY4eHaTZ2hyU5ks\r\nV6XcXG/tDBfXAF/QpqQtmqXydAcT6Fz4SZ+aHL3KxNgvrjNma4MlOlP3Pwv+\r\nXqRhfIV+iq5+RgMgL90+lk7+2/j05ziIPHz7j/i6L1mYjUKc/qKKvD16FQ4D\r\nj5pKle/GN4YbJnxc947DZFPCX28yyT5VQi0yvpEJ10Wk6Xm/lJubnNSv/zwM\r\nnFXCYu+xgFNs8BNk04jBNj6CyX2HSnVe28vpyNTU6JAfK5hy0Jz5Nr6znqBM\r\nZ21isK6bQksAJLcltntc4ohcc2zilDa6T6o=\r\n=tpVo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.20-beta.1_1668154835252_0.24867784848185592"},"_hasShrinkwrap":false},"0.0.20-beta.2":{"private":false,"name":"suo-mobile-all","version":"0.0.20-beta.2","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"850ad2137d31ced261a46cd4d1f1141727397510","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.20-beta.2","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-tUwFeztSEWUQT8jP1RclTMc/LksHZUEV0Ob0nBaHvzqHJPfltDi1rtUMs03NYOX199C2LXJYJ/O/aDveou2XLA==","shasum":"a3fa9c9e4821a999bab095b3f74c725761736475","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.20-beta.2.tgz","fileCount":276,"unpackedSize":1365604,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpyhcU4DSq81G0XrEUC1/dsBuWi0aX+rDxA6j7pfbHagIgRfEi8REySGLcGI/s9tuhpRozwtGEtyYYwIvBIcxRxNc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdyMBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmTBAAoai/JN+UTDFaekD/bySglDhDxZssZtEqJxtYhTONsyVwzLs6\r\neYrNE/ux8sVmOAYuozyd3cicPurY2hsiYCTTxKqkDvQ5+X1ow5O8jthULdYe\r\nZLHVBGhyU8joKhfRLf3p3ed3melVPwnaGYa5UmY6qrKlSIum2JxTYx4jX0Uk\r\n6yjylRnYZP21rAS0RmZ+43D7ULAXb0qYVhVvfeH92ztA0m8YlzLzIMxaB6+J\r\nAEl7h73wCHaaZ5juTYOtQaD1/FfNb9/PZwfVQDau6tQGNp4jA7NoDmeTAQw4\r\nb0PdNPBKT4macfpKwLU0d91B3h2Bn1PVijcGa7P4aOmhU2gcF4bPjF1MzczH\r\nRk/dzTbD1uzcy+ji3e6mqeRWdV+ILoVI2IYkOa6Adjb0cyu0eGUxEPI8Bu0W\r\nqslT89QdcTc6/2uPv+ilTjGtUteOweuuTf+AdngTphgwB/dP2O8vbMcSHciK\r\nCHyWiclLaphqv5H+zO1I4HR4+KJ/RjfntURrs8RflisREFZTwmt05+NmnoL5\r\nxWHeKdmhW3dSGLmjFMPhvJDZOai7rSAtjkVyr4Dw3JkZbW18gj0dBxm0dSnE\r\n7TGOJukKRGSCNrJgEe1gdfkKlLu951ckPVTeMqtK5rJpZ59SAJqsu6vco5SK\r\nZDn1SNBosXEWS7oVuSkT6zo0lSIoaBOvkNE=\r\n=Eh7g\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.20-beta.2_1668752128908_0.09909471497850952"},"_hasShrinkwrap":false},"0.0.20-beta.3":{"private":false,"name":"suo-mobile-all","version":"0.0.20-beta.3","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"acd3ab5d615170bbb288d66f032bddcb121140f7","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.20-beta.3","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-gSL53M+isYz4gPdGg5VA3l4yX9aGcjIfBcUUfAF1+T4i4DbiyvskAdNgDFdvtvUcREpPUwdkYmo3QCs2DeiQ1Q==","shasum":"7b2209fd4674f0bf795b54288cda78a48a53ea8c","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.20-beta.3.tgz","fileCount":282,"unpackedSize":1429240,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/bAnSXkYM8aF7t7j+kKcZkGqF20/hO5A0JLvL6BtRbgIhALcVLrTVmuxbmYDLsmj9DH+qf9Kz2hXWqySN5rNndycE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdyeOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnTw//RRqbW3GrkYO1K/cF+6bJAivPxc1dZzEq3821ACtHqguc8LmE\r\np0msUq2mUTwlXbcf66In5eWpFI5v2vjRsdkhZUCFeMKBWO0Jde9uepCBYDU4\r\n3NNUe8Oh54FjF3R6Gr00vD6VHj7zmtqv00g/y6GzqUqzA/aZGF9nvMWdoPNk\r\n96x/gcZbNgI96cAFMCLNujHPzmevrH6cGY46Hd3AtwrHycTGhAmxNW35DUBq\r\nuLUgyWEZj/+QJDYRY6rOWytlv+DqyzP+bs1E3WM9UPnVBmkEAStYN14YWuRu\r\nEYP7fsfe5qYAqOzzag2rfRVa+cLjtuwfS5XQLScK7fKvirKRLcZQPNE4YYOz\r\n3of6dqpQBHSwQp3a4ey+4nQCiRJxTR2kwJzAmZKaGnZdL0+NcTyc38lMeeHE\r\n/hcFDTtr/62LQ3rM1T9QXcSp435s02QXHV3t/nOHiO6XEodbFH3EFjlRT9cx\r\nY/lAAzuWQkt6q08DZZ0Q1tQk69k2MhkjJ+0STVnWeLiU8OYUBZFL5ESWxwUy\r\nTWE3DyJVW6DQCjEUZ2CbiLvwGAXQVN1hTOLbkesSU65O3IQyLIWuBY2h59bY\r\n7BRfYDAflHhs0qW4/x0xn/EW+aemoSMmuCKV5+ahceveeY4PyGd9QPZRubV8\r\ncqS3PX6V75Wcy6IoSi3fbXcIiaX265HiAf0=\r\n=SriA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.20-beta.3_1668753294030_0.2180723996599383"},"_hasShrinkwrap":false},"0.0.20-beta.4":{"private":false,"name":"suo-mobile-all","version":"0.0.20-beta.4","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"179af16509428814212b24b5b6821de90fcbe439","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.20-beta.4","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-J3P2ASJRpfsxBhLoIY2HGN5AnMUkieS9McoEs9K/xMUH8RyhQ5GlcwiMp0+3nUdesmWdL5/gDkAUXN9N2VrPGQ==","shasum":"2a0348b4f091ce818158621d2d1ef3c878150fce","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.20-beta.4.tgz","fileCount":281,"unpackedSize":1426967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAEMh7w7Rw3CKGukKHCHnyPlyDuDnmyPlT7jDcaMDLjAiB7ltRBSTGxKShIsSZ0RkbBGBTnulpivc5FJLZQbtoQgw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfdcDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3nw//atLrDC0t85y2nkVADSowYkZuyF0n9WS0/PYong0oZrCHk/mV\r\nRqn5H1wDJvZeacNkuOyqYZvpNK6OtvmZavJGyHAN4M/f7YQUX/OHoeUBX+Sj\r\n/xxlQHS0RcaCTypHuVKGF5uuvWsnj6Zn1Prr97ZPMgGid6CNXfa4E9c+zly4\r\nOjOu9IpV34+yG52JKEZByRPeqoxC2cVc2pqAUTCWmEOBMjVZLYN+43oh7wtZ\r\n0dw9OgpVkyZKWvd+ns/32EBZK4i9Aqr8RBMg8rRRss4VJesoqVreOQ3qiMfl\r\nrm6CXkFx2ZDFSOQafiUfI7QVE2GTLsR0A0BPkS9LVSFR7ej0BBaEYi5hI/OP\r\ndH64jJLadaViCz0GQkuHfKUcBgt97mujgF/VVqm/ftdYHx/cBjXsfyvIKp1c\r\nVnXctx1Yn1DVRpYf9wI/kVpSYetrXKR5WMr+vsd79hEay5+QacA7jKQRO7ry\r\n/JqxPDjnX3uhpw/+gHn4eZ+ZbzGO3974VlP4kNeXCngaDz2Ke7QPlQepCsk/\r\nARI7XWk9nSWpAq6muXRBT9SM9SUcHfvNALHRxCuLS2JJFD08/u1T7M0pp69S\r\nkVUOuvGp5nZYrZ9CuRC9JrpRv/uKMvQN/h/IlSmqVzvvoQLoP8fHghJ05SWb\r\n075eQBnTtz1y26c28lxn89FsqGUilYrelu0=\r\n=cZ8q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.20-beta.4_1669191427308_0.8889897624754997"},"_hasShrinkwrap":false},"0.0.20-beta.5":{"private":false,"name":"suo-mobile-all","version":"0.0.20-beta.5","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"c917950ffae88433b34908491abd3fb59e4ad47f","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.20-beta.5","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-o9HKr3s0lJNR9ZrAYKIZR69FKNK0yCz7NZUVTK1uhrQ01XkJNk2pc8/YS5siJG1dc1BlPkJe4eDtf5UDGU8gpQ==","shasum":"f7121c0ff925964615e43865d6eeea798c76a69d","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.20-beta.5.tgz","fileCount":281,"unpackedSize":1427595,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx4LK6xTqpcKIGa2j+rTS82x858A0f4NfDbImy0qmjOgIgR8yMK3ZqYN3MnuRxpE0aPVdpD6BousdIp9HI0ABK1KQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfv72ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFtg//SqDWv5BANuU1rS1WtgcvxhG+9KvXYm2lajHC4NyIFZ1LDGab\r\n7eOW/aHKtjIeQp6djaVzZqQDf+7UbylTwwI7pd9YaXn8x5CC3anMqNAPXLAQ\r\nqyJNjGt8GeKNDgNYKKumrANybUvRVBIu+WU7Ejj63I+ul2e6vBRMM4l+f8si\r\nirJOFuDGjjPBfDgv+ODvFS2p+Hnws4eYzhoqcON9EaA8HXSlTYrUTviDOEtx\r\ns0fyOwCE4eNg/FkW0mL22Lzhv+/1k1h/a6v3HbOvDV3g2qaCVUY6Z0R6EGE9\r\nSytAVzMOf/ZlFrAIt9dDN/ewdTx8PVz2DbHR9llm/p22kDyDLtZUCd3Tp7MO\r\neoUelgKhbTSRD96vgXrSFhExMcCZ8D6ii7Vn++W/KhIaZqwFK/L/sXcw9ird\r\nfRsQcdxzgcOyhZtUOYSBYO7vcyRHsRGEUlOezp36Sa+lEzenQ1GPoMtgTPSS\r\nh3m4hGM6rnGEN/WlN8E97r2fdO9KzzUouV5kRowN08GkG4W9xnKUBsjcKZVA\r\nn6RG00QkFImyBo5sRci14KY/dwEgE1nNSV8d1fXX46Z6t5BrjzfJm7gvTmFO\r\nz7q+kha14cdYa6pv1vz5nAec7La7x62Sxo3QoVTdzu4VwMOmQioR2mi3uAo0\r\nK1MJCmrmi9Lupae2u74rX0cqQV/mEc/x438=\r\n=26fw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.20-beta.5_1669267189767_0.15265587546304138"},"_hasShrinkwrap":false},"0.0.20-beta.7":{"private":false,"name":"suo-mobile-all","version":"0.0.20-beta.7","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"32bc540f9621fe99c243f7e565ad38f3460b7950","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.20-beta.7","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-xbmmSw2Mb1fsQ7irgFORi/tFT0Fy1nokHI5qrTxaI9h+2j+j8HqfnL2uo5WxyKttvDhaJwcMKQQC4JmNXJJnJQ==","shasum":"eba4e6009a5db3de30f2d43d327c0ae2f0fa1f38","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.20-beta.7.tgz","fileCount":281,"unpackedSize":1427598,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF989+grDq2AaNaYH3+jSF3EIth3pBNk7+8q8Wm6pOwrAiEAi1UWP822rKAL+hpPWUvkUjcnHqyxK/H6RE3Yz8Muhig="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfxZdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX9A/+L289os5YhLE3Ijn5ItHK1uJQrzKHj2q4FdebQ0x8Wt8sfGV3\r\nA2cCgxHPmHSjRBdAREDOX20SAfJkqgU0NB4OA203WBhMF04tn3vVWs6Ew4VV\r\na5ZGXsjQSlYvvSuHKSvWM+VerbxXMdMchsvjTaEMLu56yWxNKv9z0OQV24Cv\r\ne8pQx98JVD52NLsISbnOhLJmM+bKDCvfWF/yxVjo9Vzh2gicshU9/+b0BAKs\r\n10lq9lXEZs7x9eeGakT5kmxbdu3rDIieM2oXG8eRen2RK65QnxOPL0pR/V6s\r\nZOE7lfw1jNyNId9lF2vMjQVE9TAWlMCiMQUQ0gmDuKp2GRo+y4aqjQntPdJn\r\nhnMy3rL2+5HuhcpU2iPyLjDuoaB5kd0Gr/m3DFHM3/l9pFd5DXSykra6ot2A\r\nx5/DMNDYvoeRxzaOdV+S6mSknGRuyIjaUhgCu6MRx633HIs7Fq3ul9rksFy+\r\nQpPxvCrxCRebXV1Jdo6vHWv1ul+1dXmgLX1XXR3CZtguKUo3nTX6qhvQTrDi\r\nr/XpzAi0dSRdumTom+n/NgMPpYu1v8aEbtFbI12LYvya9Y7Z22L1qKBHYTZx\r\nzp42EXCeIbJlQ8tqLNtVZ/aVwcinPZ4X238oZcITAQ1jMTDFcDx4p2uQ9uFh\r\n87MNGNZj7iN9EnqOQ2Ll0FgD+CHHq6LGqCE=\r\n=uk42\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.20-beta.7_1669273181279_0.5935902854444346"},"_hasShrinkwrap":false},"0.0.20":{"private":false,"name":"suo-mobile-all","version":"0.0.20","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"108365d24f48baffd78fe0a58d8a0fef21874d20","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.20","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-IT+NF92DGwMROOnJ2dxoIWzA2KDMQf3+ol0pNixPFlYItDzoklpxwYM6IMDFEjP/kH/1RuiANHXwXblKZVLYeA==","shasum":"08c4690002884f56a0982b8b4f839fe24914ddc1","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.20.tgz","fileCount":283,"unpackedSize":1429639,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaCowhk+ZdH7bmoksuFMSUKd2Fcg19Xk5WFmhHUo1MKAiA4L5oA4fhafJwRitsq+fte2EF3IDJu4TYh5HWMGYXyyg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjharKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Bg//USVOOqhxdRjResE3F2DwovKlRTMsGup6XacBy+sPsFEcKHry\r\n6lkIjCBZGS8oSHmbyKMQhuQvG2mtkG4lIBvBmLIaxZmfL/wdyk7WiCmDRX5W\r\nSmJuY+hZhRDJDQAh9xVyNAMha+AsfYJovmitrpz+bzB/jLrRHswYwaHxF0Qr\r\nZwrxnw3ZWBo/oiRWR7GnVrbYw08Feee7uSKEEC88ObywqT7IxeAMLMbtJe/F\r\nUIY7CQlrKC1d9ryC4xIHIqno3+8xlZbaIx7KE4ojzCaza+qSvHGkuseKKE5G\r\nh+llYnmDfZOsR2O7p1B1Kay4Eq1pDXPikRXi3Cf4GFvPhIwLIvbdtaMtVGpF\r\nlyp6CdAcsfu0lVsdQhcQ3NmTZeu9DA9I1FushIsKSUaC9LceJrWdach5XUyC\r\nh3FbN1afU6UcDg1z8r5EoHP3b0N85tNrOtZJzL1fWDkGuHUzoUw6Mh3yS2a9\r\nyoeyCAn3AkcyJVK7PTu4c47TxSeuvnViaPzghloIAVkTTNWvjC0H9h5uc0w9\r\nqnPP+NXFiPnBIQuUJmfSARdy8KxERZsNrf31hxrwCwTlk4KaUKINk5jI88RM\r\n8+ixA7ojGZcM9KLmUkydt/KKtPLUSW+TVDgF2wnhUsp2o2hkKaZ+Ob0QH+Oc\r\ntK1Ltw4pu0lFWn8SMghEvnutcR5xPb95rdk=\r\n=NOHw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.20_1669704394294_0.261047596758307"},"_hasShrinkwrap":false},"0.0.21":{"private":false,"name":"suo-mobile-all","version":"0.0.21","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"88d7f02e6e1da7b5ab9cf54b3838c172826023ed","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.21","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-9VvJ0THt+oFYcRuNh5ynqp5chgBy/Sj7DwXKFc9SSH4gMEq43Vj/1Fb6vzfq3uAsBECjR3iylCvVsIun0nlH0Q==","shasum":"8e30c66d723ff88f1acab1f33e45c9ace0073585","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.21.tgz","fileCount":283,"unpackedSize":1429651,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVWINyHNeJ1AzrPBX/F9VtnGNvNWVM+G5yx+L2WOmrVAIhALoyMhxt9/h/NojiwxssWq7RHQ95Wy5JUnce8nSOb3UJ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhembACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRWg//Y1TVawGNfTNbBOS23PM0lDYqIlOuwO3SEWAZZkWRLxqMhB4U\r\nkQmv4bNSA2vCErcUXIfdcyhaYFu2VG/kK9JAgEFtxBrK4xXUe88kgc2iG6/8\r\ni/MaOsM97CShty5CWUkL8QqmyoHqTi6ak+Qdi8UY/8fH0W/SbKoyFaL948Tq\r\nMgBInAESVRjiMNsoQ/YsGj5bOr99zl3myk2znVU5kkfE71TBj9S0JijflSiJ\r\nloxpt+P3Qkgt6iFjSX2VoFCc74T+5qKVHQlnzSiJivQ0CdWk/erqoMTMcTon\r\ndTJwXu1CcTntv551ZLlbM4Wslvj2cDG2v92bahzppk7Ikw3tIP70mVePLIl8\r\nsB8AilHygHAzcg8x5jEzuFPnDqQ4ZhgrkXZoxT0jaAVYmJnfP31ZsjBP6taB\r\nh1PGh0LQc/bimVSRuUFx34mH6K+Fvi9HNNi9okftgjhl5121fwGFSlhb/S0t\r\nzkqAaGnQXLGA/EImGsYcZeETQk8sKPLC7cvO3Kb8vtvn9EKfPK7f92Vk9Ktg\r\nB0PTDqE+Fy+r1V802T2rHeltS330NpexMdrDaPICIoBYP1YR3zDOOHfDYl5v\r\nHwQ+UgNQca05PKH7YTWE7xGAJmAInwy3qwZB+KJO/TXOXcCM/P5YkiJjbNtv\r\nIntnQZxem7Qe96E6jUFmhVd1x1c01hwLdNY=\r\n=Cdym\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.21_1669720475316_0.9434635981562658"},"_hasShrinkwrap":false},"0.0.22":{"private":false,"name":"suo-mobile-all","version":"0.0.22","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"579b77419448b02a51ccdea93c6ac2985c508e90","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.22","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-x9PQmWZkqLppeOO5whx4w7WOSMw/Ou52VaTEJ5/BqYal8OFmhf0uabgtpN8OUZ9otuKLtxjDDCdO8hcPxDNSUA==","shasum":"dac9caa2ad248a3e6e9ad15b6a202c24673b402c","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.22.tgz","fileCount":283,"unpackedSize":1429773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6UT5uwaFPRe2i6AbCJpxQstEUxWt3ARpmiFtvmtBJgwIhAKm86plFGzt86J/WTr36e5qjcvpo6JIABn7+g3l3E0Ie"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhslXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr53g//VYBGjCIEXDc8cHpCl/U3PNv4ibMQiAZ4521EqgkoA3fKS8Sw\r\nfAqUiKgKsYDjbMxcbfoXEM3zWV6jzfh8lwcWJtD4bKBe1x1C/7sprGU1yjrE\r\nbyHsmF4A0nqFUqnLx9oshF4phb2Oop5wXmL5HI4R3HWF0tGdZo1pGYSj+7fo\r\ntqpEdPQX1alu1tDwe2fCokTCeFXYvcThSZxMvJf6QcTWvsTTCP0Gb67gerVl\r\n3x8RjRPTqMmax5155PT5Oybbn0uxo3ZZQYZbVdk43WFj+CQYkbK+bScC5b/7\r\nekMo2jKvJGH5b/LoqSyb3vxIIPf9Nlrd2f4GDx2t3avBHrHufVLnh1Ftk3Zc\r\njoTtRqBRseEPbJoHS5Uv9HqnVNRqGvsSul0GNYZDy7cNmVo7UQS3FLbu/vqY\r\nV6RM4a2AlRVmKIG+DmO9AsFPU9gkj9rtUXohly6lKGq9TJ6DjkYlgO5+S5/Q\r\nXHv3h0Ef+lzTYLjl0NfS7ooX3OyEx9HAUtC0gqWDlrUqwG2k5UzjZx7+Zqfz\r\nx6NHxP3KjmdlS9kd62YmynwmrCs6G9B/1HWg9NhXL4jjfyQVpDbs3kASpCZz\r\nlNeH3osWqHj0doXQHuGB1GXFu63kA4284Jl4tJrJBYpjL0PdB/CZiZ6XsU0k\r\n3lzYhDDhav8dJ8IDAoZkcIwEyjtWZg2fYeY=\r\n=3BJQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.22_1669777751438_0.44333311502383177"},"_hasShrinkwrap":false},"0.0.23":{"private":false,"name":"suo-mobile-all","version":"0.0.23","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"3cd3eddf2d61f69bab2ce96c880f7fa3a58cf61b","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.23","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-UBqSr7mG1ac27ijv0jXKiuz6eczyJKP1vIuKqponEK9dQ4seV0aK6Ll3x8EyZ/WyzQDtWtwOXgdLnZCs7+06JA==","shasum":"add79178b06852ce954902c9e575233377bde654","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.23.tgz","fileCount":283,"unpackedSize":1429842,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmAZCJTEbQvfyPBAEkv1Ke0BXzKXmW1fPquNXl7k/uOAiBxVkI08YFGuLacgvECb71pbt2Hu/QuZngIRtWj/EtVkQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGsIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoynQ//Xt4YgNgzWkqI1N7X4oOISkOvT3UffqT6lwwS81X/KtkEqwO2\r\nJ4Y4oSepMfcFli7JVbhbm7VoLF3Aoso1diUhBATP7EUYkoeLCdriSS5dfugc\r\n9Pg5g11yNKQPzrVogmZOwvQeg0GuDtpgvDnEjoGYU8qKC/p6tidZV+LtkZts\r\nX0mfXz1/YKkIy/vQFg92LCnpe8KI52pe+lDLClqQQsrIuvU//hSJdUN+ZLtG\r\niDFXYu0DQkC8B9FD9jyLGo6W6/TS4I5B60LpIrqyNrlazygRDOBBqEAFbPQk\r\nlYZvi5psXT0DzKXMg9g0R8vcaaVv0GufhWV6j1vROthWlsjGWEGyiBkjweB0\r\nzubv4LF6ctcxIJPEqwhaOf/DD2obzyZLoRTbZ0NkztScwNRa2i/9UBdsAPy9\r\nZvXTqP4iGVRRx8F/Y2wHy0Qe2yVeAUBiB8md3wH+nZTnN9Q7bckpnUEodJ9y\r\nmOpxGI+3+/OW3MaRlDKy54gXp/fojGzBLepqjD2nBr6oAn0JF2FMygtPHsih\r\nwnADeJyEaFWCoYegbmuqywrMRbhTbcS0hSPdOgp2t2KG2Qgb4LjfeDi5vHsA\r\nb5s1i0mxhx00MfCPlcjkVFg8kX2DR4OPU01mJjs8hEPPvl3y7jpjK/k/hzXU\r\nowRHfVvSdfFhKhtc4h8TfLblUJ707PB9ZZo=\r\n=z8SD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.23_1669884680041_0.2300073769485147"},"_hasShrinkwrap":false},"0.0.24-beta.0":{"private":false,"name":"suo-mobile-all","version":"0.0.24-beta.0","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"ed8d54d780568db4f762e91e172fcdc214ff15a0","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.24-beta.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-396n7mvNaYxB9jAuXCberOSmTjNsx/ahPbrgCP12yal3vTw4hYBNo2VyHpUz0CAHRBdhtwxfuqoWM8fIq33qRQ==","shasum":"1647a83587ef412ef969333191e2951bce8b629f","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.24-beta.0.tgz","fileCount":283,"unpackedSize":1429950,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE1MJJfP5Z2YKx32oW3HJufRM2rEolIntbVhQU+2R1xwIgNNd6/zYp43iG4UpzfWSr66wCWRTqm1UyG380UYnNjj0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiamYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAbQ/9GCF6fL6ecyVIsbQ9FVpY37/EMmlouRHV3N/VLinzsvTlNYNk\r\nbhHeWgXc6ebv9pNaS4iRd+qy7MZOGlt/da3iavtz53l4JsLsWm2/wx9rlUPB\r\n+a2n7vlKn0IhKQ8YuG4lB7YDmWS4GQkyGa2YhCJ0XpYMAlW1V1+5SxBdkIqt\r\nZc7itNELk9N3YlbEiSGUF2V6Bs+VvGq/NMppim8UsPOxPiodjClu+NtYTB5+\r\npT/vU85lk1s3KilV4SAswLDuowRZchicvmROFM138wMCsVsb6SvJftbg8pjT\r\nwgNh1lDYOZNob9qvZ71IflIn2q6HztT+4yYXfgqUpnWajvFyp1bwL31gUjV2\r\n1lRgrjbHBwyyONaftkWfjkmJ0P/QSUPXXtik3kes4y4fjaMVYdjlHERWTJ+Z\r\ntRJ4K3hU/Yz/R3zPCdesiPdQQ2RP4zu1mOIrNFkQd/1ONFUkoDK2jul+PGSh\r\nMSgHz/LYxIBkpLMxH30SUPxY8jSweeMIFWbjN5s4F772ubRAigrXAaSU/Nj/\r\nSRKf4tHgeMkrNfxUYRKHKvo8uOG3FVUZ6kmyn7tm+D45+w2OpN9rs1xHQXwB\r\nswybi5PAnRwhCMJsNNlLogiJyVJkeTKCJQDPdvgntAay+WjPByE7LY+Q6Jgz\r\nXd+PnONfW6l1zNszo8kv4F3YgRnH4KXSpeQ=\r\n=LZdT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.24-beta.0_1669966232119_0.14012748651623919"},"_hasShrinkwrap":false},"0.0.24-beta.1":{"private":false,"name":"suo-mobile-all","version":"0.0.24-beta.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"cc2191e7ec06750af3cae1812d188bc8acc2f903","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.24-beta.1","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-ZBXtEPTmtOf7iy5Ycf2GeVWlrnUiDlTJ0ITMDhKKgCVhTFi0R73wsWzLUXZ6PPos/82z7xv6MFwkE9jBNYE/Mw==","shasum":"aa0aa6bb8c912fdcca36a85dde9b4bfd6870a443","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.24-beta.1.tgz","fileCount":283,"unpackedSize":1430020,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKXBTYWqayoS1Iu1dJn1lZr2KrBuI8edeTwVqqeIkGHAiEA96ECtl8wPDhGNM8f37/Czrg5fKu+s3dT+BBbB+nUhLc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjibUCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpewhAAkc0Yub4GOO3tqYuoCJhqeoVyU28sMTfiaVwa1uP3TNX6ex5P\r\nomyz1lw4vOLz7LpEhQCKPcWgNKGS+E5uUZNhZZx+3Zj6baIKVVGUeTQe63HX\r\nIb38gBoAn0oaOKQNtqsYQOwd8MPL0vqfIK2dTg699Uz3phU9UFpJmvkOCckN\r\nmhBFPQssvmUacTHS/t2wA3aPvopfe3SVGL7/55XXG6vsNFSN8jpqDIVumjxn\r\nhL3CCPnT8ASdAncskUJFl7t4qYEF/7cLmsIa4fxFICu2ZkFQH/phfajEe6Ly\r\nTUxxpF20WnU6YmvvypxvCtyLpk8DQt67lh8gKsozaH8LGbpRGLSLmL1JPl4t\r\noKD1S3Q23uUDJaCI+EqED3N4quNSpXb7Qa5H9VE+/lfkTI28JMP7bsojpmyy\r\nyd3ciXs3hM84m6QAWeE7LoT8BGJ3uwFR+iPFHJMRkkjf3udxbEGo3QwqFggS\r\nwePDcmO45gCDrkFwR8pconORdkyP1TsXo2hOsT9QWboXAPE4m2l4VBgrzqsD\r\nMP23vRd/ndk5Yb+WFBR+IjKu+c1mRlfuYax83V8fd1YPC9MNDBWr2BZ1npMg\r\nvRPiZiGGvNiBvB4Abe4DbGPRGuWqWpdETFDaXpJ9QwV0q1YiHvXxVRQP0Tz8\r\n3Rma8VfFf2sRaYkLAt+5cSue1gfb25FWZ/U=\r\n=MrUo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.24-beta.1_1669969153826_0.6894050002254479"},"_hasShrinkwrap":false},"0.0.24":{"private":false,"name":"suo-mobile-all","version":"0.0.24","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"5fc0c44c4733350ee6d0d75816bfe53e1ee86feb","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.24","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-H2FCaf/te9BMX0Kr4gTWOYr8z5u3uGehrHqlvascCJ8088NipDfHvSfx+5ukmy2ohjbK0Jf9TVpjWyo61yAKEg==","shasum":"892f663fa0c986da883653d9859ff5b584b3c0f2","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.24.tgz","fileCount":283,"unpackedSize":1430013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7d0/iVwU0rty9BKAZECMopD5uVR64cUThd+LXiMZbVwIhAJMoQaVP1h4SItez19DIZdZyL9/n8Nq8MqSAQwCFK6lx"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmS8eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3vhAAmTKrF9vC0FfkKThyjaUwvTnF6pXSqlUGVKHJMc/rBCKt4i0T\r\n5gDg0CHvKc8w8SUYZg4f8O7WZ7u5LnCkYH/yaAr38+roQ/FxRxLZD0UO5Ktv\r\nKw+3O0f/F0fuFO88y0+XFPuv2rd7GkOPmLh1kmAMOwu5x/m8lFxbzOX9UYXY\r\n7271JIuLcotv1tL+IMT5Nhjggbx5jiWdx2RsU+ifp/ecIegKyfj5eaQciixc\r\njpMK4Sx+R4o6JPlLm4k1t8Ziug8q8OyuAXdVSJH0k+B4LLlxaMF40lcft/mK\r\n3IdJM2Bsijdk4zQih18G4IO3Jn+7lfAWNyNnsqhQRoN15ID0hQdxMVMEvJur\r\nMgdvk56I0yuZX1FyuNjlAhAQlje7JQG3c8+QmYzd+kMF7LQMQSF0vhn11iIX\r\nYmCBsQap8wa1EPDocfyjiH65lwB9nyxPWb8/OkpjVseJLmUNNxhcPn1xA3XN\r\nrNY4mO3fuXBFHuEFhuJtBc3hs/QB5zXuRWcwqv3asyNMClsSIKW/c7sfbvwq\r\nwUs1yWxz2E4SLTjFLhOBBNSKLngn18MSmsY3HouHDL83BR7ZQRsVm/Zfk+Dj\r\nMqvz9Dhjy8yJdm4alioM7YEAuZaLTum0+3izK6nh3q4c052TLh0ldCUJSq4F\r\nKthTPESTb0azLCDuvlPjaIaKszWV+hV9snQ=\r\n=XNsl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.24_1670983454095_0.901081168706348"},"_hasShrinkwrap":false},"0.0.25":{"private":false,"name":"suo-mobile-all","version":"0.0.25","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"08217af7e8afd35f5a74e8fa7499ecb06fc30105","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.25","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-ozZKvR4wM+OBtYUcg3o/aKdgM4mqe1mPdbE0rTlU3r3Q+jPdK5nLNvL8XTXVLgONBA9te1UF5Y3+F9w7jUi4Xw==","shasum":"698f944c081e77fb4f576a4b56619521d6b65ed1","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.25.tgz","fileCount":283,"unpackedSize":1430127,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXoFPW/nrp+wSaMM/wSPEictlQlfuyp8D6ycRtVP9a+AIgZSx0f6Edy4Uv/fzo/Abl2UjrRIrgvA4BMF8Fuc5ovtw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmsW1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzrA//RRd5MN5XkbuYq6FlPfPBBY2iMXb1WhFD8T58hqOUwaYSTmk1\r\nhn2Yx3nRN3QorB3x4ZGi7md/7NhcmMb/qCTA9mwkW9anlqMiaQYiJgm64npz\r\nbCNEQf6PHxuse8EvFFbiZGu4uqbztRsEE39NGYZ8/GIxvYPw87eBP+0P7dXT\r\nFqMb4Q3ne2l7l7SBRbqCRpidDtwXvb0scqet4qB4fgYQRMaFShPaNRvhV+2B\r\nj9FurveJvKZ41ycH4Xa+jXHKBrI+oxvAqjbnoZtosrTCqEBIMddgDahoN8tH\r\n1pN3A7aD4VVRkxGKPYc4kkHyt7VYQ07sbHSxfrdWCa3UvIAQPsXbQRigXh99\r\nOEd6FcLl6SD6MbJZ3zFQr0Auc5fayfXVvAgZWT4lXrB8wRGcXwlmHiAl2hMt\r\nHI6lm7FsyvAOPv6RGcpNMsEZCDKkR9e5P7f2s/pBLCpPzAUplIN5L62Dhi4A\r\nXqQ3djmy7juT1lfRf4d57ZYGN7uQOjQJVMWmxnuffCRqkeg2+MBx4/xKENSK\r\n4Jh67u1VinYC3CcWPnZTYpih2l12594LfhuiCMr8FuPYmJngYyXCO1xGvZ3X\r\n1cZ0HKWNs+oPzDwOipn6ed1Ycd/yf6LCigaIWhboPqPEauDaSATNugpMps10\r\n1nMdnPAddZzz3a2vWeQunJP8PyOTlAS5JaU=\r\n=+jna\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.25_1671087540768_0.7304701926063397"},"_hasShrinkwrap":false},"0.0.26-beta.0":{"private":false,"name":"suo-mobile-all","version":"0.0.26-beta.0","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"fc3a00209b48cdead2532d8bb4668a13d00c212b","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26-beta.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-XyOxDOeVGn2s1Z5Vl6exox+UUgNKgX7i/E0aodW8jrmVJJOPu9p0yM6XhwxAJwDQwlofafCaDwfXMh+99BxH1g==","shasum":"c2001eba3ed9c955b641d5f3efff123786d2d6e3","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26-beta.0.tgz","fileCount":283,"unpackedSize":1430134,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1mKPNwXHBtHjQ/ezc072WIAFUAfnb58yIguuPdBRmzQIgI45dkkgGjcN2IpmYtM+J/Ipde4FpF6cSyLNGkEQfWME="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPk/5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh6A//RUSkA4JMRra+Qv2d5R9K7SOK4MPIA7t04aznEAMAWakarPR8\r\nazZRnkH6imkX71N06LXAcqzwnN7hVKDNDLpASb1/jXx+Mkni1lWZUKYGWcve\r\nMHViMkoFEeAnWZSV5kOQBab8wZkifk2wVSwkkmA6pzCY+8mAwTHjlO2a+WD+\r\nXeeHG54zpWs9ZQH4+wFnktmSe3XwEsk2ANJMFJn7A3/E29ZVnAicwttd6Lz+\r\nV7HW2AfXryBgxv5FII9Lb/L6utA3l0HCEUSLMtfIIYVatTQPik4KkFuwkUTA\r\nOntZLed+F0+a07UhVtbfRUMLCoh8n4Oktb9DtYho1GpQJ+E+KqRDMgnX/uzf\r\nPKWySYfZYvL4cVGbDzrwPeTaVYrO1PMoW2GDmPYK4QCu2MlnE2FIiVbcSKQf\r\nKvdRSdrAgHYbPhWY8rJ9FPAskfRNGdrlW82yxXdFlYTArCA5Vi5dIdvnCxPS\r\nQTA7vFsgSREtddlH1ACNpsXzYcuFyPQUx1WpU5qLe3nYrLF30rXZochb3st8\r\nU0jWfwdDiqwtS5FJ8TQ9RHN9zJiGX7WjeADoYGCpR8ya+nVH3Ts5IfmN1QT5\r\nFLSaiJIUtEXL3LrEf+MeFlZMk5vvtqkhFoWK5Xjx6bD3kK1nu0sccn0RWPM/\r\nDrxyBKj2IyU8BBdZ1BmfUpfh5wbYAQrkUD8=\r\n=9V7n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26-beta.0_1681805304763_0.09536239175797756"},"_hasShrinkwrap":false},"0.0.26-beta.1":{"private":false,"name":"suo-mobile-all","version":"0.0.26-beta.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"acd2eed8e362caa808531f076b3de19fedad6e41","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26-beta.1","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-MYYsA0GgooYGeGcmimig0Z6+LRJIfNvFHH7cVaQQ8sGXQXjEkemrqmFuICRULt9BimqoZfORb8f6+23cofdHGQ==","shasum":"8edc52f771cc9e56e89246277967620ddd4b558a","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26-beta.1.tgz","fileCount":283,"unpackedSize":1430134,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK3C1VUmIanw2fV6rIlsbxGPVMDd5hu4jeypcf1cCsYQIhAM+jlrLd9/iidxEnYqEO3sSfFU/vJ8OHFlCGJh+vHnzX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPlR1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYFg//SSxpueKtztPsV1I65DGhzPvb88NTWMdTjmleD3UceQUcsTBI\r\nn2qKzg+F7F+S3bI1+tLgpA74iK5jdh41y2Ub+HY/Q2g2IcAcf9ojcazhFG2b\r\nhwb7b3ausX6lXGj/paOgbfqPkUPARqQEsSU0c1LGH9sSWcvbtp0ct6D5JY69\r\nDZFvLKvxAJ3c/EhDCGnLvmUTGyfqHrUZgjozeRK5rjeiInY44o8XlpBYuEnc\r\nIG0u6rbJa2aoyJjND8ThBamUIlStX2liZnh1gM0Q2iMf1tci+7DGA4Denmpq\r\nB3/8xoV/MWV3kiJ1vXiU1rW1cTnqL8juwZuekRTECAta07+Fbb8fRWQzWblt\r\nmKNMBQM+/SBSNOXGrpl0Q54eNs69ipC6EAKUYRumWb52DibbB6EeYbWARvWY\r\nQJB2wfEPN2jP0rMQmlG+m3xs7mrlPneklYwEAisxx7ID7L/WEVEuknu7wKsT\r\nRYn6wmJD4YWLxgptfrDz4nQmfvykiRB6SeBKILm6xE7CMSa1GLz1r2d+fKjJ\r\nea3bkZcKxsNMxfIcAa5lI1mfx/4Nmtfa2M74EhDYCjbtP1taYFIlO+CdK4OS\r\nEdyWwUfOHSplVl/IK3IXmGGTomBDlFf3JD90H2kuKj/ZMwZaeH2WBMJaP+ih\r\na//yURTBFo2L8oGviVsT1OTOMM9yclryKE8=\r\n=SHue\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26-beta.1_1681806453724_0.7349639584211913"},"_hasShrinkwrap":false},"0.0.26-beta.2":{"private":false,"name":"suo-mobile-all","version":"0.0.26-beta.2","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"36fcdca51f54648f9cc83ff447b9b5a3490c2336","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26-beta.2","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-UF9NxhyoS1J2EyCmyCu9TIk/P9b9RIUCOJRIdxgR7nsU3fV6HbzMw13PQHsEd2Lpu8jDajifOh5Cnj22cuFguQ==","shasum":"2bb8983ade425d51b8add75f5bbc58e236b66ad2","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26-beta.2.tgz","fileCount":283,"unpackedSize":1433400,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGg4B3K80HyNYGg/ZgYdoyY6LO0A5reNzOScSSdqQaGxAiEAldlkM4xC1xCFhZFFXZTGTlBuPy1AywIe03DuPkjDMkw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPlTvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0txAAow5poW2foItYB8PRhfUZZYQsa0KFr5BGLK8RC166Veuquppv\r\nX8cbi9VNT1TYIGAhJ6zbDNGSAQd4RD2bNmC/quKdlbE/8szulSWYgOdaLL3g\r\nFR6WMVOk414roWawIRf7FjXs4XZk7B+nME4qkFsk8kZwBT87IC4A64CU1X6q\r\nhX5HClZ0+tbswwqi7t+z+BPje8nZ6qMg367vDqcubtuTzwjEnYeyTOQkq8qf\r\nMZa3SfNPlehTWNJyK7oSws/fipsN+SXTTwecZdJ96CmGP2724N6xWTBdW6E9\r\nNV+f6hrNvMmJ3F9yXy7k8HdtaJwHY0cRoP4Hm3oXFhZrQIvsfh67Q75f7ksK\r\ng9LwxadDSpY/ekOnmou6u2nD1+0XQq1vSwlgZxNBJtjQVXtNV/weQ42+/+j8\r\n1fo04pnSAziD89JZuh1Dfie/fKM1Mpp91mkNtkogzClAqU7ysVrsrVQESSjO\r\nNuUZtY9a34mwLr2ML3lEdGj1bnJgXAE1Q6HAw3sZI8gdVNBF0AaDRaS7TCJs\r\nCMRrOlguOsqvHPp+7TqsJWkp7qdg456q7rh/PIHajS0BKwQg5lpnt1/majID\r\nNMFl+tDv5YwLUWuQCy+Cw5xG2HsdZ7lFWF1Kxj3L9SxW4kOw7qo7GJsUf1eg\r\n+NHOoJiiElTFh666zqfoYGESZOdSM6JjZn0=\r\n=8R72\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26-beta.2_1681806575136_0.2323132788142006"},"_hasShrinkwrap":false},"0.0.26-beta.3":{"private":false,"name":"suo-mobile-all","version":"0.0.26-beta.3","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"554619fbd0a6853d9bb8ff036002c10a7760d6de","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26-beta.3","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-aRjiYfoY+e610rKZTF1dXLHXx0w/B0dR1wOU171T3ibOu+3mi4yhzb65ZaUbd/Rzw6Q2Bx9rIqKNd2gF3Rz2Tw==","shasum":"ea711be578b64c8ef327ce6c93831d7893520a66","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26-beta.3.tgz","fileCount":283,"unpackedSize":1433603,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCht4Cuv05u4nHpUi78AaZu4iaioDuM9OP2IKImZWcN3QIhAMm5NVWgArJnbZQdeF3mtyG8po/AMBVtCUHqOtPJSQEo"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPm4ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotERAAhQ84oI+Eyp9LLw5VHYQN0m2H8HPdQ0E4EwaFtrij4AdNPvvU\r\n30BduANNzqEOCHF4ualfakR04ULLLrwtV8YHzSrYJyYSj7RcFjuDMxUasv49\r\nYjykXYrIK31qYcyrZKaayomhu7Y1Lfdt9goXhJTeOK2XgPrIc5/9H8mVioyS\r\n3n55STki3YaVMrdwkYb0KMnISWEy8JKSwJErQlWaoQm/zsDRbOXcGvo6b8CU\r\n+9t5Wjx3pLEohU2JNceWuXKmIFf0MNTEx2OjHJ4BypykOnCxF6BWndgeLAoy\r\nwTEoNwjyR+frawowlc6UdGVh8av+2yrPxds95CJE9OAmuwzHOpLEc8JJ0QDZ\r\nGLH+Us9wLXpKj4G8fK6Q1FHEX0kThD+mPdj/rQ6BZfnnIftFWz/HKWq1LnfW\r\nvSW+KCZuha0gmjizJh5tnmZlXEgYLqBxmk6GpKosFX5uKG5QuGKA8gFtSPtn\r\niOn3ZwCMhh/3IKT8XJPiItMuicR7kQVXle/Kje+iDjCnsGZDeKYv4qCIEKiH\r\nYkdFR5g17pj2mq8ewG39Q9INtOPuLG3mpg7ogqV/D+WCGUiHChWkdeF2yB3v\r\n3GWILCnlcE9esmtHdaAwn0XHW9HiuNfWB4ZGV9CT4DFy6Ox6dwDgpHuPykdH\r\nGkVk1IpHups6JiZcDZQrKayWVt2LUztVnKo=\r\n=PSxt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26-beta.3_1681813017380_0.3370762241342393"},"_hasShrinkwrap":false},"0.0.26-beta.4":{"private":false,"name":"suo-mobile-all","version":"0.0.26-beta.4","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"935025bf698ce6957d1ac51949282a8492b18dba","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26-beta.4","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-y61rt23y9XGcx8AnNd8yEpkznZEhu1j7KMIWO6ZdiqSfkq/15MJIGBiZnrD/fRCQnRHt20pLQjs8Oru2pGCF4g==","shasum":"fe08ea7823e527bd9edf84f96f268027118cd076","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26-beta.4.tgz","fileCount":283,"unpackedSize":1433816,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnnhvpSL+LxjZ0F29/YISDpoLfCG9D01PrQ1QkVTDF/AiEAh08wm092oltX/fBbTNs7Bfsc6ksotNrrs6jNqLCfeio="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkP1VGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2qg/5AWOhzYjRvLP0hE9VzuA/P7XX+01JROQcjwQuvKYrXbQtWpOu\r\nW6sPskciAka0lB7yPGL4eFBpuA9+MABh5YxIyxh2V2gZqCOT5ukza6c0s6el\r\n2+LlTJsxoVjb/UM8Bw4Mm48yjOeeInoOhMHfBNK/MVX2+ggTJ0IlZmEGTlVM\r\njDfSI7xm+OuD6rju5HkWw0KbRg2DdxY5u1FZ14YvWi+NQ5A2uaKQ09+h1fIW\r\nP7dACZH8CzBDNPuPmL28hD9HNnj6IRv3xQVBpegP7NisSjJo19lq8ebZX64N\r\nBQS4J6BijKvUyES46GsVoeGx00Pbp8revErQ22x033Uqynae9LHEvh0wFCwf\r\nUG30Wu2WtQt4t092tMD4L54Vaa9v1wLnJJFoRctM1ixvwzWqQCCM7aph7dcs\r\nuHfdxAiKP6YliBtjm/wXnkGBUBZ74ulA9rg4Fu0tL5hNomHgHcL8qGYHiBYt\r\nGQeuevdZwkUpHSjrGfPPKlYc+kvQyRF3JfA6FqPXyh9Iof1h2B2jfr5D8ADn\r\nV00H/k+yYYDew5C+SPJi7d/NO3y93uSvZS4yTB52yPS37j1AB2NsuaLb/UG8\r\ncQTfBc4CCDCmVyLFHIlDUHeXE1D1sTz8Kq1sW/R3rsGRYdBOWnXo57HxC3tm\r\n5ZvlP0ZY7+Yr5G6IDOosXccXNd5iIcB9vS8=\r\n=6B8j\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26-beta.4_1681872198101_0.4204074221523655"},"_hasShrinkwrap":false},"0.0.26-beta.5":{"private":false,"name":"suo-mobile-all","version":"0.0.26-beta.5","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"51583172204e1a52e71334293ac3775d99d45966","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26-beta.5","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-IH1vtA06iM/AKAnliW2OfPqoJeg3eumawbyzR9pecwDtUYc86cVhBCCDGSV72xL6r+gaVk1rrd3P5gIKYFNtEQ==","shasum":"54be928b2c0e6bec04a8ad39b7ae3ad575ab176d","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26-beta.5.tgz","fileCount":283,"unpackedSize":1433816,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDGZ6tlhEuPJBd5SwVCU/vvGUoy9KWcuvySfwdHHkwmAiAIsH+moijoQbcvWxVzeFt1oAEZxHgIHulYBu7wMRa8Ww=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQOJ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosgA//V5Uhh4eM8zghTS9S/20ZJAYdfB75Vhai8RiGFkTctSELHz6S\r\n4rQG2gOb+R8H8492IFwCGWJoLDyv8b++sDsTpWNstcbtUUIYSXqBE3n/Q8sa\r\noQJKr3AXDK/0DNIAf4KqHo5Qknb/N1HdjnExH7cHdBZm8pVkEzGnK/Cyien8\r\n8bWkFFOC7Kf8XFuYUcmcqs8d0SwUyaNfIG7uByAHFMhVeWPwSAk2/ULqZdCQ\r\nnWtjSAs1BJWl+LgoJFDJrYzQOUfgM7kzL9AqP31muNgLlRoFn7Vl2jmqxpIa\r\nknKWZ4ngSB8diNMIIIITrBX2Fz9FQeNwALKlBp++jrF7Bv5XtRX0+W7HFSvg\r\nwDMQEqmg7/sDspjPCT0y4G39a74Kn8Q10XfPYN1uQcJJvS7Cv8uz5lzryaIJ\r\npRuYxR4WaBlEBm+SevGykrfTvmDksJ+9YYZ8v7MX83t4X7lWrLbz7sGTfsZS\r\n2l9+Eq0ivyou2LVT2PJ5H/5OWJl0EUroRnTLKLxApCbMfR7U9wy1yJnKRcsC\r\notrTqGp/RoIaizOXpmPAcMQOmqp4x9ZFGAQEZnjBRoGOda7Fc7iDK1LYcu1y\r\nT0AGHhL15QDI3TzLdRZcEy6MHY+OPqNoI2g3nz9ZFRDIo1wpthwbAVe5teyg\r\nFsgj7Q3ImjRVE4uOWswvn0EXW5RbVZ1Bmeg=\r\n=amo0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26-beta.5_1681973881389_0.9143214738982925"},"_hasShrinkwrap":false},"0.0.26-beta.6":{"private":false,"name":"suo-mobile-all","version":"0.0.26-beta.6","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"34abbfd2da6c6558b4997e9c2d41b49cb789b17e","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26-beta.6","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-pP+uCSOt5SvrOo87suHeP//f2C3jCeMYo2hspdXVfNXvIwZaKogzaoqfg0b1cHjc9RazL44prcTL+wAVeq1O6g==","shasum":"83d1d33d37755d14469ed0e7fabf39d320328db0","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26-beta.6.tgz","fileCount":283,"unpackedSize":1436460,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICw0xkAytu4zOhQPQ8784ID1eyOz3bgzOzwypl2NvkOsAiEAheuzB7v/c4nHN3W8j7Wra3O4ovfQVq8y2+re5tRgCZE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQOVoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKFQ/+KES9K77UXdZvhcl1WUTYHIIjMzH0jcigdCcoT+8Orz/zd1XI\r\nLMNcXtwEbNxP61D/hvORq8FjqlH9ChC0Y1pTis4d6rP5bGvt+Qa5Q1Jpof+T\r\ngDlRlBiodv9Rmvtscd1Ms5wpBX0EuLaS7SNnOzpdKEYCDaU/w3hUmfzFbjuf\r\n8RGkvL/x+1CFoEZCalcY1W2Vyxsb+H2vaxuHuzrXG+KR9rrkbwcBkRI+Az+q\r\nNEnipJK31BRw6WtRs+chF6oOnE9/mlT3pJ3UG1+gK9TY2QJYgKl/66jwb5u1\r\n8kASBCVovd/MsuYFYbAOnEwXXmLSyi+8uMBZW1AjxCz6+9yFAA+sJXJJlH+V\r\nTCzjjIsbQM6iqb/Mw+frHzGZ46iQXr40qMdc96+SsQxNo+slLF0pTwB1tL/R\r\nsI+s2W+2Dkqe90Vo9rlE0fHUskUEz9e/a/kbQ/ZZ7gUkSUYZXQ/eGQSg7U4G\r\n/KxmSPfF76D6uW/twb/a/459zMLp2HsYgIZmLzuGEEUx3R9f8wnJuFq1yvpv\r\ncuNl6CAKQ4Jrjkwcb32A8oHL7/tYe+orZu/7rNjWC1zOnRbCU8z9q/jY5P0i\r\nAwPBTCrRvGpfNiYfVNStdLnEJrjEY27rQlDce1I+qgy4t+enZzZHZiQ9pOvD\r\nvyr1j99tBtMHpYLPkPfTnYjd9Z2xsoPsTzk=\r\n=nt/u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26-beta.6_1681974632449_0.48271919624288473"},"_hasShrinkwrap":false},"0.0.26-beta.7":{"private":false,"name":"suo-mobile-all","version":"0.0.26-beta.7","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\r\n\r\n### 1. 安装和编译方法\r\n\r\n```bash\r\n# 安装依赖包\r\n$ npm i\r\n\r\n# 启动开发服务器\r\n$ npm start\r\n\r\n# 编译生成文档\r\n$ npm run docs:build\r\n\r\n#编译生成组件\r\n$ npm run build\r\n```\r\n\r\n### 2. JS 编码规范\r\n\r\n#### 2.1 图片引用方式\r\n\r\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\r\n\r\n```bash\r\n\r\n# 正确\r\nimport newIcon from '@/Img/icon-new.svg';\r\n\r\n<div>\r\n  <img src={newIcon} />\r\n</div>\r\n\r\n\r\n# 错误\r\n<div>\r\n  <svg>\r\n    <path d=\"M299.776 997.568a90.592 ....\" />\r\n  </svg>\r\n</div>\r\n```\r\n\r\n#### 2.2 条件样式\r\n\r\n尽量不要将 `css` 代码写到 `react` 里面\r\n\r\n```bash\r\n// 错误\r\nconst dataStateColor = [\r\n  ['#F4E8DF', '#EF8839'],\r\n  ['#DFEFE5', '#33C669'],\r\n  ['#EAEAEA', '#999999'],\r\n  ['#F6DBDB', '#FF1515'],\r\n];\r\n\r\n<Tag className=\"text-color\"\r\n  style={{\r\n    backgroundColor:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][0]\r\n        : dataStateColor[0][0],\r\n    color:\r\n      item?.dataStatus < 4\r\n        ? dataStateColor[item?.dataStatus][1]\r\n        : dataStateColor[0][1],\r\n  }}\r\n>\r\n  {desc}\r\n</Tag>\r\n\r\n\r\n// 正确\r\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\r\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\r\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\r\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\r\n\r\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\r\n  {desc}\r\n</Tag>\r\n```\r\n\r\n#### 2.3 图片命名规则\r\n\r\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\r\n\r\n- 图标：小于 `128px` 的图像\r\n- 图片：大于 `128px` 的图像\r\n\r\n#### 2.4 SVG 条件色彩\r\n\r\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\r\n\r\n```bash\r\n# 错误\r\n<svg\r\n  t=\"1636686053617\"\r\n  className=\"icon\"\r\n  viewBox=\"0 0 1024 1024\"\r\n  version=\"1.1\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  p-id=\"1648\"\r\n  width=\"16\"\r\n  height=\"16\"\r\n>\r\n  <path\r\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\r\n    fill=\"#BDC1C9\"\r\n    p-id=\"1649\"\r\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\r\n  />\r\n</svg>\r\n\r\n\r\n# 正确\r\nimport icon_color_a from 'img/icon_color_a'\r\nimport icon_color_b from 'img/icon_color_b'\r\n\r\n\r\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\r\n```\r\n\r\n#### 2.5 事件处理\r\n\r\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\r\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\r\n\r\n```bash\r\n# 错误\r\n<div\r\n  onClick={(e) => {\r\n    e.stopPropagation();\r\n    onActivitySkip(item);\r\n  }}\r\n  className={classnames('activity-size', {\r\n    show: !item?.busiTitle,\r\n  })}\r\n>\r\n\r\n# 正确\r\nconst doActSkip = (item,e) =>{\r\n  e.stopPropagation();\r\n  onActivitySkip(item);\r\n}\r\n\r\n<div\r\n  onClick=doActSkip.bind(this,item)\r\n  className={classnames('activity-size', { show: !item?.busiTitle })}\r\n>\r\n```\r\n\r\n#### 2.6 触发区域多次定义\r\n\r\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\r\n\r\n```bash\r\n# 错误\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  &nbsp;{commentCount < 1 ? '' : commentCount}\r\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\r\n</div>\r\n\r\n.comment {\r\n  position: relative;\r\n}\r\n.hotspot-comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  position: absolute;\r\n  top: -7px;\r\n  right: 0px;\r\n}\r\n\r\n\r\n# 正确\r\n<div className=\"comment\" onClick={doCommon.bind(this)} >\r\n  <img src={icon_comment_c} />\r\n  {commentCount < 1 ? '' : commentCount}\r\n</div>\r\n\r\n.comment {\r\n  width: 34px;\r\n  height: 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n### 3. CSS 编码规范\r\n\r\n#### 3.1 组件和对象命名\r\n\r\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\r\n- 组件内部的一类子元素用 g 命名，表示全局对象\r\n- 全局对象内部的组件使用 m 命名，表示模块\r\n- 模块内部的小部件使用 u 命名，表示单元\r\n- 对于函数以 `fn` 命名\r\n\r\n```bash\r\n.ssm-circles-item {\r\n\r\n  .g-msg {\r\n    ...\r\n\r\n    .m-lt { ... }\r\n\r\n    .m-rt { ... }\r\n\r\n    .u-color {\r\n      color: #2c7ef8;\r\n    }\r\n\r\n  }\r\n\r\n  .g-title { ... }\r\n\r\n  .g-circle { ... }\r\n\r\n  .g-operate { ... }\r\n\r\n  .g-comments { ... }\r\n\r\n  .fn-hide {\r\n    display: none!important;\r\n  }\r\n}\r\n\r\n\r\nreturn (\r\n    <div className=\"ssm-circles-item\">\r\n      {item && (\r\n        <>\r\n          <div className=\"g-msg\">\r\n            <div className=\"m-lt\">...</div>\r\n            <div className=\"m-rt\">...</div>\r\n          </div>\r\n\r\n          <div className=\"g-title\" >...</div>\r\n\r\n          {item?.images.length ? (\r\n            <div className=\"g-circle\">...</div>\r\n          ) : null}\r\n\r\n          <div className=\"g-operate\">...</div>\r\n          <div className=\"g-comments\" >...</div>\r\n        </>\r\n      )}\r\n    </div>\r\n  )\r\n```\r\n\r\n#### 3.2 classnames\r\n\r\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\r\n\r\n```bash\r\n<div className={classnames('m-lt', {\r\n    'u-color': !item?.busiTitle,\r\n  })} >\r\n\r\n\r\n.m-lt {\r\n  ....\r\n\r\n  &.u-color {\r\n    ....\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### 3.3 多行代码层级\r\n\r\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\r\n\r\n```bash\r\n# 错误\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n>\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })} >\r\n\r\n# 正确\r\n<div className={classnames('g-comments', {\r\n        hide: !likeFriend.length && !commentNews.length,\r\n      })}\r\n  >\r\n```\r\n\r\n#### 3.4 对象属性书写顺序\r\n\r\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\r\n\r\n```bash\r\n# 错误\r\n<Image onClick={giveALike.bind(this)}\r\n    className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n  />\r\n\r\n\r\n# 正确\r\n<Image className=\"m-icon-head\"\r\n    src={critic?.fromUserAvatar || avatarPng}\r\n    fit=\"cover\"\r\n    onClick={giveALike.bind(this)}\r\n  />\r\n```\r\n","readmeFilename":"README.md","gitHead":"cf950fab20330e974b8851866de6e7af73efba73","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26-beta.7","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-+W21mH5qMF979MtSQqi3+rn/amN0y8NGVZhuXVuUw0RYEcC6k01GV2x6uprnYXc8KKMFeuK/UyieLGAk9NKzvw==","shasum":"21e6a35aa3e897e2c52653b8e19bfd17369cd3f4","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26-beta.7.tgz","fileCount":283,"unpackedSize":1436467,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9SisgLecaOCrncDVWhpxRNPYGhNAq+HOhQ+K6Yhd8KgIgFjG/johiIns9ZAIwlUIEuhiyreH/M2BIQ0AyILDadFM="}]},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26-beta.7_1683523909440_0.982249885675466"},"_hasShrinkwrap":false},"0.0.26":{"private":false,"name":"suo-mobile-all","version":"0.0.26","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"7b979f8b4eb38231af89ec730f7e5a1818c03942","description":"```bash\r # 安装依赖包\r $ npm i","_id":"suo-mobile-all@0.0.26","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-0bwe9zGH5U8ND7IMqgtW8imHy8UnINuN5pvWg+I+OyhM5DZcAfFiB15XFUJNHiADwbMnoqGCmBJGthiDYsIKhg==","shasum":"7ff0eaff425c25170913ca9c83c8fd511125d3bb","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.26.tgz","fileCount":283,"unpackedSize":1436615,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA7Et9aJTlaxbXqH1uxXEjY0IIhVBYWYXZvt1HPE5ghwIgPbuqhUuOC9pjjHScocRydLpYNg5FxmNDVTXD2vODj3E="}]},"_npmUser":{"name":"dajituier","email":"734164941@qq.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"dajituier","email":"734164941@qq.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.26_1683620365900_0.34932364376285996"},"_hasShrinkwrap":false},"0.0.27-beta.0":{"private":false,"name":"suo-mobile-all","version":"0.0.27-beta.0","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"3bb69e5273389043990361e0bc08fc73bb03cda1","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.27-beta.0","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-CTVDeMB4im0ukXJicL4177Dnea0GI+OXn7hnYOeIk0ARsyYlNuSbnYpEEJE/skLxioLkHfr6j9UO+A0R27YYTQ==","shasum":"c7f766eed53aa0e81f3e60cf1a8ce0c55fa3c6cf","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.27-beta.0.tgz","fileCount":282,"unpackedSize":1756668,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7to0u/Kgyf0JaVVL2QwoZ1Gk/J//hyCcXnYhwf1tOxAiBU5BeEORiZ+hNg04Ryy4diV6tE5Y+A6h0WusHrRsPDcw=="}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.27-beta.0_1687677144019_0.8863703604631088"},"_hasShrinkwrap":false},"0.0.27-beta.1":{"private":false,"name":"suo-mobile-all","version":"0.0.27-beta.1","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"e827dfe87f83b633f1fd73de8319408a62d5e041","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.27-beta.1","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-NjRndZC1Zy3vr+YKrg4jk2k56Q9+AMSWbG7Cy1tXl6KmXnzr/kOvvCiaU6Cfr+yGztWfqT3yhx/cblmxjk4ZvA==","shasum":"f12328dae6e4b2dca4a1dc69e973b9948b1f1ee0","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.27-beta.1.tgz","fileCount":282,"unpackedSize":1757868,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCU6eVtOJBkLQobOItx+dr3bVxFSXqzBLbJ6XwOWQEKUQIgbo+nEr8J4HA5a+Pmw4Pl+ILK5POemVaftuf0As56aPs="}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.27-beta.1_1687680843612_0.14280573313889922"},"_hasShrinkwrap":false},"0.0.27-beta.2":{"private":false,"name":"suo-mobile-all","version":"0.0.27-beta.2","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"555b9c9cd46475d9d0bc90692b9ca4a8dbf3319b","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.27-beta.2","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-up5T6InjqgoursghWaafIMDNO8Pb9IxG2V2KAvS8GmI2+8E90rOBxh1lvmYOi4Bm03bM7JSS3IxTux4Dehytyw==","shasum":"0b43fcf24eb5b62b50cd6b34d004cef077d0a558","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.27-beta.2.tgz","fileCount":282,"unpackedSize":1757899,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDd2MMd7Fmyc1uPAUhDN+duzJ+MMZQlILLWRLfJPmzh6QIgdGXGktNW7R94y4IGXLCbX92qT2uPhBCGEjrLjpb2uXw="}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.27-beta.2_1687939058170_0.015177718354078884"},"_hasShrinkwrap":false},"0.0.27-beta.3":{"private":false,"name":"suo-mobile-all","version":"0.0.27-beta.3","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"6a273a1e2bdf1ac0c6800e65e79690e5052a5550","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.27-beta.3","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-c708oudkm801HlTUOy/8e4f4MZB5DvCaZ8Y7h+P8gwszinHunHyD/96pmmRT7TsiPIzVT9Px20T9LMs96A42tg==","shasum":"287dce93df244288acaeadf42f58aebd0e0e99be","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.27-beta.3.tgz","fileCount":282,"unpackedSize":1757912,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8gw3hOn+54KsmLPUl2Al/bor/qcyiTNUBIO0GaGJ0JAiEAwG+C3jfwRTsaVRwlKx7OeDZNcUAhMLe6gjULkA+VtuM="}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.27-beta.3_1687942321278_0.9085642019131079"},"_hasShrinkwrap":false},"0.0.27-beta.4":{"private":false,"name":"suo-mobile-all","version":"0.0.27-beta.4","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"06edadf49bcb8f2b9628ccffcd7f2e30dea8605d","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.27-beta.4","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-LAL5AcBzIUIXUOiOykhcpGmKwZpFhNJ8IHZU0dfyXt34BNzMB8yP+SepJ0AtmwzqVhOKXI4bgiUzJJMC4lDNSg==","shasum":"af9bb63bea9268a50bd085f793c7de979146219f","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.27-beta.4.tgz","fileCount":282,"unpackedSize":1757985,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwY5NZg+QzASgDk6CknvksS5Dx4kWFLGJb+nb3Y2BCrQIgNNEXrZBWqn6HcMyX2kFZ2G/mILOd8XOHLYr0lYKQsP4="}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.27-beta.4_1687944308397_0.8179904594102567"},"_hasShrinkwrap":false},"0.0.27-beta.5":{"private":false,"name":"suo-mobile-all","version":"0.0.27-beta.5","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"6a66ab060bb1d24de788a433d2a7f1012e6172fe","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.27-beta.5","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-acmybdZm8Q9tc32A9YNnfw3OljfZTcdpw8Ekf5o/BS9TPkKN8p1NUt6ivrCCjQFzBzMEQBr0gvSB67Z931xIFg==","shasum":"5ec02a9c63d954fe17424ed46845770f5e77d5c3","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.27-beta.5.tgz","fileCount":282,"unpackedSize":1771882,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsEZ6+wrhGrKWIvt6SK9nulvKFA2xeR6eiVry35+80ZQIhAJdeKmNOzkqoCtCEtIbaRsr0ywYS+5iLdTjGS3ADtMoH"}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.27-beta.5_1687944998733_0.7085295552114381"},"_hasShrinkwrap":false},"0.0.27-beta.6":{"private":false,"name":"suo-mobile-all","version":"0.0.27-beta.6","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md","gitHead":"179091fedac7f6fe38427ec2855774bfe5090826","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.27-beta.6","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-d3QzVkNC+lTN+7JotWpi+6USMQ/tzdV4MbCGBqHCKFcWDIPM2zDd/5hFzFCC0SkCcE8pt3RNzc3RiEmODEAgOg==","shasum":"7f1822da1f14a76fe3d8f1bc348f720686e5bb35","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.27-beta.6.tgz","fileCount":282,"unpackedSize":1771882,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBAD5N55pXn4uGJ7EKKdZ81HK+BDrciT/5/K/ABOEFfwIhAKS+LEsxY3HvKgRewo0lR73jbt+dpdKdf2v2bjBnN2DD"}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"},{"name":"wn0317","email":"1303682773@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.27-beta.6_1687945168565_0.13349796978225736"},"_hasShrinkwrap":false},"0.0.27":{"private":false,"name":"suo-mobile-all","version":"0.0.27","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"7c7a2912d3db60ca549277c18fc3b796800585f8","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.27","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-yD6SXCtG4QWREx+9Xsn9r4YYp/OpSsV0aJ5crvrWmZGq7IhcOjERHJsZmpRxBAqEJnprWONVRTzG3lLpce6Zng==","shasum":"bbeda751e17eb19b4823a8fa05536c79b7b057c7","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.27.tgz","fileCount":282,"unpackedSize":1771897,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDugCEOLum6I2TBdadGQ/ymPOKPR9ysKdltFTPv/Rwn0AiEAmwND06zfZkvCAVDQ+kaKDep1q8iTTzB2xlPNPKGaBeU="}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.27_1694067412920_0.4235397903995761"},"_hasShrinkwrap":false},"0.0.28":{"private":false,"name":"suo-mobile-all","version":"0.0.28","scripts":{"start":"cross-env PORT=8020 BUILD_ENV=sit && dumi dev","docs:build":"cross-env BUILD_ENV=production && dumi build","docs:deploy":"gh-pages -d docs-dist","build":"cross-env BUILD_ENV=sit && father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm version patch && npm publish","lint:prettier":"prettier -c --write \"src/**/*\" --end-of-line auto","test":"umi-test","lint":"eslint --ext .js,.jsx,.ts,.tsx src && npm run lint:style && npm run lint:prettier","lint:fix":"eslint --fix --ext .js src && npm run lint:prettier","lint:style":"stylelint --fix \"src/**/*.less\" less","lint-staged":"lint-staged","lint-staged:js":"eslint --ext .js","tslint":"npm run tslint:fix","tslint:fix":"tslint --fix 'src/**/*.ts*'","beta":"npm run build && npm version prerelease --preid=beta && npm publish --tag=beta && git push","test:coverage":"umi-test --coverage","pub":"node pub.js"},"main":"lib/index.js","module":"es/index.js","typings":"dist/index.d.ts","dependencies":{"@amap/amap-jsapi-loader":"^1.0.1","@ant-design/icons":"^4.1.0","@irim/saber":"^1.2.0","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","ahooks":"^3.6.2","antd":"^4.14.0","antd-mobile":"5.0.0-rc.9","antd-mobile-icons":"^0.2.2","axios":"^0.23.0","classnames":"^2.3.1","dayjs":"^1.8.33","git-get-status":"^1.0.2","git-status":"^1.0.10","highcharts":"^10.1.0","highcharts-more":"^0.1.7","highcharts-react-official":"^3.1.0","immutability-helper":"^3.1.1","lodash":"^4.17.11","moment":"^2.29.3","qs":"^6.10.1","react":"^16.12.0","react-amap":"^1.2.8","react-redux":"^7.1.0","react-router-dom":"^5.0.1","recompose":"^0.30.0","redux":"^4.0.5","stylelint-config-standard":"^29.0.0","stylelint-csstree-validator":"^2.0.0","stylelint-scss":"^4.3.0","suo-base-select-user":"0.0.16","typescript":"^4.2.3"},"devDependencies":{"@rollup/plugin-alias":"^3.1.5","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash":"^4.14.144","@types/qs":"^6.9.7","@types/react-redux":"^7.1.9","@types/react-router-dom":"^5.1.5","@types/recompose":"^0.30.7","@umijs/plugin-locale":"^0.14.2","@umijs/test":"^3.0.5","antd-dayjs-webpack-plugin":"^1.0.6","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-module-resolver":"^4.1.0","cross-env":"^7.0.3","dumi":"^1.0.16","dumi-theme-mobile":"^1.1.13","eslint":"^7.1.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.0","eslint-plugin-markdown":"^1.0.0","eslint-plugin-react":"^7.12.4","father-build":"^1.17.2","gh-pages":"^3.0.0","git-is-clean":"^3.0.1","husky":"^8.0.1","lint-staged":"^10.0.7","prettier":"^2.2.1","stylelint":"^14.15.0","tslint":"^6.1.2","yorkie":"^2.0.0"},"gitHead":"96838440d51288b8666ae7bbc1dd15ca54f38371","description":"### 1. 安装和编译方法","_id":"suo-mobile-all@0.0.28","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-XWKm24Am0nu8fsgDXINRw1WSLEPoSvT0tWCYTpUVQuiB70Mhd28d/RdxUAsN6RDKXuOv+x9cvoT5B6cerYEYkg==","shasum":"4a4dc6c51f67bd013128adde3997effaee17f190","tarball":"https://registry.npmjs.org/suo-mobile-all/-/suo-mobile-all-0.0.28.tgz","fileCount":282,"unpackedSize":1771919,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEIz2jUdHB9cCpxHWiQi+qgVMUB8+LrzD1t8p+ApKLdQIgGVDgKH//8+3pIEeGQxSV56RrcfZquk7NmTlSuOqMLFs="}]},"_npmUser":{"name":"whatjk","email":"13657086451@163.com"},"directories":{},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/suo-mobile-all_0.0.28_1695091272447_0.01593867373841218"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-04T07:46:58.857Z","0.0.1":"2022-07-04T07:46:59.077Z","modified":"2023-09-19T02:41:12.788Z","0.0.2":"2022-07-13T03:08:05.387Z","0.0.3":"2022-07-15T02:27:04.770Z","0.0.4-beta.0":"2022-07-15T05:31:04.178Z","0.0.4-beta.1":"2022-07-15T05:34:03.499Z","0.0.4-beta.2":"2022-07-18T01:27:25.480Z","0.0.4-beta.3":"2022-07-18T02:44:39.963Z","0.0.4-beta.4":"2022-07-19T06:54:26.537Z","0.0.4-beta.5":"2022-07-19T09:16:48.893Z","0.0.4-beta.6":"2022-07-19T10:08:11.305Z","0.0.4-beta.7":"2022-07-19T14:14:13.445Z","0.0.4-beta.8":"2022-07-19T14:42:15.153Z","0.0.4":"2022-07-20T03:28:36.723Z","0.0.5":"2022-07-22T10:38:09.202Z","0.0.5-beta.0":"2022-07-25T08:18:34.825Z","0.0.5-beta.3":"2022-08-01T07:13:39.650Z","0.0.5-beta.4":"2022-08-01T08:44:51.934Z","0.0.5-beta.5":"2022-08-01T09:15:33.096Z","0.0.5-beta.1":"2022-08-02T05:57:39.944Z","0.0.5-beta.2":"2022-08-02T08:13:01.288Z","0.0.5-beta.7":"2022-08-02T09:14:59.136Z","0.0.5-beta.8":"2022-08-02T11:30:22.511Z","0.0.5-beta.9":"2022-08-03T09:15:18.109Z","0.0.5-beta.10":"2022-08-04T07:28:18.011Z","0.0.5-beta.11":"2022-08-04T07:32:46.612Z","0.0.5-beta.12":"2022-08-04T07:46:08.630Z","0.0.5-beta.13":"2022-08-11T08:36:32.293Z","0.0.5-beta.14":"2022-08-16T06:15:18.799Z","0.0.5-beta.15":"2022-08-16T06:17:41.634Z","0.0.5-beta.16":"2022-08-16T10:26:54.323Z","0.0.6":"2022-08-22T02:48:34.136Z","0.0.7":"2022-08-22T08:57:28.706Z","0.0.8":"2022-08-22T09:35:18.551Z","0.0.9":"2022-08-22T12:05:43.026Z","0.0.10":"2022-08-23T02:59:29.493Z","0.0.11":"2022-08-23T12:45:41.329Z","0.0.12":"2022-08-23T13:51:50.209Z","0.0.13-beta.0":"2022-08-30T03:16:21.674Z","0.0.13-beta.1":"2022-09-05T02:49:04.660Z","0.0.13":"2022-09-07T05:48:46.082Z","0.0.14-beta.2":"2022-09-14T11:13:54.124Z","0.0.14-beta.3":"2022-09-19T05:13:04.092Z","0.0.14-beta.5":"2022-09-19T05:31:50.917Z","0.0.14-beta.7":"2022-09-19T07:11:18.511Z","0.0.14-beta.8":"2022-09-19T08:23:13.283Z","0.0.14-beta.9":"2022-09-20T05:17:44.825Z","0.0.14-beta.10":"2022-09-21T06:43:50.206Z","0.0.14-beta.12":"2022-09-21T07:15:34.921Z","0.0.14-beta.13":"2022-09-23T03:28:59.600Z","0.0.14-beta.14":"2022-09-23T06:21:55.815Z","0.0.14-beta.15":"2022-09-23T06:30:36.142Z","0.0.14-beta.16":"2022-09-27T05:35:23.783Z","0.0.14-beta.17":"2022-09-27T11:33:34.459Z","0.0.14-beta.18":"2022-09-27T12:38:26.354Z","0.0.14-beta.19":"2022-09-30T03:24:54.678Z","0.0.15":"2022-10-11T10:40:57.833Z","0.0.16":"2022-10-12T04:31:10.822Z","0.0.17-beta.0":"2022-10-18T08:25:05.392Z","0.0.17-beta.1":"2022-10-18T08:34:54.753Z","0.0.17-beta.2":"2022-10-19T05:55:38.069Z","0.0.17-beta.3":"2022-10-19T07:05:12.890Z","0.0.17-beta.4":"2022-10-19T10:16:08.312Z","0.0.17-beta.5":"2022-10-19T10:25:28.821Z","0.0.17-beta.6":"2022-10-20T05:34:14.593Z","0.0.17-beta.7":"2022-10-20T05:58:29.013Z","0.0.17-beta.8":"2022-10-20T06:22:14.077Z","0.0.17-beta.9":"2022-10-20T08:22:42.151Z","0.0.17-beta.10":"2022-10-24T07:16:05.259Z","0.0.17-beta.11":"2022-10-26T03:02:30.480Z","0.0.17-beta.12":"2022-10-26T03:13:58.000Z","0.0.17-beta.13":"2022-10-26T06:40:24.169Z","0.0.17-beta.14":"2022-10-26T07:04:01.923Z","0.0.17-beta.15":"2022-10-26T09:04:16.898Z","0.0.17-beta.16":"2022-10-26T10:50:09.474Z","0.0.17-beta.17":"2022-10-27T11:19:48.930Z","0.0.17-beta.18":"2022-10-27T11:59:43.192Z","0.0.17-beta.19":"2022-10-27T12:25:32.994Z","0.0.17-beta.20":"2022-11-02T06:21:52.226Z","0.0.17-beta.21":"2022-11-02T07:13:27.680Z","0.0.17-beta.22":"2022-11-07T06:14:48.498Z","0.0.17-beta.23":"2022-11-07T06:36:14.027Z","0.0.17-beta.24":"2022-11-07T08:29:02.438Z","0.0.17":"2022-11-09T05:27:01.818Z","0.0.18":"2022-11-10T02:33:05.812Z","0.0.19":"2022-11-10T11:56:43.141Z","0.0.20-beta.0":"2022-11-11T02:43:21.478Z","0.0.20-beta.1":"2022-11-11T08:20:35.475Z","0.0.20-beta.2":"2022-11-18T06:15:29.136Z","0.0.20-beta.3":"2022-11-18T06:34:54.298Z","0.0.20-beta.4":"2022-11-23T08:17:07.523Z","0.0.20-beta.5":"2022-11-24T05:19:49.977Z","0.0.20-beta.7":"2022-11-24T06:59:41.540Z","0.0.20":"2022-11-29T06:46:34.464Z","0.0.21":"2022-11-29T11:14:35.573Z","0.0.22":"2022-11-30T03:09:11.640Z","0.0.23":"2022-12-01T08:51:20.303Z","0.0.24-beta.0":"2022-12-02T07:30:32.332Z","0.0.24-beta.1":"2022-12-02T08:19:14.067Z","0.0.24":"2022-12-14T02:04:14.336Z","0.0.25":"2022-12-15T06:59:01.040Z","0.0.26-beta.0":"2023-04-18T08:08:25.019Z","0.0.26-beta.1":"2023-04-18T08:27:33.925Z","0.0.26-beta.2":"2023-04-18T08:29:35.409Z","0.0.26-beta.3":"2023-04-18T10:16:57.627Z","0.0.26-beta.4":"2023-04-19T02:43:18.343Z","0.0.26-beta.5":"2023-04-20T06:58:01.666Z","0.0.26-beta.6":"2023-04-20T07:10:32.690Z","0.0.26-beta.7":"2023-05-08T05:31:49.642Z","0.0.26":"2023-05-09T08:19:26.156Z","0.0.27-beta.0":"2023-06-25T07:12:24.294Z","0.0.27-beta.1":"2023-06-25T08:14:03.989Z","0.0.27-beta.2":"2023-06-28T07:57:38.459Z","0.0.27-beta.3":"2023-06-28T08:52:01.575Z","0.0.27-beta.4":"2023-06-28T09:25:08.672Z","0.0.27-beta.5":"2023-06-28T09:36:38.916Z","0.0.27-beta.6":"2023-06-28T09:39:28.816Z","0.0.27":"2023-09-07T06:16:53.269Z","0.0.28":"2023-09-19T02:41:12.636Z"},"maintainers":[{"name":"whatjk","email":"13657086451@163.com"}],"description":"### 1. 安装和编译方法","readme":"# 组件开发手册\n\n### 1. 安装和编译方法\n\n```bash\n# 安装依赖包\n$ npm i\n\n# 启动开发服务器\n$ npm start\n\n# 编译生成文档\n$ npm run docs:build\n\n#编译生成组件\n$ npm run build\n```\n\n### 2. JS 编码规范\n\n#### 2.1 图片引用方式\n\n图片必须使用外部链接方式，不要内嵌 `base64` 或者 `svg` 代码。\n\n```bash\n\n# 正确\nimport newIcon from '@/Img/icon-new.svg';\n\n<div>\n  <img src={newIcon} />\n</div>\n\n\n# 错误\n<div>\n  <svg>\n    <path d=\"M299.776 997.568a90.592 ....\" />\n  </svg>\n</div>\n```\n\n#### 2.2 条件样式\n\n尽量不要将 `css` 代码写到 `react` 里面\n\n```bash\n// 错误\nconst dataStateColor = [\n  ['#F4E8DF', '#EF8839'],\n  ['#DFEFE5', '#33C669'],\n  ['#EAEAEA', '#999999'],\n  ['#F6DBDB', '#FF1515'],\n];\n\n<Tag className=\"text-color\"\n  style={{\n    backgroundColor:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][0]\n        : dataStateColor[0][0],\n    color:\n      item?.dataStatus < 4\n        ? dataStateColor[item?.dataStatus][1]\n        : dataStateColor[0][1],\n  }}\n>\n  {desc}\n</Tag>\n\n\n// 正确\n.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }\n.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }\n.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }\n.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }\n\n<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >\n  {desc}\n</Tag>\n```\n\n#### 2.3 图片命名规则\n\n对于图标使用 `icon-` 头，对于图片使用 `img-` 头。\n\n- 图标：小于 `128px` 的图像\n- 图片：大于 `128px` 的图像\n\n#### 2.4 SVG 条件色彩\n\n对于不同条件选择不同的 `svg` 图标颜色，不要使用内嵌的 `svg` 代码，可以使用条件选择图片对象。\n\n```bash\n# 错误\n<svg\n  t=\"1636686053617\"\n  className=\"icon\"\n  viewBox=\"0 0 1024 1024\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  p-id=\"1648\"\n  width=\"16\"\n  height=\"16\"\n>\n  <path\n    d=\"M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z\"\n    fill=\"#BDC1C9\"\n    p-id=\"1649\"\n    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}\n  />\n</svg>\n\n\n# 正确\nimport icon_color_a from 'img/icon_color_a'\nimport icon_color_b from 'img/icon_color_b'\n\n\n{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }\n```\n\n#### 2.5 事件处理\n\n- 页面的事件处理尽量使用`纯函数`，不要使用`匿名函数`，建议使用箭头函数。\n- 页面的事件函数传递参数时，可以用 `bind` 函数传递内部变量。\n\n```bash\n# 错误\n<div\n  onClick={(e) => {\n    e.stopPropagation();\n    onActivitySkip(item);\n  }}\n  className={classnames('activity-size', {\n    show: !item?.busiTitle,\n  })}\n>\n\n# 正确\nconst doActSkip = (item,e) =>{\n  e.stopPropagation();\n  onActivitySkip(item);\n}\n\n<div\n  onClick=doActSkip.bind(this,item)\n  className={classnames('activity-size', { show: !item?.busiTitle })}\n>\n```\n\n#### 2.6 触发区域多次定义\n\n对于 dom 对象的父子元素不要重复定义 `处理事件的函数` ，用合适的 CSS 处理触发的范围。\n\n```bash\n# 错误\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  &nbsp;{commentCount < 1 ? '' : commentCount}\n  <div className=\"hotspot-comment\" onClick={doCommon.bind(this)} />\n</div>\n\n.comment {\n  position: relative;\n}\n.hotspot-comment {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  top: -7px;\n  right: 0px;\n}\n\n\n# 正确\n<div className=\"comment\" onClick={doCommon.bind(this)} >\n  <img src={icon_comment_c} />\n  {commentCount < 1 ? '' : commentCount}\n</div>\n\n.comment {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### 3. CSS 编码规范\n\n#### 3.1 组件和对象命名\n\n- 组件命令使用 `ss` 开头, PC 端组件用 `ssp`，移动端组件使用 `ssm`\n- 组件内部的一类子元素用 g 命名，表示全局对象\n- 全局对象内部的组件使用 m 命名，表示模块\n- 模块内部的小部件使用 u 命名，表示单元\n- 对于函数以 `fn` 命名\n\n```bash\n.ssm-circles-item {\n\n  .g-msg {\n    ...\n\n    .m-lt { ... }\n\n    .m-rt { ... }\n\n    .u-color {\n      color: #2c7ef8;\n    }\n\n  }\n\n  .g-title { ... }\n\n  .g-circle { ... }\n\n  .g-operate { ... }\n\n  .g-comments { ... }\n\n  .fn-hide {\n    display: none!important;\n  }\n}\n\n\nreturn (\n    <div className=\"ssm-circles-item\">\n      {item && (\n        <>\n          <div className=\"g-msg\">\n            <div className=\"m-lt\">...</div>\n            <div className=\"m-rt\">...</div>\n          </div>\n\n          <div className=\"g-title\" >...</div>\n\n          {item?.images.length ? (\n            <div className=\"g-circle\">...</div>\n          ) : null}\n\n          <div className=\"g-operate\">...</div>\n          <div className=\"g-comments\" >...</div>\n        </>\n      )}\n    </div>\n  )\n```\n\n#### 3.2 classnames\n\n使用 `classnames` 库连接的类尽量写到一起，并且用 `&` 符号。\n\n```bash\n<div className={classnames('m-lt', {\n    'u-color': !item?.busiTitle,\n  })} >\n\n\n.m-lt {\n  ....\n\n  &.u-color {\n    ....\n  }\n}\n\n```\n\n#### 3.3 多行代码层级\n\n书写多行 dom 结构代码时，不要将对象结束符 `>` 写到与开始符 `<` 相同的层级，否则会影响代码的可读性，即无法折叠。\n\n```bash\n# 错误\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n>\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })} >\n\n# 正确\n<div className={classnames('g-comments', {\n        hide: !likeFriend.length && !commentNews.length,\n      })}\n  >\n```\n\n#### 3.4 对象属性书写顺序\n\n在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。\n\n```bash\n# 错误\n<Image onClick={giveALike.bind(this)}\n    className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n  />\n\n\n# 正确\n<Image className=\"m-icon-head\"\n    src={critic?.fromUserAvatar || avatarPng}\n    fit=\"cover\"\n    onClick={giveALike.bind(this)}\n  />\n```\n","readmeFilename":"README.md"}