From 7e92317a2ac2fe48f175b95618224ff6262e953a Mon Sep 17 00:00:00 2001 From: Rdmclin2 Date: Thu, 7 Mar 2024 10:54:51 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=B1=BB=E5=9E=8B=E9=94=99?= =?UTF-8?q?=E8=AF=AF=20&=20=E8=A1=A5=E5=85=85=E6=96=87=E6=A1=A3=20(#166)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :memo: docs: 迁移 hero 和 features 文档 & 翻译 * :recycle: refactor: remove unnecessary code * :bookmark: chore: prepre for 1.0 --- .dumirc.ts | 67 ----------- .i18nrc.js | 1 - docs/guide/demos/ColumnList/data.ts | 66 +++++------ docs/guide/intro.en-US.md | 42 +------ docs/guide/intro.zh-CN.md | 30 ----- docs/guide/nextjs.en-US.md | 74 +++++++++++- docs/guide/nextjs.zh-CN.md | 125 ++++++++++++++++++++ docs/guide/umi.en-US.md | 117 +++++++++++++++++- docs/guide/umi.zh-CN.md | 115 ++++++++++++++++++ docs/index.en-US.md | 35 ++++++ docs/index.md | 7 -- docs/index.zh-CN.md | 32 ++++- docs/showcase/flow-editor.en-US.md | 13 -- docs/showcase/flow-editor.zh-CN.md | 13 -- docs/showcase/index.en-US.md | 12 -- docs/showcase/index.zh-CN.md | 12 -- docs/showcase/kitchen-color-studio.en-US.md | 13 -- docs/showcase/kitchen-color-studio.zh-CN.md | 13 -- package.json | 2 +- src/index.ts | 1 + 20 files changed, 535 insertions(+), 255 deletions(-) create mode 100644 docs/index.en-US.md delete mode 100644 docs/index.md delete mode 100644 docs/showcase/flow-editor.en-US.md delete mode 100644 docs/showcase/flow-editor.zh-CN.md delete mode 100644 docs/showcase/index.en-US.md delete mode 100644 docs/showcase/index.zh-CN.md delete mode 100644 docs/showcase/kitchen-color-studio.en-US.md delete mode 100644 docs/showcase/kitchen-color-studio.zh-CN.md diff --git a/.dumirc.ts b/.dumirc.ts index 0fb2f108..eddb1388 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,84 +1,17 @@ import { defineConfig } from 'dumi'; -const isProd = process.env.NODE_ENV === 'production'; - export default defineConfig({ outputPath: 'docs-dist', mfsu: false, favicons: ['https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg'], - // @ts-ignore ssr: false, hash: true, ignoreMomentLocale: true, themeConfig: { - hero: { - 'zh-CN': { - title: 'ProEditor', - description: '🌟 通用编辑器 UI 框架', - actions: [ - { - text: '快速开始 →', - link: '/guide/intro', - }, - { - text: 'Github', - link: 'https://github.com/ant-design/pro-editor', - }, - ], - }, - 'en-US': { - title: 'ProEditor', - description: '🌟 A General Editor UI Framework', - actions: [ - { - text: 'Quick Start →', - link: '/guide/intro', - }, - ], - }, - }, socialLinks: { github: 'https://github.com/ant-design/pro-editor', }, footer: 'Made with ❤️ by 蚂蚁集团 - AFX & 数字科技', - features: [ - { - image: - 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr', - title: '简单易用', - description: '在 Ant Design 上进行了自己的封装，更加易用', - }, - { - image: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', - title: 'Ant Design', - description: '与 Ant Design 设计体系一脉相承，无缝对接 antd 项目', - }, - { - image: - 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr', - title: '通用编辑器组件', - description: '提供完备的编辑器组件，方便使用者定制自己的编辑器', - }, - - { - image: - 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr', - title: '预设样式', - description: '样式风格与 antd 一脉相承，无需魔改，浑然天成。默认好用的主题系统', - }, - { - image: - 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr', - title: '预设行为', - description: '更少的代码，更少的 Bug，更多的功能', - }, - - { - image: 'https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg', - title: 'TypeScript', - description: '使用 TypeScript 开发，提供完整的类型定义文件，无需频繁打开官网', - }, - ], logo: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg', name: '@ant-design/pro-editor', }, diff --git a/.i18nrc.js b/.i18nrc.js index 822fd6cf..ce72e61e 100644 --- a/.i18nrc.js +++ b/.i18nrc.js @@ -6,7 +6,6 @@ module.exports = { markdown: { entry: ['docs/**/**.md', 'src/**/**.md'], entryLocale: 'zh-CN', - exclude: ['docs/index.zh-CN.md'], entryExtension: '.zh-CN.md', outputLocales: ['en-US'], }, diff --git a/docs/guide/demos/ColumnList/data.ts b/docs/guide/demos/ColumnList/data.ts index f0521a38..92c71d03 100644 --- a/docs/guide/demos/ColumnList/data.ts +++ b/docs/guide/demos/ColumnList/data.ts @@ -2,37 +2,37 @@ * Column 所有类型 * */ export const tableColumnValueOptions = [ - { label: '序号', value: 'index' }, - { label: '圆形序号', value: 'indexBorder' }, - { label: '数字', value: 'digit' }, - { label: '密码', value: 'password' }, - { label: '金额', value: 'money' }, - { label: '文本', value: 'text' }, - { label: '文本域', value: 'textarea' }, - { label: '日期', value: 'date' }, - { label: '操作', value: 'option' }, - { label: '日期时间', value: 'dateTime' }, - { label: '周', value: 'dateWeek' }, - { label: '月', value: 'dateMonth' }, - { label: '季度', value: 'dateQuarter' }, - { label: '年份', value: 'dateYear' }, - { label: '日期区间', value: 'dateRange' }, - { label: '日期时间区间', value: 'dateTimeRange' }, - { label: '时间', value: 'time' }, - { label: '时间区间', value: 'timeRange' }, - { label: '下拉框', value: 'select' }, - { label: '多选框', value: 'checkbox' }, - { label: '星级组件', value: 'rate' }, - { label: '单选框', value: 'radio' }, - { label: '按钮单选框', value: 'radioButton' }, - { label: '进度条', value: 'progress' }, - { label: '百分比', value: 'percent' }, - { label: '秒格式化', value: 'second' }, - { label: '头像', value: 'avatar' }, - { label: '代码框', value: 'code' }, - { label: '开关', value: 'switch' }, - { label: '显示当前时间', value: 'fromNow' }, - { label: '图片', value: 'image' }, - { label: 'json 格式化', value: 'jsonCode' }, - { label: '颜色选择器', value: 'color' }, + { label: 'index', value: 'index' }, + { label: 'indexBorder', value: 'indexBorder' }, + { label: 'digit', value: 'digit' }, + { label: 'password', value: 'password' }, + { label: 'money', value: 'money' }, + { label: 'text', value: 'text' }, + { label: 'textarea', value: 'textarea' }, + { label: 'date', value: 'date' }, + { label: 'option', value: 'option' }, + { label: 'dateTime', value: 'dateTime' }, + { label: 'dateWeek', value: 'dateWeek' }, + { label: 'dateMonth', value: 'dateMonth' }, + { label: 'dateQuarter', value: 'dateQuarter' }, + { label: 'dateYear', value: 'dateYear' }, + { label: 'dateRange', value: 'dateRange' }, + { label: 'dateTimeRange', value: 'dateTimeRange' }, + { label: 'time', value: 'time' }, + { label: 'timeRange', value: 'timeRange' }, + { label: 'select', value: 'select' }, + { label: 'checkbox', value: 'checkbox' }, + { label: 'rate', value: 'rate' }, + { label: 'radio', value: 'radio' }, + { label: 'radioButton', value: 'radioButton' }, + { label: 'progress', value: 'progress' }, + { label: 'percent', value: 'percent' }, + { label: 'second', value: 'second' }, + { label: 'avatar', value: 'avatar' }, + { label: 'code', value: 'code' }, + { label: 'switch', value: 'switch' }, + { label: 'fromNow', value: 'fromNow' }, + { label: 'image', value: 'image' }, + { label: 'jsonCode', value: 'jsonCode' }, + { label: 'color', value: 'color' }, ]; diff --git a/docs/guide/intro.en-US.md b/docs/guide/intro.en-US.md index 1e73f7b4..cf1e3d2e 100644 --- a/docs/guide/intro.en-US.md +++ b/docs/guide/intro.en-US.md @@ -1,10 +1,10 @@ --- title: Quick Start group: - title: Quick Start + title: Getting Started Quickly order: 1 nav: - title: Document + title: Documentation order: 1 --- @@ -22,7 +22,7 @@ $ npm install @ant-design/pro-editor -S ### Using Components -ProEditor provides a series of components optimized for the "editing" scenario, including but not limited to "SortableList", "SortableTree", "DraggablePanel", "Highlight", "ContextMenu", etc. For the complete component documentation, please refer to: [Basic Components](/components/action-icon) +ProEditor provides a series of components optimized for the "editing" scenario, including but not limited to "SortableList", "SortableTree", "DraggablePanel", "Highlight", "ContextMenu", and more. For complete component documentation, please refer to: [Basic Components](/components/action-icon) Below is a typical array object editing scenario. Our provided ColumnList can help developers quickly implement a high-quality array editing component. @@ -30,46 +30,16 @@ Below is a typical array object editing scenario. Our provided ColumnList can he ### Component Assembler -ProEditor was initially positioned as a visual configuration framework for components. Therefore, ProEditor provides a series of containers and atomic components for visual component assembly, helping developers quickly implement a visual configuration component. +Initially, ProEditor was positioned as a visual configuration framework for components. Therefore, ProEditor provides a series of containers and atomic components for visual component assembly, helping developers quickly implement a visual configuration component. See: [ProEditor Assembler Container](/pro-editor) -### 🚧 Using Atomic Capabilities - -> Working in Progress - -ProEditor will provide various atomic capabilities required for editing scenarios, including but not limited to "undo/redo", "real-time collaboration", "keyboard shortcuts", "selection capabilities", etc. - -This part of the capability is still under rapid development, so stay tuned. - -## Integration with Frameworks - -### Integration with Umi - -In the development scenario of the middle and back office, Umi is a very good choice. Integrating ProEditor with Umi is very easy. After installation, you can use it directly. - -### Integration with Next.js - -[Next.js](https://nextjs.org/) is a very popular development framework in the community. Integrating ProEditor with Next.js is also very easy. - -Since Next.js is a CSR/SSR isomorphic React framework, and ProEditor only provides esm modules by default, after installation, you need to add relevant dependencies to `transpilePackages` in `next.config.(m)js`: - -```js -/** @type {import('next').NextConfig} */ -const nextConfig = { - // Convert pure esm modules to node-compatible modules - transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'], // leva is a ProEditor dependency module -}; -``` - -Then you can use it just like any other component. - ## Engineering Capabilities ### On-Demand Loading -ProEditor supports tree shaking based on ES modules by default. Simply import `import { ActionIcon } from '@ant-design/pro-editor`; to achieve on-demand loading. +ProEditor supports tree shaking based on ES modules by default. Directly importing `import { ActionIcon } from '@ant-design/pro-editor';` will achieve on-demand loading. ### TypeScript -ProEditor is developed using TypeScript, so it provides complete type definitions. +ProEditor is developed using TypeScript, thus providing complete type definitions. diff --git a/docs/guide/intro.zh-CN.md b/docs/guide/intro.zh-CN.md index f48457b2..2d413bda 100644 --- a/docs/guide/intro.zh-CN.md +++ b/docs/guide/intro.zh-CN.md @@ -34,36 +34,6 @@ ProEditor 最初的定位是作为组件的可视化配置框架。因此在 Pro 详见：[ProEditor 装配器容器](/pro-editor) -### 🚧 使用原子化能力 - -> Working in Progress - -ProEditor 将会提供编辑场景需要的各类原子化能力，包括但不限于「撤销重做」、「实时协同」、「键盘快捷键」、「选择能力」等。 - -当前该部分能力仍处于高速开发中，敬请期待。 - -## 与框架集成 - -### 与 Umi 集成 - -在中后台的研发场景， umi 是一个非常不错的选择。ProEditor 与 umi 的集成非常容易。安装后直接使用即可。 - -### 与 Next.js 集成 - -[Next.js](https://nextjs.org/) 是社区中非常流行的研发框架。ProEditor 与 Next.js 的集成也非常容易。 - -由于 Next.js 是一个 CSR、SSR 同构的 React 框架，而 ProEditor 默认只提供 esm 模块，因此在安装后，需要在 `next.config.(m)js` 中 `transpilePackages` 中加入相关依赖： - -```js -/** @type {import('next').NextConfig} */ -const nextConfig = { - // 将纯 esm 模块转为 node 兼容模块 - transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'], // leva 为 ProEditor 依赖模块 -}; -``` - -接下来和其他组件一样使用即可。 - ## 工程化能力 ### 按需加载 diff --git a/docs/guide/nextjs.en-US.md b/docs/guide/nextjs.en-US.md index 590251f4..6bff665c 100644 --- a/docs/guide/nextjs.en-US.md +++ b/docs/guide/nextjs.en-US.md @@ -1,6 +1,78 @@ --- title: NextJs group: - title: Work in FrameWork + title: Framework Usage order: 5 --- + +## Integration with Next.js + +[Next.js](https://nextjs.org/) is a very popular development framework in the community, and integrating ProEditor with Next.js is very easy. + +```bash +npx create-next-app@latest +``` + +### Dependency Installation + +```bash +npm install @ant-design/pro-editor --save +or +pnpm install @ant-design/pro-editor +``` + +Since Next.js is a CSR/SSR isomorphic React framework, and ProChat only provides esm modules by default, after installation, you need to add relevant dependencies to `transpilePackages` in `next.config.(m)js`: + +> In the latest version of NextJS 14 AppRoute, this configuration is no longer needed + +```js +/** @type {import('next').NextConfig} */ +const nextConfig = { + // Convert pure esm modules to node-compatible modules + transpilePackages: ['@ant-design/pro-editor'], +}; +``` + +### Usage + +Taking the `SortableList` component as an example, if it is a project created by the default scaffolding, you can simply write the following code in `page.js|tsx` to see it in action. + +```js +'use client'; +import type { ColumnItemList } from '@ant-design/pro-editor'; +import { ColumnList } from '@ant-design/pro-editor'; +import { useState } from 'react'; + +const tableColumnValueOptions = [ + // ... (omitted for brevity) +]; + +type SchemaItem = { + title: string, + valueType: string, + dataIndex: string, +}; + +const INIT_VALUES = [ + // ... (omitted for brevity) +]; + +const columns: ColumnItemList = [ + // ... (omitted for brevity) +]; + +export default () => { + const [value, setValue] = useState(INIT_VALUES); + + return ( + { + setValue(values); + console.log('onChange', values); + }} + /> + ); +}; +``` diff --git a/docs/guide/nextjs.zh-CN.md b/docs/guide/nextjs.zh-CN.md index 6d5a8b89..0ea15483 100644 --- a/docs/guide/nextjs.zh-CN.md +++ b/docs/guide/nextjs.zh-CN.md @@ -4,3 +4,128 @@ group: title: 框架使用 order: 5 --- + +## 与 Next.js 集成 + +[Next.js](https://nextjs.org/) 是社区中非常流行的研发框架，ProEditor 与 Next.js 的集成非常容易。 + +```bash +npx create-next-app@latest +``` + +### 依赖安装 + +```bash +npm install @ant-design/pro-editor --save +or +pnpm install @ant-design/pro-editor +``` + +由于 Next.js 是一个 CSR、SSR 同构的 React 框架，而 ProChat 默认只提供 esm 模块，因此在安装后，需要在 `next.config.(m)js` 中 `transpilePackages` 中加入相关依赖： + +> 在最新版本 NextJS 14 AppRoute 中可以不需要配置了 + +```js +/** @type {import('next').NextConfig} */ +const nextConfig = { + // 将纯 esm 模块转为 node 兼容模块 + transpilePackages: ['@ant-design/pro-editor'], +}; +``` + +### 使用 + +以 `SortableList` 组件为例，如果是默认脚手架创建出来的项目中，直接在 `page.js|tsx` 中写下如下代码就可以看到了。 + +```js +'use client'; +import type { ColumnItemList } from '@ant-design/pro-editor'; +import { ColumnList } from '@ant-design/pro-editor'; +import { useState } from 'react'; + +const tableColumnValueOptions = [ + { label: 'index', value: 'index' }, + { label: 'indexBorder', value: 'indexBorder' }, + { label: 'digit', value: 'digit' }, + { label: 'password', value: 'password' }, + { label: 'money', value: 'money' }, + { label: 'text', value: 'text' }, + { label: 'textarea', value: 'textarea' }, + { label: 'date', value: 'date' }, + { label: 'option', value: 'option' }, + { label: 'dateTime', value: 'dateTime' }, + { label: 'dateWeek', value: 'dateWeek' }, + { label: 'dateMonth', value: 'dateMonth' }, + { label: 'dateQuarter', value: 'dateQuarter' }, + { label: 'dateYear', value: 'dateYear' }, + { label: 'dateRange', value: 'dateRange' }, + { label: 'dateTimeRange', value: 'dateTimeRange' }, + { label: 'time', value: 'time' }, + { label: 'timeRange', value: 'timeRange' }, + { label: 'select', value: 'select' }, + { label: 'checkbox', value: 'checkbox' }, + { label: 'rate', value: 'rate' }, + { label: 'radio', value: 'radio' }, + { label: 'radioButton', value: 'radioButton' }, + { label: 'progress', value: 'progress' }, + { label: 'percent', value: 'percent' }, + { label: 'second', value: 'second' }, + { label: 'avatar', value: 'avatar' }, + { label: 'code', value: 'code' }, + { label: 'switch', value: 'switch' }, + { label: 'fromNow', value: 'fromNow' }, + { label: 'image', value: 'image' }, + { label: 'jsonCode', value: 'jsonCode' }, + { label: 'color', value: 'color' }, +]; + +type SchemaItem = { + title: string, + valueType: string, + dataIndex: string, +}; + +const INIT_VALUES = [ + { title: 'Index', valueType: 'indexBorder', dataIndex: 'index' }, + { + title: 'Enterprise', + valueType: 'text', + dataIndex: 'name', + }, + { title: 'Company', valueType: 'text', dataIndex: 'authCompany' }, +]; + +const columns: ColumnItemList = [ + { + title: 'Title', + dataIndex: 'title', + type: 'input', + }, + { + title: 'ValueType', + dataIndex: 'valueType', + type: 'select', + options: tableColumnValueOptions, + }, + { + title: 'DataIndex', + dataIndex: 'dataIndex', + type: 'select', + }, +]; + +export default () => { + const [value, setValue] = useState(INIT_VALUES); + + return ( + { + setValue(values); + console.log('onChange', values); + }} + /> + ); +}; +``` diff --git a/docs/guide/umi.en-US.md b/docs/guide/umi.en-US.md index 1ca8cfcf..e48f107e 100644 --- a/docs/guide/umi.en-US.md +++ b/docs/guide/umi.en-US.md @@ -1,6 +1,121 @@ --- title: Umi group: - title: Work in FrameWork + title: Framework Usage order: 5 --- + +## Integration with Umi + +In the development scene of the middle and back office, [umi](https://umijs.org/) is a very good choice. Integrating `ProEditor` with `umi` is very easy. After installation, you can use it directly. + +```bash +npx create-umi@latest +or +yarn create umi +pnpm dlx create-umi@latest +``` + +### Dependency Installation + +After creating it + +```bash +npm install @ant-design/pro-editor --save +or +pnpm install @ant-design/pro-editor +``` + +### Usage + +```js +import type { ColumnItemList } from '@ant-design/pro-editor'; +import { ColumnList } from '@ant-design/pro-editor'; +import { useState } from 'react'; + +const tableColumnValueOptions = [ + { label: 'index', value: 'index' }, + { label: 'indexBorder', value: 'indexBorder' }, + { label: 'digit', value: 'digit' }, + { label: 'password', value: 'password' }, + { label: 'money', value: 'money' }, + { label: 'text', value: 'text' }, + { label: 'textarea', value: 'textarea' }, + { label: 'date', value: 'date' }, + { label: 'option', value: 'option' }, + { label: 'dateTime', value: 'dateTime' }, + { label: 'dateWeek', value: 'dateWeek' }, + { label: 'dateMonth', value: 'dateMonth' }, + { label: 'dateQuarter', value: 'dateQuarter' }, + { label: 'dateYear', value: 'dateYear' }, + { label: 'dateRange', value: 'dateRange' }, + { label: 'dateTimeRange', value: 'dateTimeRange' }, + { label: 'time', value: 'time' }, + { label: 'timeRange', value: 'timeRange' }, + { label: 'select', value: 'select' }, + { label: 'checkbox', value: 'checkbox' }, + { label: 'rate', value: 'rate' }, + { label: 'radio', value: 'radio' }, + { label: 'radioButton', value: 'radioButton' }, + { label: 'progress', value: 'progress' }, + { label: 'percent', value: 'percent' }, + { label: 'second', value: 'second' }, + { label: 'avatar', value: 'avatar' }, + { label: 'code', value: 'code' }, + { label: 'switch', value: 'switch' }, + { label: 'fromNow', value: 'fromNow' }, + { label: 'image', value: 'image' }, + { label: 'jsonCode', value: 'jsonCode' }, + { label: 'color', value: 'color' }, +]; + +type SchemaItem = { + title: string, + valueType: string, + dataIndex: string, +}; + +const INIT_VALUES = [ + { title: 'Index', valueType: 'indexBorder', dataIndex: 'index' }, + { + title: 'Enterprise', + valueType: 'text', + dataIndex: 'name', + }, + { title: 'Company', valueType: 'text', dataIndex: 'authCompany' }, +]; + +const columns: ColumnItemList = [ + { + title: 'Title', + dataIndex: 'title', + type: 'input', + }, + { + title: 'ValueType', + dataIndex: 'valueType', + type: 'select', + options: tableColumnValueOptions, + }, + { + title: 'DataIndex', + dataIndex: 'dataIndex', + type: 'select', + }, +]; + +export default () => { + const [value, setValue] = useState(INIT_VALUES); + + return ( + { + setValue(values); + console.log('onChange', values); + }} + /> + ); +}; +``` diff --git a/docs/guide/umi.zh-CN.md b/docs/guide/umi.zh-CN.md index 94972769..861d7944 100644 --- a/docs/guide/umi.zh-CN.md +++ b/docs/guide/umi.zh-CN.md @@ -4,3 +4,118 @@ group: title: 框架使用 order: 5 --- + +## 与 Umi 集成 + +在中后台的研发场景， [umi](https://umijs.org/) 是一个非常不错的选择。`ProEditor` 与 `umi` 的集成非常容易。安装后直接使用即可。 + +```bash +npx create-umi@latest +or +yarn create umi +pnpm dlx create-umi@latest +``` + +### 依赖安装 + +创建好后 + +```bash +npm install @ant-design/pro-editor --save +or +pnpm install @ant-design/pro-editor +``` + +### 使用 + +```js +import type { ColumnItemList } from '@ant-design/pro-editor'; +import { ColumnList } from '@ant-design/pro-editor'; +import { useState } from 'react'; + +const tableColumnValueOptions = [ + { label: 'index', value: 'index' }, + { label: 'indexBorder', value: 'indexBorder' }, + { label: 'digit', value: 'digit' }, + { label: 'password', value: 'password' }, + { label: 'money', value: 'money' }, + { label: 'text', value: 'text' }, + { label: 'textarea', value: 'textarea' }, + { label: 'date', value: 'date' }, + { label: 'option', value: 'option' }, + { label: 'dateTime', value: 'dateTime' }, + { label: 'dateWeek', value: 'dateWeek' }, + { label: 'dateMonth', value: 'dateMonth' }, + { label: 'dateQuarter', value: 'dateQuarter' }, + { label: 'dateYear', value: 'dateYear' }, + { label: 'dateRange', value: 'dateRange' }, + { label: 'dateTimeRange', value: 'dateTimeRange' }, + { label: 'time', value: 'time' }, + { label: 'timeRange', value: 'timeRange' }, + { label: 'select', value: 'select' }, + { label: 'checkbox', value: 'checkbox' }, + { label: 'rate', value: 'rate' }, + { label: 'radio', value: 'radio' }, + { label: 'radioButton', value: 'radioButton' }, + { label: 'progress', value: 'progress' }, + { label: 'percent', value: 'percent' }, + { label: 'second', value: 'second' }, + { label: 'avatar', value: 'avatar' }, + { label: 'code', value: 'code' }, + { label: 'switch', value: 'switch' }, + { label: 'fromNow', value: 'fromNow' }, + { label: 'image', value: 'image' }, + { label: 'jsonCode', value: 'jsonCode' }, + { label: 'color', value: 'color' }, +]; + +type SchemaItem = { + title: string, + valueType: string, + dataIndex: string, +}; + +const INIT_VALUES = [ + { title: 'Index', valueType: 'indexBorder', dataIndex: 'index' }, + { + title: 'Enterprise', + valueType: 'text', + dataIndex: 'name', + }, + { title: 'Company', valueType: 'text', dataIndex: 'authCompany' }, +]; + +const columns: ColumnItemList = [ + { + title: 'Title', + dataIndex: 'title', + type: 'input', + }, + { + title: 'ValueType', + dataIndex: 'valueType', + type: 'select', + options: tableColumnValueOptions, + }, + { + title: 'DataIndex', + dataIndex: 'dataIndex', + type: 'select', + }, +]; + +export default () => { + const [value, setValue] = useState(INIT_VALUES); + + return ( + { + setValue(values); + console.log('onChange', values); + }} + /> + ); +}; +``` diff --git a/docs/index.en-US.md b/docs/index.en-US.md new file mode 100644 index 00000000..a8fba4f3 --- /dev/null +++ b/docs/index.en-US.md @@ -0,0 +1,35 @@ +--- +hero: + title: ProEditor + description: 🌟 Universal Editor UI Framework + actions: + - text: Get Started → + link: /guide/intro + - text: Github + link: https://github.com/ant-design/pro-editor + +features: + - title: Easy to Use + description: Wrapped on Ant Design, making it more user-friendly + image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr + + - title: Ant Design + description: Inherit the Ant Design design system, seamlessly integrate with antd projects + image: https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg + + - title: Universal Editor Components + description: Provide comprehensive editor components for users to customize their own editors + image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr + + - title: Preset Styles + description: Style in line with antd, no need for major modifications, naturally integrated, default user-friendly theme system + image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr + + - title: Preset Behaviors + description: Less code, fewer bugs, more functionality + image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr + + - title: TypeScript + description: Developed using TypeScript, providing complete type definition files, no need to frequently visit the official website + image: https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg +--- diff --git a/docs/index.md b/docs/index.md deleted file mode 100644 index f80e4d3d..00000000 --- a/docs/index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -hero: - title: ProEditor - description: 🌟 Universal Editor UI Framework ---- - -@ant-design/pro-editor diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md index c9e28204..ad855da3 100644 --- a/docs/index.zh-CN.md +++ b/docs/index.zh-CN.md @@ -2,6 +2,34 @@ hero: title: ProEditor description: 🌟 通用编辑器 UI 框架 ---- + actions: + - text: 快速开始 → + link: /guide/intro + - text: Github + link: https://github.com/ant-design/pro-editor + +features: + - title: 简单易用 + description: 在 Ant Design 上进行了自己的封装，更加易用 + image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr + + - title: Ant Design + description: 与 Ant Design 设计体系一脉相承，无缝对接 antd 项目 + image: https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg + + - title: 通用编辑器组件 + description: 提供完备的编辑器组件，方便使用者定制自己的编辑器 + image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr -@ant-design/pro-editor + - title: 预设样式 + description: 样式风格与 antd 一脉相承，无需魔改，浑然天成，默认好用的主题系统 + image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr + + - title: 预设行为 + description: 更少的代码，更少的 Bug，更多的功能 + image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr + + - title: TypeScript + description: 使用 TypeScript 开发，提供完整的类型定义文件，无需频繁打开官网 + image: https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg +--- diff --git a/docs/showcase/flow-editor.en-US.md b/docs/showcase/flow-editor.en-US.md deleted file mode 100644 index 3aae2357..00000000 --- a/docs/showcase/flow-editor.en-US.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Flow Editor Node Editor ---- - -# Introduction - -Flow Editor is a set of node-based editing tools for running large models. - -![](https://mdn.alipayobjects.com/huamei_rusp7w/afts/img/A*8TzqSK8jnhAAAAAAAAAAAAAADmB6AQ/original) - -## Access Address - - diff --git a/docs/showcase/flow-editor.zh-CN.md b/docs/showcase/flow-editor.zh-CN.md deleted file mode 100644 index fe7d0159..00000000 --- a/docs/showcase/flow-editor.zh-CN.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Flow Editor 节点编辑器 ---- - -# 简介 - -Flow Editor 是一套节点式运行大模型的编辑工具。 - -![](https://mdn.alipayobjects.com/huamei_rusp7w/afts/img/A*8TzqSK8jnhAAAAAAAAAAAAAADmB6AQ/original) - -## 访问地址 - - diff --git a/docs/showcase/index.en-US.md b/docs/showcase/index.en-US.md deleted file mode 100644 index a50f8653..00000000 --- a/docs/showcase/index.en-US.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Welcome PR -nav: - title: Use Cases - order: 999 ---- - -# Use Cases - -If your project uses ProEditor, you can submit a PR to add it to our use case library. - -![](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*688cTLS47_QAAAAAAAAAAAAADmuEAQ/original) diff --git a/docs/showcase/index.zh-CN.md b/docs/showcase/index.zh-CN.md deleted file mode 100644 index 4973b81b..00000000 --- a/docs/showcase/index.zh-CN.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 欢迎 PR -nav: - title: 使用案例 - order: 999 ---- - -# 使用案例 - -如您的项目使用到了 ProEditor，可以提交 PR 添加到我们的案例库中来。 - -![](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*688cTLS47_QAAAAAAAAAAAAADmuEAQ/original) diff --git a/docs/showcase/kitchen-color-studio.en-US.md b/docs/showcase/kitchen-color-studio.en-US.md deleted file mode 100644 index 92992036..00000000 --- a/docs/showcase/kitchen-color-studio.en-US.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Kitchen Color Studio Color System Editor ---- - -# Introduction - -Kitchen Color Studio is an open-source color system editor. - -![](https://raw.githubusercontent.com/ant-design/kitchen-color-studio/master/public/preview1.webp) - -## Access Address - - diff --git a/docs/showcase/kitchen-color-studio.zh-CN.md b/docs/showcase/kitchen-color-studio.zh-CN.md deleted file mode 100644 index c7d8f54a..00000000 --- a/docs/showcase/kitchen-color-studio.zh-CN.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: kitchen Color Studio 颜色系统编辑器 ---- - -# 简介 - -kitchen Color Studio 是一套开源的颜色系统编辑器。 - -![](https://raw.githubusercontent.com/ant-design/kitchen-color-studio/master/public/preview1.webp) - -## 访问地址 - - diff --git a/package.json b/package.json index 58020370..1cc57acb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ant-design/pro-editor", - "version": "0.40.0", + "version": "1.0.0", "description": "🌟 Lightweight Editor UI Framework", "homepage": "https://github.com/ant-design/pro-editor", "bugs": { diff --git a/src/index.ts b/src/index.ts index 1b5c40bd..821427b7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,6 +15,7 @@ export { default as FreeCanvas } from './FreeCanvas'; export type { FreeCanvasProps } from './FreeCanvas'; export * from './Highlight'; export * from './IconPicker'; +export * from './InteractContainer'; export { Layout as EditorLayout } from './Layout'; export { default as Markdown, type MarkdownProps } from './Markdown'; export * from './ProBuilder';