feat: 备注增加字数限制

JackySoft · Aug 26, 2024 · c58bba2 · c58bba2
1 parent 19494a6
commit c58bba2
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 17 deletions.
diff --git a/packages/docs/.vitepress/config.mts b/packages/docs/.vitepress/config.mts
@@ -17,6 +17,7 @@ export default defineConfig({
       { text: '项目', link: '/project' },
       { text: '页面', link: '/page' },
       { text: '组件', link: '/lib' },
+      { text: '综合案例', link: '/example' },
       { text: '团队', link: '/team' },
     ],
 
@@ -55,6 +56,10 @@ export default defineConfig({
           { text: '自定义组件案例', link: '/lib/LoginForm' },
         ],
       },
+      {
+        text: '综合案例',
+        items: [{ text: '登录事件流', link: '/example/login' }],
+      },
       {
         text: '团队介绍',
         link: '/team',

diff --git a/packages/docs/src/example/index.md b/packages/docs/src/example/index.md
@@ -0,0 +1,16 @@
+# 综合案例
+
+基于实际项目场景，围绕编辑器的使用，搭建一些综合案例，通过视频教学的方式教大家使用低代码平台。
+
+## 功能介绍
+
+- 编辑器使用
+- 组件使用
+- 属性配置使用
+- 样式配置使用
+- 事件配置使用
+- 接口配置使用
+- 页面权限使用
+- 页面变量使用
+- 页面大纲使用
+- 页面 json 源码使用
diff --git a/packages/docs/src/example/login.md b/packages/docs/src/example/login.md
@@ -0,0 +1,12 @@
+# 登录案例
+
+- 画一个静态的登录页面
+- 配置事件流，实现表单重置
+- 配置事件流，实现接口调用
+- 配置事件流，实现变量填充，并且实现数据联动
+
+<video width="680" controls>
+
+  <source src="https://marsview.cdn.bcebos.com/vedio/login-demo.mp4" type="video/mp4">  
+  您的浏览器不支持 Video 标签。  
+</video>
diff --git a/packages/editor/src/components/ApiConfig/components/BaseSetting.tsx b/packages/editor/src/components/ApiConfig/components/BaseSetting.tsx
@@ -1,6 +1,6 @@
 import VariableBind from '@/components/VariableBind/VariableBind';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Form, Radio, Input, Switch, Space } from 'antd';
+import { Form, Radio, Input, Switch, Space, Popover } from 'antd';
 
 const SettingForm = function () {
   return (
@@ -17,7 +17,7 @@ const SettingForm = function () {
           },
         ]}
       >
-        <Input placeholder="请输入接口中文名称，eg: 用户列表" />
+        <Input placeholder="请输入接口中文名称，eg: 用户列表" maxLength={20} showCount />
       </Form.Item>
       <Form.Item label="请求方式" name="method">
         <Radio.Group buttonStyle="solid">
@@ -103,16 +103,26 @@ const SettingForm = function () {
       {/* <Form.Item name="sendOn" extra={'用表达式来设置该请求的发送条件'} label="发送条件">
         <Input />
       </Form.Item> */}
-      <Form.Item label="参数替换" extra={'默认会把事件流参数和当前参数合并；保留参数为只取当前参数，参数支持模板语法：${id}。'} name="replaceData">
+      <Form.Item
+        label="参数替换"
+        name="replaceData"
+        tooltip={
+          <>
+            <p>1. 默认会把事件流参数和自定义参数合并；</p>
+            <p>2. 覆盖参数是事件流中上下文的参数覆盖自定义参数；</p>
+            <p>3. 保留参数为只取自定义参数，参数支持模板语法：{'${id}'}。</p>
+          </>
+        }
+      >
         <Radio.Group buttonStyle="solid">
           <Radio.Button value="merge">合并参数</Radio.Button>
           <Radio.Button value="cover">覆盖参数</Radio.Button>
           <Radio.Button value="reserve">保留参数</Radio.Button>
         </Radio.Group>
       </Form.Item>
-      <Form.Item label="开启代理" name="isCors" extra="开启接口代理对解决跨域问题很有用">
+      {/* <Form.Item label="开启代理" name="isCors" extra="开启接口代理对解决跨域问题很有用">
         <Switch />
-      </Form.Item>
+      </Form.Item> */}
     </>
   );
 };

diff --git a/packages/editor/src/components/ApiConfig/components/ReturnStructure.tsx b/packages/editor/src/components/ApiConfig/components/ReturnStructure.tsx
@@ -8,16 +8,16 @@ const ReturnStructure = function () {
         <span style={{ marginLeft: 5 }}>用来定义接口返回结构，推荐结构：{`{ code: 0, data: {}, msg: '' }`}</span>
       </p>
       <Form.Item label="业务码" extra={'接口返回业务状态码，默认是：code'} name={['result', 'code']}>
-        <Input placeholder="默认为：code" />
+        <Input placeholder="默认为：code" maxLength={15} showCount />
       </Form.Item>
       <Form.Item label="成功值" extra={'接口返回成功时对应的状态码值，默认是：0'} name={['result', 'codeValue']}>
         <InputNumber placeholder="默认为：0" />
       </Form.Item>
       <Form.Item label="结果字段" extra={'接口返回结果字段，默认是：data'} name={['result', 'data']}>
-        <Input placeholder="默认为：data" />
+        <Input placeholder="默认为：data" maxLength={15} showCount />
       </Form.Item>
       <Form.Item label="报错字段" extra={'接口返回报错字段，默认是：msg'} name={['result', 'msg']}>
-        <Input placeholder="默认为：msg" />
+        <Input placeholder="默认为：msg" maxLength={15} showCount />
       </Form.Item>
     </>
   );

