diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c75e4b861d9b3fdd3258c555752f8daa402c7179 Binary files /dev/null and b/.DS_Store differ diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000000000000000000000000000000000000..6d99c2319700318a3c7b0c6c16adba90d94ee2d5 --- /dev/null +++ b/.babelrc @@ -0,0 +1,30 @@ +{ + "sourceMaps": true, + "presets": [ + [ + "@babel/preset-typescript", + { + "isTSX": true, + "allExtensions": true + } + ], + "@babel/preset-react", + [ + "@babel/preset-env", + { + "targets": { + "node": "10.13.0" + } + } + ] + ], + "plugins": [ + [ + "import", + { + "libraryName": "antd", + "style": "css" + } + ] + ] +} diff --git a/.commitlintrc.js b/.commitlintrc.js new file mode 100644 index 0000000000000000000000000000000000000000..72120c163d77c19d94628abd432559c308d59591 --- /dev/null +++ b/.commitlintrc.js @@ -0,0 +1,33 @@ +/** + * @file commitlint 配置 + * commit message: (): (注意冒号后面有空格) + * type 标识commit类别 + * scope 标识commit影响范围 + * subject 本次修改的简单描述 + */ +module.exports = { + extends: ['@commitlint/config-conventional'], + rules: { + 'type-enum': [ + 2, + 'always', + [ + 'init', // 初始提交 + 'feat', // 新功能（feature） + 'perf', // 优化 + 'fix', // 修补bug + 'docs', // 文档 + 'style', // 格式 + 'refactor', // 重构 + 'build', // 编译构建 + 'test', // 增加测试 + 'revert', // 回滚 + 'chore' // 其他改动 + ] + ], + 'type-empty': [2, 'never'], + 'subject-empty': [2, 'never'], + 'subject-full-stop': [0, 'never'], + 'subject-case': [0, 'never'] + } +} diff --git a/.cz-config.js b/.cz-config.js new file mode 100644 index 0000000000000000000000000000000000000000..ac772823ba1388ff11b811199bcb69db40ae4005 --- /dev/null +++ b/.cz-config.js @@ -0,0 +1,30 @@ +'use strict' +module.exports = { + types: [ + { value: 'init', name: '初始化' }, + { value: 'feat', name: '新增: 新功能' }, + { value: 'fix', name: '修复: 修复一个Bug' }, + { value: 'docs', name: '文档: 变更的只有文档' }, + { value: 'style', name: '格式: 空格, 分号等格式修复' }, + { value: 'refactor', name: '重构: 代码重构，注意和特性、修复区分开' }, + { value: 'perf', name: '性能: 提升性能' }, + { value: 'test', name: '测试: 添加一个测试' }, + { value: 'build', name: '工具: 开发工具变动(构建、脚手架工具等)' }, + { value: 'revert', name: '回滚: 代码回退' }, + { value: 'chore', name: '其他' } + ], + scopes: [{ name: 'javascript' }, { name: 'typescript' }, { name: 'React' }, { name: 'node' }], + messages: { + type: '选择一种你的提交类型:', + scope: '选择一个scope (可选):', + customScope: 'Denote the SCOPE of this change:', + subject: '短说明:\n', + body: '长说明，使用"|"换行(可选)：\n', + breaking: '非兼容性说明 (可选):\n', + footer: '关联关闭的issue，例如：#31, #34(可选):\n', + confirmCommit: '确定提交说明?(yes/no)' + }, + allowCustomScopes: true, + allowBreakingChanges: ['特性', '修复'], + subjectLimit: 100 +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000000000000000000000000000000000..c6c8b3621938a4691225a870a59bf382af1883dd --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000000000000000000000000000000000000..f574bbc264e3ce7a35f8589473d31448b0769b94 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,71 @@ +{ + "env": { + "browser": true, + "es2021": true, + "jest": true, + "node": true, + "commonjs": true + }, + "extends": [ + "airbnb", + "plugin:compat/recommended", + "plugin:jest/recommended", + "plugin:react/recommended", + "plugin:import/typescript", + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": [ + "react", + "babel", + "jest", + "react-hooks", + "@typescript-eslint" + ], + "settings": { + "react": { + "version": "16.13.1" + }, + "polyfills": [ + "Promise" + ] + }, + "rules": { + "import/no-unresolved": 1, + "import/no-cycle": 1, + "import/no-extraneous-dependencies": 1, + "@typescript-eslint/no-empty-function": 1, + "typescript-eslint/no-explicit-any": 0, + "react/jsx-props-no-spreading": 0, + "no-use-before-define": "off", + "react/display-name": 0, + "import/extensions": 0, + "comma-dangle": [ + "error", + "never" + ], + "space-before-function-paren": [ + 0, + "always" + ], + "react/jsx-filename-extension": [ + 2, + { + "extensions": [ + ".js", + ".jsx", + ".ts", + ".tsx" + ] + } + ] + } +} diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index eacf3549280cb4838fad7f51e49c39de15f51712..0000000000000000000000000000000000000000 --- a/.eslintrc.js +++ /dev/null @@ -1,25 +0,0 @@ -module.exports = { - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - "eslint:recommended", - "plugin:react/recommended", - "plugin:@typescript-eslint/recommended" - ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 12, - "sourceType": "module" - }, - "plugins": [ - "react", - "@typescript-eslint" - ], - "rules": { - } -}; diff --git a/.fatherrc.js b/.fatherrc.js deleted file mode 100644 index de0d772a0bb00abcb8bae0af8b302ce9d32f4f36..0000000000000000000000000000000000000000 --- a/.fatherrc.js +++ /dev/null @@ -1,19 +0,0 @@ - -export default { - entry: 'src/index.tsx', - cjs: "rollup", - cssModules: true, - injectCSS: true, - lessInBabelMode: true, - doc: { - title: "猎户座+ 配置文档", - typescript: true, - codeSandbox: false, - setWebpackConfig: { - publicPath: '/public', - }, - filterComponents: (files) => - //This overrides the default filtering of components - files.filter(filepath => /[w-]*.(js|jsx|ts|tsx)$/.test(filepath)) - } -} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000000000000000000000000000000000..51fdad212d7d7852c2eeb93a3c0868f354908b71 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "singleQuote": true, + "printWidth": 120, + "useTabs": false, + "tabWidth": 2, + "semi": false, + "trailingComma": "none" +} diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000000000000000000000000000000000000..1cca3d177ec29625067a9e40ed8baf8811348444 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,10 @@ +*.js +*.tsx +*.ts +*.json +*.png +*.eot +*.ttf +*.woff +*.css +src/main.less diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000000000000000000000000000000000000..13abf1ca0647dd485002423d9f9faa3bf54f3e5a --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,10 @@ +module.exports = { + extends: ['stylelint-config-standard', 'stylelint-config-rational-order'], + plugins: ['stylelint-order'], + rules: { + 'selector-pseudo-class-no-unknown': null, + 'no-descending-specificity': null, + 'selector-class-pattern': null, + 'property-no-unknown': null + } +}; diff --git a/package.json b/package.json index 6edd3c8e85d2f4f8a31a18e5433ae029444ee546..325df468309efcb357a22e5fd27188776038eae3 100644 --- a/package.json +++ b/package.json @@ -5,64 +5,112 @@ "main": "dist/index.js", "types": "dist/src/index.d.ts", "files": [ - "dist/*" + "dist" ], "scripts": { - "dev": "father doc dev", - "build": "father build", - "docs": "father doc build", - "lint": "eslint src --ext .ts", + "build": "npm run clear && rollup -c", + "clear": "rm -rf dist", "test": "jest", - "link": "npm link ccms" + "link": "npm link ccms", + "lint": "npm run lint:code && npm run lint:style", + "lint:code": "eslint --fix **/*.{js,ts,jsx,tsx}", + "lint:style": "stylelint --fix src/**/*.less --custom-syntax postcss-less", + "prettier": "prettier -c --write **/*", + "commit": "git-cz" + }, + "husky": { + "hooks": { + "commit-msg": "commitlint --env HUSKY_GIT_PARAMS", + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "*.{js,jsx,ts,tsx}": [ + "eslint --fix", + "git add" + ], + "*.{css,less,scss,sass}": [ + "stylelint --fix --custom-syntax postcss-less", + "git add" + ], + "*.{json,html,md,markdown}": [ + "prettier --write", + "git add -f" + ] + }, + "config": { + "commitizen": { + "path": "./node_modules/cz-customizable" + } }, "author": "niuweb", "license": "MIT", "devDependencies": { - "@babel/core": "^7.11.4", + "@babel/core": "^7.16.12", "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/plugin-proposal-decorators": "^7.10.5", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-transform-runtime": "^7.11.0", - "@babel/preset-env": "^7.11.0", - "@babel/preset-react": "^7.10.4", + "@babel/preset-env": "^7.16.11", + "@babel/preset-react": "^7.16.7", + "@babel/preset-typescript": "^7.16.7", + "@commitlint/cli": "^9.0.1", + "@commitlint/config-conventional": "^9.0.1", + "@rollup/plugin-babel": "^5.3.0", + "@rollup/plugin-commonjs": "^21.0.1", + "@rollup/plugin-json": "^4.1.0", + "@rollup/plugin-node-resolve": "^13.1.3", "@testing-library/react": "^11.0.4", - "@types/jest": "^26.0.14", + "@types/jest": "^27.4.0", + "@types/lodash": "^4.14.178", + "@types/marked": "^1.2.0", "@types/node": "^14.11.2", - "@types/react": "^16.14.11", + "@types/react": "^16.9.46", + "@types/react-color": "^3.0.6", "@types/react-dom": "^16.9.8", "@types/react-loadable": "^5.5.3", + "@types/react-router-dom": "^5.1.5", "@types/react-test-renderer": "^16.9.3", - "@typescript-eslint/eslint-plugin": "^4.15.1", - "@typescript-eslint/parser": "^4.15.1", + "@typescript-eslint/eslint-plugin": "^5.10.1", + "@typescript-eslint/parser": "^5.10.1", "awesome-typescript-loader": "^5.2.1", "babel-jest": "^26.3.0", - "babel-loader": "^8.1.0", - "babel-plugin-import": "^1.13.0", - "css-loader": "^4.3.0", - "eslint": "^7.17.0", - "eslint-config-standard": "^16.0.2", - "eslint-plugin-import": "^2.22.1", + "babel-plugin-import": "^1.13.3", + "commitizen": "^4.2.4", + "commitlint-config-cz": "^0.13.2", + "cz-customizable": "^6.3.0", + "eslint": "^7.32.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-babel": "^5.3.1", + "eslint-plugin-compat": "^4.0.1", + "eslint-plugin-import": "^2.25.4", + "eslint-plugin-jest": "^26.0.0", + "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-node": "^11.1.0", - "eslint-plugin-promise": "^4.2.1", - "eslint-plugin-react": "^7.24.0", - "express": "^4.17.1", - "father": "^2.29.11", - "html-webpack-plugin": "^4.5.0", - "identity-obj-proxy": "^3.0.0", - "jest": "^26.4.2", - "less": "^3.12.2", - "less-loader": "^7.0.1", - "react-docgen": "^5.3.1", - "react-test-renderer": "^16.13.1", - "style-loader": "^1.2.1", - "ts-jest": "^26.4.0", - "typedoc": "^0.19.2", - "typescript": "^4.0.2", - "webpack": "^4.44.2", - "webpack-bundle-analyzer": "^3.9.0", - "webpack-cli": "^3.3.12", - "webpack-dev-server": "^3.11.0", - "webpack-merge": "^5.1.4" + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-promise": "^4.3.1", + "eslint-plugin-react": "^7.28.0", + "eslint-plugin-react-hooks": "^4.3.0", + "execa": "^4.1.0", + "husky": "^4.2.5", + "jest": "^27.4.7", + "less": "^4.1.2", + "lint-staged": "^10.2.11", + "postcss": "^8.4.5", + "postcss-less": "^6.0.0", + "prettier": "^2.5.1", + "rollup": "^2.66.0", + "rollup-plugin-eslint": "^7.0.0", + "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-typescript2": "^0.31.1", + "stylelint": "^14.4.0", + "stylelint-config-rational-order": "^0.1.2", + "stylelint-config-standard": "^25.0.0", + "stylelint-order": "^5.0.0", + "ts-jest": "^27.1.3", + "typescript": "^4.5.5" }, "dependencies": { "@ant-design/icons": "^4.3.0", @@ -70,8 +118,8 @@ "@types/react-router-dom": "^5.1.5", "antd": "^4.14.1", "axios": "^0.20.0", - "ccms": "*", "moment": "^2.29.0", + "qiankun": "^2.5.1", "rc-table": "^7.9.10", "react": "^16.13.1", "react-color": "^2.19.3", diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000000000000000000000000000000000000..ce15ed743e94b912aa376ad7a895c28481a41282 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,54 @@ +import path from 'path' +import ts from 'rollup-plugin-typescript2' +import { nodeResolve } from '@rollup/plugin-node-resolve' + +import { babel } from '@rollup/plugin-babel' +import commonjs from '@rollup/plugin-commonjs' +import { eslint } from 'rollup-plugin-eslint' +import json from '@rollup/plugin-json' +import postcss from 'rollup-plugin-postcss' +import { terser } from 'rollup-plugin-terser' + +export default { + input: 'src/index.tsx', + output: [ + { + format: 'cjs', + file: path.resolve('dist/index.js') + } + ], + onwarn(warning) { + if (warning.code === 'THIS_IS_UNDEFINED') { + return + } + console.error(warning.message) + }, + plugins: [ + // eslint({ + // throwOnError: true, + // exclude: ['node_modules/**', 'lib/**', 'dist/**'] + // }), + postcss({ + extensions: ['.css', '.less'], + modules: true // 启用CSS模块 + }), + json(), + ts({ + tsconfig: path.resolve(__dirname, 'tsconfig.json') + }), + babel({ + babelHelpers: 'runtime', + exclude: 'node_modules/**', // 只编译我们的源代码 + plugins: ['@babel/plugin-transform-runtime'] + }), + commonjs(), + nodeResolve({ + extensions: ['.js', '.ts', '.tsx'] + }), + terser() + ], + external: ['react', 'react-dom', 'ccms', '@ant-design/icons', 'react-color', 'antd'], + watch: { + include: 'src/**' + } +} diff --git a/src/components/detail/common.ts b/src/components/detail/common.ts index 2dcb12bc4e8d666b35a421d20afa62a844faa578..c7c4b037c00b511694ad71579a4f4f7c8910a01e 100644 --- a/src/components/detail/common.ts +++ b/src/components/detail/common.ts @@ -1,3 +1,4 @@ + import { FormItemProps } from "antd"; export function formItemLayout(layout: 'horizontal' | 'vertical' | 'inline', fieldType: string, label: string | undefined) { @@ -61,10 +62,12 @@ export function computedItemStyle(columns: any, layout: string) { export function computedGapStyle(columns: any, type: string) { const setStyle = {} - const gap = (Number(columns?.gap || columns?.rowGap) || 0)/2 + const gap = (Number(columns?.gap || columns?.rowGap) || 0) / 2 if (type === 'row') { Object.assign(setStyle, { + flexFlow: 'row wrap', + display: 'flex', rowGap: `${gap}px`, marginLeft: `-${gap / 2}px`, marginRight: `-${gap / 2}px` diff --git a/src/components/detail/group/index.less b/src/components/detail/group/index.less index 7afe53968cec2573732a0f29f178ab2d60e457ef..f374c1517ae728d58b04cc0e6fe31881bd68d43e 100644 --- a/src/components/detail/group/index.less +++ b/src/components/detail/group/index.less @@ -1,30 +1,41 @@ .ccms-antd-mini-detail-group-row { - position : relative; - display : flex; - box-orient : horizontal; + position: relative; + display: flex; + box-orient: horizontal; box-direction: normal; - flex-flow : row wrap; - width : 100%; + flex-flow: row wrap; + width: 100%; .detail-group-col { + position: relative; + flex: 0 0 100%; flex-direction: row; + max-width: 100%; + min-height: 1px; // display: flex; - margin-bottom : 15px; + margin-bottom: 15px; flex-direction: row; - position : relative; - max-width : 100%; + position: relative; + max-width: 100%; flex: 0 0 100%; - min-height : 1px; + min-height: 1px; } .detail-group-content { - &>:global(.ant-form-item){ + &> :global(.ant-form-item) { margin-bottom: 0 !important; } + + display: flex; flex-direction: row; - display : flex; - .ccms-antd-mini-detail-gruop-title{ + + .ccms-antd-mini-detail-gruop-title { white-space: nowrap; } } -} \ No newline at end of file + + &>.detail-group-children { + display: flex; + word-break: break-all; + } +} diff --git a/src/components/detail/group/index.tsx b/src/components/detail/group/index.tsx index c6411aa81843ce76818852fe0375b94de575ba97..f15ba41214fd0bee8cc51431ef2e181e9264c704 100644 --- a/src/components/detail/group/index.tsx +++ b/src/components/detail/group/index.tsx @@ -1,56 +1,45 @@ -import React from "react"; -import { DetailGroupField } from 'ccms'; -import { IGroupField, GroupFieldConfig } from "ccms/dist/src/components/detail/group"; -import { IDetailItem } from "ccms/dist/src/steps/detail"; -import { Col, Row } from "antd" -import getALLComponents from '../' +import React from 'react' +import { DetailGroupField } from 'ccms' +import { IGroupField, GroupFieldConfig } from 'ccms/dist/src/components/detail/group' +import { IDetailItem } from 'ccms/dist/src/steps/detail' +import { Col, Row } from 'antd' +import getALLComponents from '..' import styles from './index.less' -import { computedItemStyle, computedGapStyle } from "../common"; +import { computedItemStyle, computedGapStyle } from '../common' -export const PropsType = (props: GroupFieldConfig) => { }; +export const PropsType = (props: GroupFieldConfig) => {} export default class GroupFieldComponent extends DetailGroupField { getALLComponents = (type: any) => getALLComponents[type] renderComponent = (props: IGroupField) => { - const { - children, - columns - } = props + const { children, columns } = props const gap = computedGapStyle(columns, 'row') return (
+ className={styles['ccms-antd-mini-detail-group-row']} + > {children}
) } renderItemComponent = (props: IDetailItem) => { - const { - layout, - label, - styles: itemstyle, - columns, - fieldType, - children - } = props + const { layout, label, styles: itemstyle, columns, fieldType, children } = props const colStyle = computedItemStyle(columns, layout) - + return ( -
+
-
{label}
-
{children}
+
+ {children} +
) } -} \ No newline at end of file +} diff --git a/src/components/detail/importSubform/index.less b/src/components/detail/importSubform/index.less index 3613bb849f2f3dab990c51eaa232378d203ee689..9cb06a336ec806088965de720433816fde896cc1 100644 --- a/src/components/detail/importSubform/index.less +++ b/src/components/detail/importSubform/index.less @@ -1,38 +1,60 @@ -.ccms-antd-mini-form-import_subform, .ccms-antd-mini-detail-group { +.ccms-antd-mini-form-import_subform, +.ccms-antd-mini-detail-group { margin-bottom: 0 !important; - &>:global(.ant-form-item) { + & > :global(.ant-form-item) { margin-bottom: 0 !important; } - &>:global(.ant-form-item-label) { + & > :global(.ant-form-item-label) { + flex: 0 0 auto !important; width: calc(100% + 16px) !important; max-width: calc(100% + 16px) !important; margin-left: -8px !important; padding: 2px 8px !important; - flex: 0 0 auto !important; - background-color: #00000008 !important; font-weight: bold; + background-color: #00000008 !important; } - &>:global(.ant-form-item-control) { - margin-left: -8px !important; + + & > :global(.ant-form-item-control) { + max-width: calc(100% + 16px) !important; margin-right: -8px !important; + margin-left: -8px !important; padding: 8px !important; - max-width: calc(100% + 16px) !important; background-color: #00000004 !important; } - &>:global(.ant-form-item-control):first-child { + + & > :global(.ant-form-item-control):first-child { padding-top: 0 !important; - background-color: #00000000 !important; + background-color: #0000 !important; } } -.ccms-antd-mini-form-form, .ccms-antd-mini-form-object { - &>:global(.ant-form-item-control) { - &>:global(.ant-form-item-control-input) { - &>:global(.ant-form-item-control-input-content) { +.ccms-antd-mini-form-form, +.ccms-antd-mini-form-object { + & > :global(.ant-form-item-control) { + & > :global(.ant-form-item-control-input) { + & > :global(.ant-form-item-control-input-content) { min-height: 24px !important; } } } -} \ No newline at end of file +} + +.ccms-antd-mini-form-group-row { + position: relative; + display: flex; + box-orient: horizontal; + box-direction: normal; + flex-flow: row wrap; + width: 100%; +} + +.form-group-col { + position: relative; + flex: 0 0 100%; + flex-direction: row; + max-width: 100%; + min-height: 1px; + margin-bottom: 0; +} diff --git a/src/components/detail/importSubform/index.tsx b/src/components/detail/importSubform/index.tsx index ad4096dc92e77351393597f78eeccf1427283d30..6f7933f1098b72a62f256a3459ec70740b7decd6 100644 --- a/src/components/detail/importSubform/index.tsx +++ b/src/components/detail/importSubform/index.tsx @@ -1,12 +1,13 @@ -import React from "react"; -import { DetailImportSubformField } from "ccms"; -import { IImportSubformField } from "ccms/dist/src/components/detail/importSubform"; -import { Display } from "ccms/dist/src/components/formFields/common"; -import { IDetailItem } from "ccms/dist/src/steps/detail"; +import React from 'react' +import { DetailImportSubformField } from 'ccms' +import { IImportSubformField } from 'ccms/dist/src/components/detail/importSubform' +import { Display } from 'ccms/dist/src/components/formFields/common' +import { IDetailItem } from 'ccms/dist/src/steps/detail' +import { Form } from 'antd' import { display as getALLComponents } from '../../formFields' -import InterfaceHelper from "../../../util/interface"; -import { Form } from "antd"; +import InterfaceHelper from '../../../util/interface' import styles from './index.less' +import { formItemLayout, computedItemStyle, computedGapStyle } from '../../formFields/common' export default class ImportSubformField extends DetailImportSubformField { getALLComponents = (type: any): typeof Display => getALLComponents[type] @@ -14,11 +15,15 @@ export default class ImportSubformField extends DetailImportSubformField { interfaceHelper = new InterfaceHelper() renderComponent = (props: IImportSubformField) => { - const { - children - } = props + const { columns, children } = props + const gap = computedGapStyle(columns, 'row') return ( -
+
{children}
) @@ -30,23 +35,29 @@ export default class ImportSubformField extends DetailImportSubformField { * @param props */ renderItemComponent = (props: IDetailItem) => { - const { - key, - label, - visitable, - fieldType, - children - } = props + const { key, label, columns, layout, visitable, fieldType, children } = props + const colStyle = computedItemStyle(columns, layout, visitable) + const itemStyle = visitable ? {} : { overflow: 'hidden', width: 0, height: 0, margin: 0, padding: 0 } + if (columns?.type === 'width' && columns?.value && columns.wrap) { + Object.assign(itemStyle, { width: columns.value }) + } return ( - - {children} - + + {children} + +
) } -} \ No newline at end of file +} diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx index ab04a761cac262f70d6c02ce40981fbe13b148db..6c0db97c9b8d2b1aee3164443e7f0b0c84adce1b 100644 --- a/src/components/detail/index.tsx +++ b/src/components/detail/index.tsx @@ -13,11 +13,11 @@ export default { text: TextField, group: GroupField, statement: StatementDetail, + image: ImageDetail, detail_enum: EnumDetailComponent, import_subform: ImportSubformField, custom: CustomFieldComponent, table: TableFieldComponent, detail_info: InfoDetail, - detail_color: ColorDetail, - image: ImageDetail + detail_color: ColorDetail } diff --git a/src/components/detail/statement/index.tsx b/src/components/detail/statement/index.tsx index d62eeb4b86605068d79a510f3b3b138c7bd9366c..26f3542830e5842d4f10447070b162111e89de5d 100644 --- a/src/components/detail/statement/index.tsx +++ b/src/components/detail/statement/index.tsx @@ -10,7 +10,7 @@ export default class StatementDetailComponent extends DetailStatementField { content } = props return ( -
{content}
+ <>{content} ) } } diff --git a/src/components/detail/text/index.tsx b/src/components/detail/text/index.tsx index 4d55a5d559dd7bfdac42583f16842e73776b81af..ab62debd3e5fbe781a41f1429db0deff5c066409 100644 --- a/src/components/detail/text/index.tsx +++ b/src/components/detail/text/index.tsx @@ -10,7 +10,7 @@ export default class TextFieldComponent extends DetailTextField { value } = props return ( -
{value}
+ <>{value} ) } } diff --git a/src/components/formFields/color/index.less b/src/components/formFields/color/index.less index b5872be2a6e7b6dde6e4d8fa00c88564bc457254..e08444847b415954710c4660fa3cc4e313544efc 100644 --- a/src/components/formFields/color/index.less +++ b/src/components/formFields/color/index.less @@ -1,8 +1,8 @@ .ccms-antd-color-preview { width: 22px; height: 24px; - border: 1px solid #d9d9d9; margin-left: -6px; + border: 1px solid #d9d9d9; border-radius: 2px; } @@ -10,15 +10,15 @@ position: absolute; z-index: 2; - &>.mask { + & > .mask { position: fixed; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; } - &>.picker { + & > .picker { padding: 6px 1px; } -} \ No newline at end of file +} diff --git a/src/components/formFields/common.ts b/src/components/formFields/common.ts index 77d0b13301df668a4d43fe302838fbb21f0a0a20..8f351e37dd587ee01c58cadeacacbb233d03525c 100644 --- a/src/components/formFields/common.ts +++ b/src/components/formFields/common.ts @@ -57,6 +57,8 @@ export function computedGapStyle(columns: any, type: string) { if (type === 'row') { Object.assign(setStyle, { + flexFlow: 'row wrap', + display: 'flex', rowGap: `${rowgap}px`, marginLeft: `-${gap}px`, marginRight: `-${gap}px` @@ -64,4 +66,4 @@ export function computedGapStyle(columns: any, type: string) { } return setStyle -} \ No newline at end of file +} diff --git a/src/components/formFields/datetime/index.less b/src/components/formFields/datetime/index.less index 4fb9f3d128b44414a9c79adbc99219e97cd9c11f..84946e1a93894ba320981e7bab45d0d17d7c83ae 100644 --- a/src/components/formFields/datetime/index.less +++ b/src/components/formFields/datetime/index.less @@ -1,4 +1,4 @@ -.picker-readonly{ - border-color: #d9d9d9 !important; - background: #fff !important; -} \ No newline at end of file +.picker-readonly { + background: #fff !important; + border-color: #d9d9d9 !important; +} diff --git a/src/components/formFields/datetimeRange/index.less b/src/components/formFields/datetimeRange/index.less index 4fb9f3d128b44414a9c79adbc99219e97cd9c11f..84946e1a93894ba320981e7bab45d0d17d7c83ae 100644 --- a/src/components/formFields/datetimeRange/index.less +++ b/src/components/formFields/datetimeRange/index.less @@ -1,4 +1,4 @@ -.picker-readonly{ - border-color: #d9d9d9 !important; - background: #fff !important; -} \ No newline at end of file +.picker-readonly { + background: #fff !important; + border-color: #d9d9d9 !important; +} diff --git a/src/components/formFields/form/display.tsx b/src/components/formFields/form/display.tsx new file mode 100644 index 0000000000000000000000000000000000000000..188ee5403eced1fbe12f6a23b2f282e48da2bc0e --- /dev/null +++ b/src/components/formFields/form/display.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import { FormDisplay } from 'ccms' +import { Form, Collapse, Space } from 'antd' +import { IFormField, IFormFieldItem, IFormFieldItemField } from 'ccms/dist/src/components/formFields/form/display' +import { display as getALLComponents } from '..' +import { formItemLayout } from '../common' + +export default class FormDisplayComponent extends FormDisplay { + getALLComponents = (type: any) => getALLComponents[type] + + remove: () => Promise = async () => {} + + renderItemFieldComponent = (props: IFormFieldItemField) => { + const { label, fieldType, children } = props + return ( + + {children} + + ) + } + + renderItemComponent = (props: IFormFieldItem) => { + const { title, index, canCollapse, children } = props + + return ( + {title}
} + key={index} + forceRender + showArrow={!!canCollapse} + > + {children} + + ) + } + + renderComponent = (props: IFormField) => { + const { canCollapse, children } = props + + const collapsePaneldDefaultActiveKeys = Array.from(Array(children.length), (v, k) => k) + const CollapseProps = canCollapse + ? { + accordion: true + } + : { + activeKey: collapsePaneldDefaultActiveKeys + } + return ( + + + {children} + + + ) + } +} diff --git a/src/components/formFields/group/display.tsx b/src/components/formFields/group/display.tsx new file mode 100644 index 0000000000000000000000000000000000000000..33bd3c22ee079316abe2d5763a9eb4ade44c19ab --- /dev/null +++ b/src/components/formFields/group/display.tsx @@ -0,0 +1,58 @@ +import React from 'react' +import { GroupDisplay } from 'ccms' +import { IGroupField, GroupFieldConfig } from 'ccms/dist/src/components/formFields/group' +import { IFormItem } from 'ccms/dist/src/steps/form' +import { Form } from 'antd' +import { display as getALLComponents } from '..' +import styles from './index.less' +import { formItemLayout, computedItemStyle, computedGapStyle } from '../common' + +export const PropsType = (props: GroupFieldConfig) => {} + +export default class GroupDisplayComponent extends GroupDisplay { + getALLComponents = (type: any) => getALLComponents[type] + + renderComponent = (props: IGroupField) => { + const { columns, children } = props + const gap = computedGapStyle(columns, 'row') + + return ( +
+ {children} +
+ ) + } + + renderItemComponent = (props: IFormItem) => { + const { key, columns, layout, label, visitable, fieldType, children } = props + + const colStyle = computedItemStyle(columns, layout, visitable) + const itemStyle = visitable ? {} : { overflow: 'hidden', width: 0, height: 0, margin: 0, padding: 0 } + if (columns?.type === 'width' && columns?.value && columns.wrap) { + Object.assign(itemStyle, { width: columns.value }) + } + + return ( +
+ + {children} + +
+ ) + } +} diff --git a/src/components/formFields/group/index.less b/src/components/formFields/group/index.less index a6be0ee30a8ddcba09878edd0491307587127385..2037e725739067e03410e70b354422eeec1111f9 100644 --- a/src/components/formFields/group/index.less +++ b/src/components/formFields/group/index.less @@ -1,63 +1,71 @@ -.ccms-antd-mini-form-import_subform, .ccms-antd-mini-form-group { +.ccms-antd-mini-form-import_subform, +.ccms-antd-mini-form-group { margin-bottom: 0 !important; - &>:global(.ant-form-item-label) { + + & > :global(.ant-form-item-label) { + flex: 0 0 auto !important; width: calc(100% + 16px) !important; max-width: calc(100% + 16px) !important; margin-left: -8px !important; padding: 2px 8px !important; - flex: 0 0 auto !important; - background-color: #00000008 !important; font-weight: bold; + background-color: #00000008 !important; } - &>:global(.ant-form-item-control) { - margin-left: -8px !important; + + & > :global(.ant-form-item-control) { + max-width: calc(100% + 16px) !important; margin-right: -8px !important; + margin-left: -8px !important; padding: 8px !important; - max-width: calc(100% + 16px) !important; background-color: #00000004 !important; } - &>:global(.ant-form-item-control):first-child { + + & > :global(.ant-form-item-control):first-child { padding-top: 0 !important; - background-color: #00000000 !important; + background-color: #0000 !important; } + .form-group-content { + display: flex; flex-direction: row; - display : flex; margin-bottom: 0; } } -.ccms-antd-mini-form-import_subform> .ant-col:first-child, .ccms-antd-mini-form-group > .ant-col:first-child{ + +.ccms-antd-mini-form-import_subform > .ant-col:first-child, +.ccms-antd-mini-form-group > .ant-col:first-child { font-weight: bold; } -.ccms-antd-mini-form-form, .ccms-antd-mini-form-object { - &>:global(.ant-form-item-control) { - &>:global(.ant-form-item-control-input) { - &>:global(.ant-form-item-control-input-content) { + +.ccms-antd-mini-form-form, +.ccms-antd-mini-form-object { + & > :global(.ant-form-item-control) { + & > :global(.ant-form-item-control-input) { + & > :global(.ant-form-item-control-input-content) { min-height: 24px !important; } } } } + .ccms-antd-mini-form-desc:not(:last-child) { - margin-bottom: 0px!important; + margin-bottom: 0 !important; } .ccms-antd-mini-form-group-row { - position : relative; - display : flex; - box-orient : horizontal; + position: relative; + display: flex; + box-orient: horizontal; box-direction: normal; - flex-flow : row wrap; - width : 100%; - + flex-flow: row wrap; + width: 100%; } .form-group-col { - flex-direction: row; - margin-bottom : 0; - flex-direction: row; - position : relative; - max-width : 100%; - min-height : 1px; + position: relative; flex: 0 0 100%; + flex-direction: row; + max-width: 100%; + min-height: 1px; + margin-bottom: 0; } diff --git a/src/components/formFields/hidden/display.tsx b/src/components/formFields/hidden/display.tsx new file mode 100644 index 0000000000000000000000000000000000000000..1beed5f384dce98987a09703c69ef2219f0a0e29 --- /dev/null +++ b/src/components/formFields/hidden/display.tsx @@ -0,0 +1,4 @@ +import { HiddenDisplay } from 'ccms' + +export default class HiddenDisplayComponent extends HiddenDisplay { +} diff --git a/src/components/formFields/importSubform/display.tsx b/src/components/formFields/importSubform/display.tsx new file mode 100644 index 0000000000000000000000000000000000000000..eeee564230f9ed0872c3e29c62ba5f46dd37ebdd --- /dev/null +++ b/src/components/formFields/importSubform/display.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import { ImportSubformDisplay } from 'ccms' +import { IImportSubformField } from 'ccms/dist/src/components/detail/importSubform' +import { Display } from 'ccms/dist/src/components/formFields/common' +import { IDetailItem } from 'ccms/dist/src/steps/detail' +import { Form } from 'antd' +import { display as getALLComponents } from '..' +import InterfaceHelper from '../../../util/interface' +import styles from './index.less' +import { computedItemStyle, computedGapStyle } from '../common' + +export default class ImportSubformDisplayComponent extends ImportSubformDisplay { + getALLComponents = (type: any): typeof Display => getALLComponents[type] + + interfaceHelper = new InterfaceHelper() + + renderComponent = (props: IImportSubformField) => { + const { columns, children } = props + const gap = computedGapStyle(columns, 'row') + + return ( +
+ {children} +
+ ) + } + + /** + * 表单项组件 - UI渲染方法 + * 各UI库需重写该方法 + * @param props + */ + renderItemComponent = (props: IDetailItem) => { + const { key, label, columns, layout, visitable, fieldType, children } = props + + const colStyle = computedItemStyle(columns, layout, visitable) + const itemStyle = visitable ? {} : { overflow: 'hidden', width: 0, height: 0, margin: 0, padding: 0 } + if (columns?.type === 'width' && columns?.value && columns.wrap) { + Object.assign(itemStyle, { width: columns.value }) + } + + return ( +
+ + {children} + +
+ ) + } +} diff --git a/src/components/formFields/importSubform/index.less b/src/components/formFields/importSubform/index.less index 5075ed3ff3821469a2881055ad998d87c081b1a6..251937dfa19aaea524e0b971a340447028391e9d 100644 --- a/src/components/formFields/importSubform/index.less +++ b/src/components/formFields/importSubform/index.less @@ -1,60 +1,62 @@ -.ccms-antd-mini-form-import_subform, .ccms-antd-mini-form-group { +.ccms-antd-mini-form-import_subform, +.ccms-antd-mini-form-group { margin-bottom: 0 !important; - &>:global(.ant-form-item-label) { + & > :global(.ant-form-item-label) { + flex: 0 0 auto !important; width: calc(100% + 16px) !important; max-width: calc(100% + 16px) !important; margin-left: -8px !important; padding: 2px 8px !important; - flex: 0 0 auto !important; - background-color: #00000008 !important; font-weight: bold; + background-color: #00000008 !important; } - &>:global(.ant-form-item-control) { - margin-left: -8px !important; + + & > :global(.ant-form-item-control) { + max-width: calc(100% + 16px) !important; margin-right: -8px !important; + margin-left: -8px !important; padding: 8px !important; - max-width: calc(100% + 16px) !important; background-color: #00000004 !important; } - &>:global(.ant-form-item-control):first-child { + + & > :global(.ant-form-item-control):first-child { padding-top: 0 !important; - background-color: #00000000 !important; + background-color: #0000 !important; } + .form-group-content { + display: flex; flex-direction: row; - display : flex; margin-bottom: 0; } } -.ccms-antd-mini-form-form, .ccms-antd-mini-form-object { - &>:global(.ant-form-item-control) { - &>:global(.ant-form-item-control-input) { - &>:global(.ant-form-item-control-input-content) { +.ccms-antd-mini-form-form, +.ccms-antd-mini-form-object { + & > :global(.ant-form-item-control) { + & > :global(.ant-form-item-control-input) { + & > :global(.ant-form-item-control-input-content) { min-height: 24px !important; } } } } - .ccms-antd-mini-form-group-row { - position : relative; - display : flex; - box-orient : horizontal; + position: relative; + display: flex; + box-orient: horizontal; box-direction: normal; - flex-flow : row wrap; - width : 100%; + flex-flow: row wrap; + width: 100%; } - .form-group-col { - flex-direction: row; - margin-bottom : 0; - flex-direction: row; - position : relative; - max-width : 100%; - min-height : 1px; + position: relative; flex: 0 0 100%; + flex-direction: row; + max-width: 100%; + min-height: 1px; + margin-bottom: 0; } diff --git a/src/components/formFields/index.tsx b/src/components/formFields/index.tsx index 5a848cc063c57d6ce99e0531e28c924b01a46a6c..566e8d307c48d816256c0a16eaa3faeb7310cbe1 100644 --- a/src/components/formFields/index.tsx +++ b/src/components/formFields/index.tsx @@ -24,16 +24,21 @@ import CodeField from './code' import DiffCodeField from './diffCode' import TextDisplayComponent from './text/display' +import FormDisplayComponent from './form/display' import LongTextDisplayComponent from './longtext/display' import RadioDisplayComponent from './radio/display' import ColorDisplayComponent from './color/display' import NumberDisplayComponent from './number/display' import SwitchDisplayComponent from './switch/display' +import GroupDisplayComponent from './group/display' import UploadDisplayComponent from './upload/display' import DatetimeDisplayComponent from './datetime/display' import DatetimeRangeDisplayComponent from './datetimeRange/display' import SelectSingleDisplayComponent from './select/single/display' import SelectMultipleDisplayComponent from './select/multiple/display' +import TabsDisplayComponent from './tabs/display' +import MultipleTextDisplayComponent from './multipleText/display' +import ImportSubformDisplayComponent from './importSubform/display' export default { text: TextField, @@ -64,6 +69,7 @@ export default { export const display = { text: TextDisplayComponent, + form: FormDisplayComponent, radio: RadioDisplayComponent, longtext: LongTextDisplayComponent, number: NumberDisplayComponent, @@ -73,5 +79,9 @@ export const display = { select_single: SelectSingleDisplayComponent, select_multiple: SelectMultipleDisplayComponent, color: ColorDisplayComponent, - upload: UploadDisplayComponent + upload: UploadDisplayComponent, + group: GroupDisplayComponent, + tabs: TabsDisplayComponent, + multiple_text: MultipleTextDisplayComponent, + import_subform: ImportSubformDisplayComponent, } \ No newline at end of file diff --git a/src/components/formFields/tabs/display.tsx b/src/components/formFields/tabs/display.tsx new file mode 100644 index 0000000000000000000000000000000000000000..485e92d14276f212455b55a8dff910f5f3b42295 --- /dev/null +++ b/src/components/formFields/tabs/display.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import { TabsDisplay } from 'ccms' +import { Form, Tabs } from 'antd' +import { ITabsField, ITabsFieldItem, ITabsFieldItemField } from 'ccms/dist/src/components/formFields/tabs/display' +import { Display } from 'ccms/dist/src/components/formFields/common' +import { display as getALLComponents } from '..' + +export default class TabsDisplayComponent extends TabsDisplay> { + // 各表单项对应的类型所使用的UI组件的类 + getALLComponents = (type: any): typeof Display => getALLComponents[type] + + renderItemFieldComponent = (props: ITabsFieldItemField) => { + const { label, children } = props + + return ( + + {children} + + ) + } + + renderItemComponent = (props: ITabsFieldItem) => { + const { key, label, children } = props + + return ( + + {children} + + ) + } + + renderComponent = (props: ITabsField) => { + const { children } = props + + return ( + + {children} + + ) + } +} diff --git a/src/components/formFields/upload/index.less b/src/components/formFields/upload/index.less index 3830e444830f7c5b222f9cb7163d570a8cafa35d..1fdd60001d02441ca3c74b57aae4909b7563eb5a 100644 --- a/src/components/formFields/upload/index.less +++ b/src/components/formFields/upload/index.less @@ -1,60 +1,61 @@ .ccms-antd-upload { - &>:global(.ant-upload) { + & > :global(.ant-upload) { width: 100%; } } .ccms-antd-upload-image-box { - &>:global(.ant-upload-select) { + & > :global(.ant-upload-select) { width: auto; } } .ccms-antd-upload-image { + position: relative; width: 120px; height: 120px; + padding: 4px; border: 1px solid #d9d9d9; border-radius: 2px; - padding: 4px; - position: relative; - &>.image { + & > .image { width: 100%; height: 100%; object-fit: contain; } - &>.mask { - opacity: 0; - width: 100%; - height: 100%; + & > .mask { position: absolute; - left: 0; top: 0; - background: rgba(0,0,0,.6); - color: white; - font-size: 16px; + left: 0; display: flex; - justify-content: center; align-items: center; - transition: all .5s; + justify-content: center; + width: 100%; + height: 100%; + color: white; + font-size: 16px; + background: rgb(0 0 0 / 60%); + opacity: 0; + transition: all 0.5s; - &>:global(.ant-space) { - &>:global(.ant-space-item) { + & > :global(.ant-space) { + & > :global(.ant-space-item) { cursor: pointer; } } } - &:hover>.mask { + + &:hover > .mask { opacity: 1; } - &>.empty { - width: 100%; - height: 100%; + & > .empty { display: flex; - justify-content: center; align-items: center; + justify-content: center; + width: 100%; + height: 100%; cursor: pointer; } -} \ No newline at end of file +} diff --git a/src/main.tsx b/src/main.tsx index 1d36ea2b63a34b921e51ca113bc22e6834571c27..aaa45bcd8210c26d5ff18c4d85cb301d4f2a45be 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,6 +4,7 @@ import { ICCMS, CCMSProps } from 'ccms/dist/src/main' import { PageHeader, Space } from 'antd' import StepComponents from './steps' import styles from "./main.less" + export default class CCMSComponent extends CCMS { getStepComponent = (key: string) => StepComponents[key] @@ -17,13 +18,13 @@ export default class CCMSComponent extends CCMS {
{ (title || description) && -
+
{description}
} -
+
{children}
diff --git a/src/steps/detail/index.less b/src/steps/detail/index.less index 15891b25bb464a5c4b7307dc6676a64cd3d03f10..a10a51037fe3b72cf795a2eee0dfc192e5d56cb4 100644 --- a/src/steps/detail/index.less +++ b/src/steps/detail/index.less @@ -1,39 +1,38 @@ .ccms-antd-mini-detail-row { - display : flex; - box-orient : horizontal; + position: relative; + display: flex; + flex-flow: row wrap; + box-orient: horizontal; box-direction: normal; - flex-flow : row wrap; - position : relative; .detail-col { - margin-bottom : 15px; - // display : flex; - flex-direction : row; - position : relative; - min-height : 1px; + position: relative; flex: 0 0 100%; + // display : flex; + flex-direction: row; max-width: 100%; + min-height: 1px; + margin-bottom: 15px; } .detail-group-content { + display: flex; flex-direction: row; - display : flex; } .ant-collapse-header-text { font-weight: bold; - font-size : 16px; + font-size: 16px; } .ccms-antd-mini-detail-group { - .detail-group-title { - font-weight : bold; - font-size : 16px; margin-bottom: 20px; - padding : 16px 0; + padding: 16px 0; + font-weight: bold; + font-size: 16px; + white-space: nowrap; border-bottom: 1px solid #f1f1f1; - white-space: nowrap } } -} \ No newline at end of file +} diff --git a/src/steps/form/index.less b/src/steps/form/index.less index 9dd4af6d3f0084d63742a1f40dcb5e577e015e47..05534b25084855dd65e50d94e116b54b0f45dee8 100644 --- a/src/steps/form/index.less +++ b/src/steps/form/index.less @@ -1,74 +1,81 @@ +/* stylelint-disable kebab-case */ .ccms-antd-mini-form-import_subform, .ccms-antd-mini-form-group { margin-bottom: 0 !important; - &>:global(.ant-form-item-label) { - width : calc(100% + 16px) !important; - max-width : calc(100% + 16px) !important; - margin-left : -8px !important; - padding : 2px 8px !important; - flex : 0 0 auto !important; + &> :global(.ant-form-item-label) { + flex: 0 0 auto !important; + width: calc(100% + 16px) !important; + max-width: calc(100% + 16px) !important; + margin-left: -8px !important; + padding: 2px 8px !important; background-color: #00000008 !important; } - &>:global(.ant-form-item-control) { - margin-left : -8px !important; - margin-right : -8px !important; - padding : 8px !important; - max-width : calc(100% + 16px) !important; + &> :global(.ant-form-item-control) { + max-width: calc(100% + 16px) !important; + margin-right: -8px !important; + margin-left: -8px !important; + padding: 8px !important; background-color: #00000004 !important; } - &>:global(.ant-form-item-control):first-child { - padding-top : 0 !important; - background-color: #00000000 !important; + &> :global(.ant-form-item-control):first-child { + padding-top: 0 !important; + background-color: #0000 !important; } + .form-group-content { + display: flex; flex-direction: row; - display : flex; margin-bottom: 15px; } } .ccms-antd-mini-form-form { - &>:global(.ant-form-item-control) { - &>:global(.ant-form-item-control-input) { - &>:global(.ant-form-item-control-input-content) { + &> :global(.ant-form-item-control) { + &> :global(.ant-form-item-control-input) { + &> :global(.ant-form-item-control-input-content) { min-height: 24px !important; } } } } - .ccms-antd-mini-form-row { - display : flex; - box-orient : horizontal; + position: relative; + display: flex; + flex-flow: row wrap; + box-orient: horizontal; + /* stylelint-disable-line */ box-direction: normal; - flex-flow : row wrap; - position : relative; + /* stylelint-disable-line */ } .form-col { - margin-bottom : 0; - flex-direction : row; - position : relative; - max-width : 100%; - min-height : 1px; + margin-bottom: 0; + flex-direction: row; + position: relative; + max-width: 100%; + min-height: 1px; flex: 0 0 100%; + flex-direction: row; + max-width: 100%; + min-height: 1px; + margin-bottom: 15px; } .ant-collapse-header-text { font-weight: bold; - font-size : 16px; + font-size: 16px; } .ccms-antd-mini-form-group { .form-group-title { - font-weight : bold; - font-size : 16px; margin-bottom: 20px; - padding : 16px 0; + padding: 16px 0; + font-weight: bold; + font-size: 16px; border-bottom: 1px solid #f1f1f1; } -} \ No newline at end of file +} diff --git a/src/steps/header/index.less b/src/steps/header/index.less index 4771eed046d8e331176b4d0ba9718631b2386a05..d6b62d6a575f068a9ff3e3146095b2c1d4f68ae6 100644 --- a/src/steps/header/index.less +++ b/src/steps/header/index.less @@ -1,6 +1,6 @@ .ccms-antd-header { - padding: 0 !important; margin-bottom: 24px !important; + padding: 0 !important; } .breadcrumb-item-bold { @@ -9,4 +9,4 @@ .breadcrumb-item-pointer { cursor: pointer; -} \ No newline at end of file +} diff --git a/src/steps/table/index.less b/src/steps/table/index.less index 18589809a015d594a0d344d9e403d6220b8f0bb5..dcc55b99f8b421c5bf5c8eb0e05bc6ffaffcc26b 100644 --- a/src/steps/table/index.less +++ b/src/steps/table/index.less @@ -4,27 +4,27 @@ } &>.ccms-antd-table-header { - display : flex; + display: flex; justify-content: space-between; - align-items : center; - margin-bottom : 16px; + align-items: center; + margin-bottom: 16px; &>.ccms-antd-table-left { - display : flex; + display: flex; align-items: center; &>.ccms-antd-table-title { - color : #000000d9; + color: #000000d9; font-weight: 500; - font-size : 16px; - display : flex; + font-size: 16px; + display: flex; } &>.ccms-antd-table-title-explain { margin-left: 16px; - font-size : 14px; - color : #abb7c4; - margin-top : 2px; + font-size: 14px; + color: #abb7c4; + margin-top: 2px; } } @@ -32,4 +32,4 @@ margin-left: 16px; } } -} \ No newline at end of file +} diff --git a/src/variable.less b/src/variable.less index ca3b06ac4dac3b94c0c5b07dc310fa8d0f8e317c..d0217a846845179ad0a0a2f2fda3f0b82c05721d 100644 --- a/src/variable.less +++ b/src/variable.less @@ -13,7 +13,6 @@ @ccms-form-field-border-radius: 2px; @ccms-form-field-background: #ffffff; - @primary-color: #1890ff; // 全局主色 @link-color: #1890ff; // 链接色 @success-color: #52c41a; // 成功色 @@ -28,4 +27,3 @@ @border-color-base: #d9d9d9; // 边框色 @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影 - diff --git a/tsconfig.json b/tsconfig.json index a89214250a14f899245742f8cda0b022eeaf2f34..47d3ebe229888f7a37c6246bb9bdb136b8a075fe 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,12 +1,19 @@ { + "exclude": [ + "node_modules", + "dist", + "scripts", + "rollup.config.js" + ], "compilerOptions": { - "target": "es6", - "module": "esnext", - "jsx": "react", + "target": "ES6", + "module": "ESNext", "sourceMap": true, - "outDir": "./lib/", - "strict": true, + "outDir": "./dist/src", "esModuleInterop": true, + "declaration": true, + "jsx": "react", + "strict": true, "lib": [ "dom", "dom.iterable", @@ -29,4 +36,4 @@ ], "experimentalDecorators": true } -} \ No newline at end of file +}