Skip to content

Commit 0275ca7

Browse files
zhipenglinzhipenglin
committed
aaa
1 parent 7daa477 commit 0275ca7

File tree

4 files changed

+170
-105
lines changed

4 files changed

+170
-105
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kne/modules-dev",
3-
"version": "2.1.13",
3+
"version": "2.1.15",
44
"description": "用于辅助在项目内启动一个规范化组件开发的环境",
55
"publishConfig": {
66
"access": "public",
@@ -40,6 +40,7 @@
4040
"@kne/fetch-npm-package": "^0.1.1",
4141
"@kne/md-doc": "^0.1.13",
4242
"@kne/react-fetch": "^1.4.3",
43+
"@kne/react-icon": "^0.1.4",
4344
"ajv": "^8.14.0",
4445
"chokidar": "^3.5.3",
4546
"classnames": "^2.3.2",

‎src/FontList.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {useState} from 'react';
2+
import {Flex, Slider, Typography, Card} from 'antd';
3+
import Icon from '@kne/react-icon';
4+
5+
const FontList = ({fonts}) => {
6+
const [value, setValue] = useState(30);
7+
return <Flex vertical gap={20}>
8+
<Flex gap={8}>
9+
<div>调整大小:</div>
10+
<Slider style={{ width: 100 }} max={60} min={12} value={value} onChange={setValue} />
11+
<div>{value}px</div>
12+
</Flex>
13+
{Object.keys(fonts).map(fontClassName => {
14+
const { glyphs: list } = fonts[fontClassName];
15+
const isColorful = /-colorful$/.test(fontClassName);
16+
return (
17+
<Flex vertical gap={8} key={fontClassName}>
18+
<Typography.Title level={4}>{fontClassName}</Typography.Title>
19+
<Flex gap={12} wrap>
20+
{list.map(({ font_class }) => {
21+
return (
22+
<Card size="small" key={font_class}>
23+
{isColorful ? (
24+
<>
25+
<Flex justify="center">
26+
<Icon colorful type={font_class} size={value} />
27+
</Flex>
28+
<Typography.Text
29+
style={{ display: 'block', width: '120px', wordBreak: 'break-all' }}
30+
copyable={{
31+
text: '<Icon colorful type="' + font_class + '" size={' + value + '}/>'
32+
}}>
33+
{font_class}
34+
</Typography.Text>
35+
</>
36+
) : (
37+
<>
38+
<Flex justify="center">
39+
<Icon type={font_class} size={value} fontClassName={fontClassName} />
40+
</Flex>
41+
<Typography.Text
42+
style={{ display: 'block', width: '120px', wordBreak: 'break-all' }}
43+
copyable={{
44+
text: '<Icon type="' + font_class + '" size={' + value + '} fontClassName={' + fontClassName + '}/>'
45+
}}>
46+
{font_class}
47+
</Typography.Text>
48+
</>
49+
)}
50+
</Card>
51+
);
52+
})}
53+
</Flex>
54+
</Flex>
55+
);
56+
})}
57+
</Flex>
58+
};
59+
60+
export default FontList;

‎src/createEntry.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React, {useEffect, useState} from 'react';
2+
import {Navigate, Route, Routes, useLocation, useNavigate, Outlet} from 'react-router-dom';
3+
import {createWithRemoteLoader} from '@kne/remote-loader';
4+
import ensureSlash from '@kne/ensure-slash';
5+
import {Result, FloatButton} from 'antd';
6+
import Example from './Example';
7+
import ExamplePage, {ExampleContent} from './ExamplePage';
8+
import get from 'lodash/get';
9+
10+
const ModulesIsEmpty = ({readme, baseUrl}) => {
11+
const location = useLocation();
12+
if (readme && Object.keys(readme).length > 0 && ensureSlash(location.pathname, true) === baseUrl) {
13+
return <Navigate to={`${baseUrl}${Object.keys(readme)[0]}`}/>;
14+
}
15+
if (readme && Object.keys(readme).length > 0) {
16+
return <Outlet/>
17+
}
18+
return <Result
19+
status="404"
20+
title="没有检测到业务组件"
21+
subTitle="您可以通过 modules-dev create 命令创建组件，如果已经有组件请检查环境变量 MODULES_DEV_BASE_DIR和MODULES_DEV_ALIAS_NAME 是否设置正确"
22+
/>
23+
};
24+
25+
const EntryButton = createWithRemoteLoader({
26+
modules: ['components-core:Icon']
27+
})(({remoteModules}) => {
28+
const [Icon] = remoteModules;
29+
const navigate = useNavigate();
30+
return <FloatButton icon={<Icon className="icon" type="icon-liangdian"/>} onClick={() => {
31+
navigate('/modules-dev-components');
32+
}}/>;
33+
});
34+
35+
const MainLayout = createWithRemoteLoader({
36+
modules: ["components-core:Global", "components-core:Layout"]
37+
})(({remoteModules, paths, preset, ...props}) => {
38+
const [Global, Layout] = remoteModules;
39+
return <Global {...props} preset={preset}><Layout navigation={{
40+
showIndex: false, list: paths
41+
}}><Outlet/></Layout></Global>;
42+
});
43+
44+
const ExampleRoutes = ({
45+
preset, themeToken, projectName, baseUrl = '', paths = [{
46+
key: 'index', path: '/', title: '首页'
47+
}, {
48+
key: 'components', path: `${baseUrl}/components`, title: '组件'
49+
}], readme, pageProps, children, ...props
50+
}) => {
51+
const componentsPath = paths.find((item) => item.key === 'components');
52+
const componentsBaseUrl = ensureSlash(get(componentsPath, 'path', '/'), true);
53+
const baseUrlPrefix = new RegExp(`^${ensureSlash(baseUrl,true)}`);
54+
const componentsRoutePath = ensureSlash(componentsBaseUrl.replace(baseUrlPrefix, ''));
55+
return <Routes>
56+
<Route element={<MainLayout paths={paths} preset={preset} themeToken={themeToken} {...props}/>}>
57+
{componentsPath && <Route path={componentsRoutePath}
58+
element={<ModulesIsEmpty baseUrl={componentsBaseUrl} readme={readme}/>}>
59+
<Route path=":id"
60+
element={<Example baseUrl={componentsBaseUrl} readme={readme} pageProps={pageProps}/>}/>
61+
<Route path=":id/*"
62+
element={<Example baseUrl={componentsBaseUrl} readme={readme} pageProps={pageProps}/>}/>
63+
</Route>}
64+
</Route>
65+
<Route path='*' element={children}/>
66+
</Routes>
67+
};
68+
69+
70+
const createEntry = (WrappedComponents) => (({
71+
remoteModules,
72+
preset,
73+
projectName,
74+
themeToken,
75+
pageProps,
76+
baseUrl = '',
77+
...props
78+
}) => {
79+
const [readme, setReadme] = useState({});
80+
useEffect(() => {
81+
import('readme').then((module) => {
82+
setReadme(module.__esModule === true ? module.default : module);
83+
});
84+
}, []);
85+
return <>
86+
{Object.keys(readme).length > 0 ?
87+
<ExampleRoutes preset={preset} baseUrl={baseUrl} projectName={projectName} readme={readme}
88+
pageProps={pageProps}
89+
paths={[{
90+
key: 'index', path: '/', title: '首页'
91+
}, {
92+
key: 'components', path: `${baseUrl}/modules-dev-components`, title: '组件'
93+
}]}
94+
themeToken={themeToken}>
95+
<WrappedComponents {...props}/><EntryButton/>
96+
</ExampleRoutes> : <WrappedComponents {...props}/>}
97+
</>;
98+
});
99+
createEntry.Example = Example;
100+
createEntry.ExampleRoutes = ExampleRoutes;
101+
createEntry.ExamplePage = ExamplePage;
102+
createEntry.ExampleContent = ExampleContent;
103+
104+
export default createEntry;

‎src/index.js‎

Lines changed: 4 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,4 @@
1-
import React, {useEffect, useState} from 'react';
2-
import {Navigate, Route, Routes, useLocation, useNavigate, Outlet} from 'react-router-dom';
3-
import {createWithRemoteLoader} from '@kne/remote-loader';
4-
import ensureSlash from '@kne/ensure-slash';
5-
import {Result, FloatButton} from 'antd';
6-
import Example from './Example';
7-
import ExamplePage, {ExampleContent} from './ExamplePage';
8-
import get from 'lodash/get';
9-
10-
const ModulesIsEmpty = ({readme, baseUrl}) => {
11-
const location = useLocation();
12-
if (readme && Object.keys(readme).length > 0 && ensureSlash(location.pathname, true) === baseUrl) {
13-
return <Navigate to={`${baseUrl}${Object.keys(readme)[0]}`}/>;
14-
}
15-
if (readme && Object.keys(readme).length > 0) {
16-
return <Outlet/>
17-
}
18-
return <Result
19-
status="404"
20-
title="没有检测到业务组件"
21-
subTitle="您可以通过 modules-dev create 命令创建组件，如果已经有组件请检查环境变量 MODULES_DEV_BASE_DIR和MODULES_DEV_ALIAS_NAME 是否设置正确"
22-
/>
23-
};
24-
25-
const EntryButton = createWithRemoteLoader({
26-
modules: ['components-core:Icon']
27-
})(({remoteModules}) => {
28-
const [Icon] = remoteModules;
29-
const navigate = useNavigate();
30-
return <FloatButton icon={<Icon className="icon" type="icon-liangdian"/>} onClick={() => {
31-
navigate('/modules-dev-components');
32-
}}/>;
33-
});
34-
35-
const MainLayout = createWithRemoteLoader({
36-
modules: ["components-core:Global", "components-core:Layout"]
37-
})(({remoteModules, paths, preset, ...props}) => {
38-
const [Global, Layout] = remoteModules;
39-
return <Global {...props} preset={preset}><Layout navigation={{
40-
showIndex: false, list: paths
41-
}}><Outlet/></Layout></Global>;
42-
});
43-
44-
const ExampleRoutes = ({
45-
preset, themeToken, projectName, baseUrl = '', paths = [{
46-
key: 'index', path: '/', title: '首页'
47-
}, {
48-
key: 'components', path: `${baseUrl}/components`, title: '组件'
49-
}], readme, pageProps, children, ...props
50-
}) => {
51-
const componentsPath = paths.find((item) => item.key === 'components');
52-
const componentsBaseUrl = ensureSlash(get(componentsPath, 'path', '/'), true);
53-
const baseUrlPrefix = new RegExp(`^${ensureSlash(baseUrl,true)}`);
54-
const componentsRoutePath = ensureSlash(componentsBaseUrl.replace(baseUrlPrefix, ''));
55-
return <Routes>
56-
<Route element={<MainLayout paths={paths} preset={preset} themeToken={themeToken} {...props}/>}>
57-
{componentsPath && <Route path={componentsRoutePath}
58-
element={<ModulesIsEmpty baseUrl={componentsBaseUrl} readme={readme}/>}>
59-
<Route path=":id"
60-
element={<Example baseUrl={componentsBaseUrl} readme={readme} pageProps={pageProps}/>}/>
61-
<Route path=":id/*"
62-
element={<Example baseUrl={componentsBaseUrl} readme={readme} pageProps={pageProps}/>}/>
63-
</Route>}
64-
</Route>
65-
<Route path='*' element={children}/>
66-
</Routes>
67-
};
68-
69-
70-
const createEntry = (WrappedComponents) => (({
71-
remoteModules,
72-
preset,
73-
projectName,
74-
themeToken,
75-
pageProps,
76-
baseUrl = '',
77-
...props
78-
}) => {
79-
const [readme, setReadme] = useState({});
80-
useEffect(() => {
81-
import('readme').then((module) => {
82-
setReadme(module.__esModule === true ? module.default : module);
83-
});
84-
}, []);
85-
return <>
86-
{Object.keys(readme).length > 0 ?
87-
<ExampleRoutes preset={preset} baseUrl={baseUrl} projectName={projectName} readme={readme}
88-
pageProps={pageProps}
89-
paths={[{
90-
key: 'index', path: '/', title: '首页'
91-
}, {
92-
key: 'components', path: `${baseUrl}/modules-dev-components`, title: '组件'
93-
}]}
94-
themeToken={themeToken}>
95-
<WrappedComponents {...props}/><EntryButton/>
96-
</ExampleRoutes> : <WrappedComponents {...props}/>}
97-
</>;
98-
});
99-
createEntry.Example = Example;
100-
createEntry.ExampleRoutes = ExampleRoutes;
101-
createEntry.ExamplePage = ExamplePage;
102-
createEntry.ExampleContent = ExampleContent;
103-
104-
export default createEntry;
1+
export {default} from './createEntry';
2+
export {default as FontList} from './FontList';
3+
export {default as Example} from './Example';
4+
export {default as ExamplePage} from './ExamplePage';

0 commit comments

Comments
 (0)