diff --git a/packages/editor/src/components/ApiConfig/components/ReturnTips.tsx b/packages/editor/src/components/ApiConfig/components/ReturnTips.tsx
@@ -8,10 +8,10 @@ const ReturnTips = function () {
         <span style={{ marginLeft: 5 }}>用来定义成功或者失败时，系统显示提示文案</span>
       </p>
       <Form.Item label="成功提示" name={['tips', 'success']}>
-        <Input placeholder="默认不提示" />
+        <Input placeholder="默认不提示" maxLength={50} showCount />
       </Form.Item>
       <Form.Item label="失败提示" name={['tips', 'fail']}>
-        <Input placeholder="默认不提示" />
+        <Input placeholder="默认不提示" maxLength={50} showCount />
       </Form.Item>
       <Form.Item label="系统报错" name={['tips', 'isError']} valuePropName="checked" extra={'开启系统报错后，会优先使用接口返回错误信息。'}>
         <Switch />

diff --git a/packages/editor/src/layout/components/Header/CreatePage.tsx b/packages/editor/src/layout/components/Header/CreatePage.tsx
@@ -78,10 +78,10 @@ const CreatePage = (props: IModalProp) => {
     >
       <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={{ is_public: 1, is_edit: 1 }}>
         <Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入页面名称' }]}>
-          <Input placeholder="请输入页面名称" />
+          <Input placeholder="请输入页面名称" maxLength={15} showCount />
         </Form.Item>
         <Form.Item label="描述" name="remark">
-          <Input placeholder="请输入页面描述" />
+          <Input placeholder="请输入页面描述" maxLength={20} showCount />
         </Form.Item>
         <Form.Item label="权限" name="is_public" rules={[{ required: true, message: '请选择访问类型' }]}>
           <Radio.Group>

diff --git a/packages/editor/src/layout/components/Menu/Variable/VariableSetting.tsx b/packages/editor/src/layout/components/Menu/Variable/VariableSetting.tsx
@@ -91,7 +91,7 @@ const VariableSetting = (_: any, ref: any) => {
             },
           ]}
         >
-          <Input placeholder="请输入变量名称，以字母开头，支持大小写、下划线" />
+          <Input placeholder="请输入变量名称，以字母开头，支持大小写、下划线" maxLength={20} showCount />
         </Form.Item>
         <Form.Item label="变量类型" name="type" rules={[{ required: true, message: '请选择变量类型' }]}>
           <Radio.Group buttonStyle="solid" onChange={(e) => handleChange(e.target.value)}>
@@ -121,7 +121,7 @@ const VariableSetting = (_: any, ref: any) => {
           )}
         </Form.Item>
         <Form.Item label="变量说明" name="remark">
-          <Input placeholder="请输入变量说明" />
+          <Input placeholder="请输入变量说明" maxLength={20} showCount />
         </Form.Item>
       </Form>
     </Modal>

diff --git a/packages/editor/src/pages/admin/config/index.tsx b/packages/editor/src/pages/admin/config/index.tsx
@@ -88,7 +88,7 @@ const Config: React.FC = memo(() => {
         </Form.Item>
         <h3>基础配置</h3>
         <Form.Item label="项目名称" name="name" rules={[{ required: true, message: '请输入项目名称' }]}>
-          <Input placeholder={'项目名称: Mars'} {...props} />
+          <Input placeholder={'项目名称: Mars'} {...props} maxLength={15} showCount />
         </Form.Item>
         <Form.Item label="项目描述" name="remark" rules={[{ required: true, message: '请输入项目描述' }]}>
           <Input.TextArea autoSize placeholder={'请输入项目描述'} maxLength={20} showCount={type !== 'detail'} {...props} />

diff --git a/packages/editor/src/pages/admin/menu/CreateMenu.tsx b/packages/editor/src/pages/admin/menu/CreateMenu.tsx
@@ -131,7 +131,7 @@ export default function CreateMenu(props: IModalProp<Menu.EditParams>) {
                 const type = form.getFieldValue('type');
                 return type === 1 ? (
                   <Form.Item label="菜单名称" name="name" rules={[{ required: true, message: '请输入菜单名称' }]}>
-                    <Input placeholder="请输入菜单名称" allowClear />
+                    <Input placeholder="请输入菜单名称" allowClear maxLength={15} showCount />
                   </Form.Item>
                 ) : type === 2 ? (
                   <Form.Item label="按钮名称" name="name" rules={[{ required: true, message: '请输入按钮名称' }]}>

diff --git a/packages/editor/src/pages/admin/role/CreateRole.tsx b/packages/editor/src/pages/admin/role/CreateRole.tsx
@@ -79,7 +79,7 @@ export default function CreateRole(props: IModalProp<Role.RoleItem>) {
           <Input placeholder="请输入角色名称" />
         </Form.Item>
         <Form.Item name="remark" label="备注">
-          <Input.TextArea placeholder="请输入备注" />
+          <Input.TextArea placeholder="请输入备注" maxLength={20} showCount />
         </Form.Item>
       </Form>
     </Modal>