diff --git a/packages/plugins/@nocobase/plugin-mobile-client/src/client/router/Application.tsx b/packages/plugins/@nocobase/plugin-mobile-client/src/client/router/Application.tsx index e4d3652856..29ab54ff4a 100644 --- a/packages/plugins/@nocobase/plugin-mobile-client/src/client/router/Application.tsx +++ b/packages/plugins/@nocobase/plugin-mobile-client/src/client/router/Application.tsx @@ -7,123 +7,614 @@ * For more information, please refer to: https://www.nocobase.com/agreement. */ -import { ActionContextProvider, AdminProvider, css, cx, RemoteSchemaComponent, useViewport } from '@nocobase/client'; -import { DrawerProps, ModalProps } from 'antd'; -import React, { useMemo } from 'react'; -import { Outlet, useParams } from 'react-router-dom'; -import { MobileCore } from '../core'; -import { useInterfaceContext } from './InterfaceProvider'; -import { OpenInNewTab } from './OpenInNewTab'; +import { MenuOutlined } from '@ant-design/icons'; +import { css, useViewport } from '@nocobase/client'; +import { Dropdown, Switch } from 'antd'; +import { Badge, Button, Image, List, NavBar, SearchBar, Space, TabBar, Tabs } from 'antd-mobile'; +import { AddOutline, AppOutline, EditSOutline, SearchOutline, UserOutline } from 'antd-mobile-icons'; +import React, { useState } from 'react'; -const commonCSSVariables = css` - --nb-spacing: 14px; -`; -const commonCSSOverride = css``; -const commonDesignerCSS = css` - --nb-designer-top: 2px; - --nb-designer-right: 2px; - .nb-sortable-designer:hover { - position: relative; - > .general-schema-designer { - display: block; - } +const users = [ + { + id: '1', + avatar: + 'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Novalee Spicer', + description: 'Deserunt dolor ea eaque eos', + }, + { + id: '2', + avatar: + 'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9', + name: 'Sara Koivisto', + description: 'Animi eius expedita, explicabo', + }, + { + id: '3', + avatar: + 'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Marco Gregg', + description: 'Ab animi cumque eveniet ex harum nam odio omnis', + }, + { + id: '4', + avatar: + 'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Edith Koenig', + description: 'Commodi earum exercitationem id numquam vitae', + }, + { + id: '1', + avatar: + 'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Novalee Spicer', + description: 'Deserunt dolor ea eaque eos', + }, + { + id: '2', + avatar: + 'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9', + name: 'Sara Koivisto', + description: 'Animi eius expedita, explicabo', + }, + { + id: '3', + avatar: + 'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Marco Gregg', + description: 'Ab animi cumque eveniet ex harum nam odio omnis', + }, + { + id: '4', + avatar: + 'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Edith Koenig', + description: 'Commodi earum exercitationem id numquam vitae', + }, + { + id: '1', + avatar: + 'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Novalee Spicer', + description: 'Deserunt dolor ea eaque eos', + }, + { + id: '2', + avatar: + 'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9', + name: 'Sara Koivisto', + description: 'Animi eius expedita, explicabo', + }, + { + id: '3', + avatar: + 'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Marco Gregg', + description: 'Ab animi cumque eveniet ex harum nam odio omnis', + }, + { + id: '4', + avatar: + 'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Edith Koenig', + description: 'Commodi earum exercitationem id numquam vitae', + }, + { + id: '1', + avatar: + 'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Novalee Spicer', + description: 'Deserunt dolor ea eaque eos', + }, + { + id: '2', + avatar: + 'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9', + name: 'Sara Koivisto', + description: 'Animi eius expedita, explicabo', + }, + { + id: '3', + avatar: + 'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Marco Gregg', + description: 'Ab animi cumque eveniet ex harum nam odio omnis', + }, + { + id: '4', + avatar: + 'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ', + name: 'Edith Koenig', + description: 'Commodi earum exercitationem id numquam vitae', + }, +]; + +const SwitchItem = ({ title, defaultChecked = false }) => { + return ( +
+ {title} +
+ ); +}; + +const Add = (props) => { + const { items = [], size = 'mini' } = props; + return ( + + + + ); +}; + +const PageTabs = (props) => { + if (props.hidden) { + return null; } - .general-schema-designer { - position: absolute; - z-index: 999; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: none; - border: 0; - pointer-events: none; - > .general-schema-designer-icons { - position: absolute; - top: var(--nb-designer-top); - right: var(--nb-designer-right); - line-height: 16px; - pointer-events: all; - .ant-space-item { - background-color: var(--colorSettings); + return ( +
+ + + + + + + + + + +
+ ); +}; + +const PageSettings = ({ hideTabs = true }) => { + return ( +
+ , key: 'o1' }, + { label: , key: 'o2' }, + { label: , key: 'o2' }, + { + type: 'divider', + }, + { label: '数据范围', key: 'o2' }, + { label: '排序规则', key: 'o2' }, + ], + }} + trigger={['click']} + > + + +
+ ); }; -const modalProps = { - ...drawerProps, - style: { - maxWidth: 'calc(100% - 16px)', - }, - maskStyle: { - position: 'absolute', - }, - wrapClassName: css` - position: absolute !important; - `, +const Header = ({ + onBack = null, + back = false, + title = null, + showTabs = false, + showSearchBar = false, + actions = [], +}) => { + return ( +
+ {/* +
*/} + + {/* */} + + + } + right={ + + {actions.map((action) => action.right && action.active && action.element)} + + + } + > + {title} + + {/*
+ */} + {actions.map( + (action, key) => + action.bottom && + action.active && ( +
+ {action.element} +
+ ), + )} + {
+ ); +}; +const Footer = () => { + const tabs = [ + { + key: 'home', + title: '首页', + icon: , + badge: Badge.dot, + }, + // { + // key: 'todo', + // title: '待办', + // icon: , + // badge: '5', + // }, + // { + // key: 'message', + // title: '消息', + // icon: (active: boolean) => (active ? : ), + // badge: '99+', + // }, + { + key: 'personalCenter', + title: '用户列表', + icon: , + }, + ]; + return ( +
+ +
+ + {tabs.map((item) => ( + + ))} + + +
+ +
+ ); }; -const useMobileSchemaUid = () => { - return 'nocobase-mobile-container'; +const Page = (props) => { + return ( +
+ + {props.children} +
+ ); +}; + +Page.Content = (props) => { + return ( +
+ {props.children} +
+ ); }; const MApplication: React.FC = (props) => { - const mobileSchemaUid = useMobileSchemaUid(); - const params = useParams<{ name: string }>(); - const interfaceContext = useInterfaceContext(); - const Provider = useMemo(() => { - return interfaceContext ? React.Fragment : AdminProvider; - }, [interfaceContext]); - useViewport(); - + const showTabs = false || !!props['showTabs']; + const [active, setActive] = useState(false); return ( - - - - + + +
setActive(false)} + back={active} + title={active ? 'Novalee Spicer' : '首页'} + showTabs={showTabs} + actions={ + active + ? [ + { + label: '编辑', + right: true, + element: , + key: 'o1', + active: active, + }, + ] + : [ + { + label: , + key: 'o1', + active: !active, + }, + { + label: '筛选', + right: true, + element: , + key: 'o1', + active: !active, + }, + { + label: '搜索框', + bottom: true, + element: , + key: 'o1', + // active: true, + }, + { label: '动作面板', key: 'o3' }, + { label: '弹出层', key: 'o3' }, + { label: '链接', key: 'o2' }, + { label: '扫码', key: 'o4' }, + { label: '菜单', key: 'o4' }, + ] + } + /> + + {active ? (
- {params.name && !params.name.startsWith('tab_') ? ( - - ) : ( - - {props.children} - - )} - {/* Global action will insert here */} -
-
- - - + className={css` + padding: 12px; + background: #fff; + img { + max-width: 100%; + } + `} + dangerouslySetInnerHTML={{ + __html: ` +

Novalee Spicer

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ `, + }} + /> + ) : ( + false && ( + + {users.map((user) => ( + } + description={user.description} + onClick={() => setActive(true)} + > + {user.name} + + ))} + + ) + )} + + + Add block + + + {!active &&