From 0275ca760265389fd580f42c54cb8d2e3b64d2e8 Mon Sep 17 00:00:00 2001 From: Linzp Date: Tue, 16 Sep 2025 18:39:09 +0800 Subject: [PATCH] aaa --- package.json | 3 +- src/FontList.js | 60 +++++++++++++++++++++++++ src/createEntry.js | 104 +++++++++++++++++++++++++++++++++++++++++++ src/index.js | 108 ++------------------------------------------- 4 files changed, 170 insertions(+), 105 deletions(-) create mode 100644 src/FontList.js create mode 100644 src/createEntry.js diff --git a/package.json b/package.json index 83f0d41..b49a85f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne/modules-dev", - "version": "2.1.13", + "version": "2.1.15", "description": "用于辅助在项目内启动一个规范化组件开发的环境", "publishConfig": { "access": "public", @@ -40,6 +40,7 @@ "@kne/fetch-npm-package": "^0.1.1", "@kne/md-doc": "^0.1.13", "@kne/react-fetch": "^1.4.3", + "@kne/react-icon": "^0.1.4", "ajv": "^8.14.0", "chokidar": "^3.5.3", "classnames": "^2.3.2", diff --git a/src/FontList.js b/src/FontList.js new file mode 100644 index 0000000..31cf3e1 --- /dev/null +++ b/src/FontList.js @@ -0,0 +1,60 @@ +import {useState} from 'react'; +import {Flex, Slider, Typography, Card} from 'antd'; +import Icon from '@kne/react-icon'; + +const FontList = ({fonts}) => { + const [value, setValue] = useState(30); + return + +
调整大小:
+ +
{value}px
+ + {Object.keys(fonts).map(fontClassName => { + const { glyphs: list } = fonts[fontClassName]; + const isColorful = /-colorful$/.test(fontClassName); + return ( + + {fontClassName} + + {list.map(({ font_class }) => { + return ( + + {isColorful ? ( + <> + + + + ' + }}> + {font_class} + + + ) : ( + <> + + + + ' + }}> + {font_class} + + + )} + + ); + })} + + + ); + })} + +}; + +export default FontList; \ No newline at end of file diff --git a/src/createEntry.js b/src/createEntry.js new file mode 100644 index 0000000..ef26019 --- /dev/null +++ b/src/createEntry.js @@ -0,0 +1,104 @@ +import React, {useEffect, useState} from 'react'; +import {Navigate, Route, Routes, useLocation, useNavigate, Outlet} from 'react-router-dom'; +import {createWithRemoteLoader} from '@kne/remote-loader'; +import ensureSlash from '@kne/ensure-slash'; +import {Result, FloatButton} from 'antd'; +import Example from './Example'; +import ExamplePage, {ExampleContent} from './ExamplePage'; +import get from 'lodash/get'; + +const ModulesIsEmpty = ({readme, baseUrl}) => { + const location = useLocation(); + if (readme && Object.keys(readme).length > 0 && ensureSlash(location.pathname, true) === baseUrl) { + return ; + } + if (readme && Object.keys(readme).length > 0) { + return + } + return +}; + +const EntryButton = createWithRemoteLoader({ + modules: ['components-core:Icon'] +})(({remoteModules}) => { + const [Icon] = remoteModules; + const navigate = useNavigate(); + return } onClick={() => { + navigate('/modules-dev-components'); + }}/>; +}); + +const MainLayout = createWithRemoteLoader({ + modules: ["components-core:Global", "components-core:Layout"] +})(({remoteModules, paths, preset, ...props}) => { + const [Global, Layout] = remoteModules; + return ; +}); + +const ExampleRoutes = ({ + preset, themeToken, projectName, baseUrl = '', paths = [{ + key: 'index', path: '/', title: '首页' + }, { + key: 'components', path: `${baseUrl}/components`, title: '组件' + }], readme, pageProps, children, ...props + }) => { + const componentsPath = paths.find((item) => item.key === 'components'); + const componentsBaseUrl = ensureSlash(get(componentsPath, 'path', '/'), true); + const baseUrlPrefix = new RegExp(`^${ensureSlash(baseUrl,true)}`); + const componentsRoutePath = ensureSlash(componentsBaseUrl.replace(baseUrlPrefix, '')); + return + }> + {componentsPath && }> + }/> + }/> + } + + + +}; + + +const createEntry = (WrappedComponents) => (({ + remoteModules, + preset, + projectName, + themeToken, + pageProps, + baseUrl = '', + ...props + }) => { + const [readme, setReadme] = useState({}); + useEffect(() => { + import('readme').then((module) => { + setReadme(module.__esModule === true ? module.default : module); + }); + }, []); + return <> + {Object.keys(readme).length > 0 ? + + + : } + ; +}); +createEntry.Example = Example; +createEntry.ExampleRoutes = ExampleRoutes; +createEntry.ExamplePage = ExamplePage; +createEntry.ExampleContent = ExampleContent; + +export default createEntry; diff --git a/src/index.js b/src/index.js index ef26019..b321ebc 100644 --- a/src/index.js +++ b/src/index.js @@ -1,104 +1,4 @@ -import React, {useEffect, useState} from 'react'; -import {Navigate, Route, Routes, useLocation, useNavigate, Outlet} from 'react-router-dom'; -import {createWithRemoteLoader} from '@kne/remote-loader'; -import ensureSlash from '@kne/ensure-slash'; -import {Result, FloatButton} from 'antd'; -import Example from './Example'; -import ExamplePage, {ExampleContent} from './ExamplePage'; -import get from 'lodash/get'; - -const ModulesIsEmpty = ({readme, baseUrl}) => { - const location = useLocation(); - if (readme && Object.keys(readme).length > 0 && ensureSlash(location.pathname, true) === baseUrl) { - return ; - } - if (readme && Object.keys(readme).length > 0) { - return - } - return -}; - -const EntryButton = createWithRemoteLoader({ - modules: ['components-core:Icon'] -})(({remoteModules}) => { - const [Icon] = remoteModules; - const navigate = useNavigate(); - return } onClick={() => { - navigate('/modules-dev-components'); - }}/>; -}); - -const MainLayout = createWithRemoteLoader({ - modules: ["components-core:Global", "components-core:Layout"] -})(({remoteModules, paths, preset, ...props}) => { - const [Global, Layout] = remoteModules; - return ; -}); - -const ExampleRoutes = ({ - preset, themeToken, projectName, baseUrl = '', paths = [{ - key: 'index', path: '/', title: '首页' - }, { - key: 'components', path: `${baseUrl}/components`, title: '组件' - }], readme, pageProps, children, ...props - }) => { - const componentsPath = paths.find((item) => item.key === 'components'); - const componentsBaseUrl = ensureSlash(get(componentsPath, 'path', '/'), true); - const baseUrlPrefix = new RegExp(`^${ensureSlash(baseUrl,true)}`); - const componentsRoutePath = ensureSlash(componentsBaseUrl.replace(baseUrlPrefix, '')); - return - }> - {componentsPath && }> - }/> - }/> - } - - - -}; - - -const createEntry = (WrappedComponents) => (({ - remoteModules, - preset, - projectName, - themeToken, - pageProps, - baseUrl = '', - ...props - }) => { - const [readme, setReadme] = useState({}); - useEffect(() => { - import('readme').then((module) => { - setReadme(module.__esModule === true ? module.default : module); - }); - }, []); - return <> - {Object.keys(readme).length > 0 ? - - - : } - ; -}); -createEntry.Example = Example; -createEntry.ExampleRoutes = ExampleRoutes; -createEntry.ExamplePage = ExamplePage; -createEntry.ExampleContent = ExampleContent; - -export default createEntry; +export {default} from './createEntry'; +export {default as FontList} from './FontList'; +export {default as Example} from './Example'; +export {default as ExamplePage} from './ExamplePage'; \ No newline at end of file