From 4fe17847d075c03bc4df56a20bb14b85382d6848 Mon Sep 17 00:00:00 2001 From: ZhangAo Date: Sat, 11 Apr 2026 17:09:25 +0800 Subject: [PATCH] u' --- code/app/app-rn4/package.json | 1 + code/app/app-rn4/pnpm-lock.yaml | 42 +++- code/app/app-rn4/src/app/_layout.tsx | 2 +- code/app/app-rn4/src/app/index.tsx | 230 ++++++++---------- .../app-rn4/src/components/layout/index.tsx | 72 ++++++ .../app-rn4/src/components/ui/box/index.tsx | 19 ++ .../src/components/ui/box/index.web.tsx | 19 ++ .../app-rn4/src/components/ui/box/styles.tsx | 10 + .../src/components/ui/center/index.tsx | 22 ++ .../src/components/ui/center/index.web.tsx | 20 ++ .../src/components/ui/center/styles.tsx | 8 + .../src/components/ui/hstack/index.tsx | 27 ++ .../src/components/ui/hstack/index.web.tsx | 26 ++ .../src/components/ui/hstack/styles.tsx | 25 ++ .../src/components/ui/vstack/index.tsx | 28 +++ .../src/components/ui/vstack/index.web.tsx | 27 ++ .../src/components/ui/vstack/styles.tsx | 25 ++ .../ocr-uniapp/src/pages-sub/upload/index.vue | 1 + 18 files changed, 474 insertions(+), 130 deletions(-) create mode 100644 code/app/app-rn4/src/components/layout/index.tsx create mode 100644 code/app/app-rn4/src/components/ui/box/index.tsx create mode 100644 code/app/app-rn4/src/components/ui/box/index.web.tsx create mode 100644 code/app/app-rn4/src/components/ui/box/styles.tsx create mode 100644 code/app/app-rn4/src/components/ui/center/index.tsx create mode 100644 code/app/app-rn4/src/components/ui/center/index.web.tsx create mode 100644 code/app/app-rn4/src/components/ui/center/styles.tsx create mode 100644 code/app/app-rn4/src/components/ui/hstack/index.tsx create mode 100644 code/app/app-rn4/src/components/ui/hstack/index.web.tsx create mode 100644 code/app/app-rn4/src/components/ui/hstack/styles.tsx create mode 100644 code/app/app-rn4/src/components/ui/vstack/index.tsx create mode 100644 code/app/app-rn4/src/components/ui/vstack/index.web.tsx create mode 100644 code/app/app-rn4/src/components/ui/vstack/styles.tsx diff --git a/code/app/app-rn4/package.json b/code/app/app-rn4/package.json index 3e33c336..a442c65a 100644 --- a/code/app/app-rn4/package.json +++ b/code/app/app-rn4/package.json @@ -32,6 +32,7 @@ "expo-symbols": "~55.0.7", "expo-system-ui": "~55.0.15", "expo-web-browser": "~55.0.14", + "lucide-react-native": "^1.8.0", "nativewind": "^4.2.3", "react": "19.2.0", "react-dom": "19.2.0", diff --git a/code/app/app-rn4/pnpm-lock.yaml b/code/app/app-rn4/pnpm-lock.yaml index 1c72d857..132fe89c 100644 --- a/code/app/app-rn4/pnpm-lock.yaml +++ b/code/app/app-rn4/pnpm-lock.yaml @@ -71,6 +71,9 @@ importers: expo-web-browser: specifier: ~55.0.14 version: 55.0.14(expo@55.0.13)(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0)) + lucide-react-native: + specifier: ^1.8.0 + version: 1.8.0(react-native-svg@15.15.3(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0) nativewind: specifier: ^4.2.3 version: 4.2.3(react-native-reanimated@4.2.1(react-native-worklets@0.7.2(@babel/core@7.29.0)(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native-safe-area-context@5.6.2(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native-svg@15.15.3(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)(tailwindcss@3.4.19(yaml@2.8.3)) @@ -999,48 +1002,56 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [glibc] '@oxfmt/binding-linux-arm64-musl@0.44.0': resolution: {integrity: sha512-AlObQIXyVRZ96LbtVljtFq0JqH5B92NU+BQeDFrXWBUWlCKAM0wF5GLfIhCLT5kQ3Sl+U0YjRJ7Alqj5hGQaCg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [musl] '@oxfmt/binding-linux-ppc64-gnu@0.44.0': resolution: {integrity: sha512-YcFE8/q/BbrCiIiM5piwbkA6GwJc5QqhMQp2yDrqQ2fuVkZ7CInb1aIijZ/k8EXc72qXMSwKpVlBv1w/MsGO/A==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] + libc: [glibc] '@oxfmt/binding-linux-riscv64-gnu@0.44.0': resolution: {integrity: sha512-eOdzs6RqkRzuqNHUX5C8ISN5xfGh4xDww8OEd9YAmc3OWN8oAe5bmlIqQ+rrHLpv58/0BuU48bxkhnIGjA/ATQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] + libc: [glibc] '@oxfmt/binding-linux-riscv64-musl@0.44.0': resolution: {integrity: sha512-YBgNTxntD/QvlFUfgvh8bEdwOhXiquX8gaofZJAwYa/Xp1S1DQrFVZEeck7GFktr24DztsSp8N8WtWCBwxs0Hw==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] + libc: [musl] '@oxfmt/binding-linux-s390x-gnu@0.44.0': resolution: {integrity: sha512-GLIh1R6WHWshl/i4QQDNgj0WtT25aRO4HNUWEoitxiywyRdhTFmFEYT2rXlcl9U6/26vhmOqG5cRlMLG3ocaIA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] + libc: [glibc] '@oxfmt/binding-linux-x64-gnu@0.44.0': resolution: {integrity: sha512-gZOpgTlOsLcLfAF9qgpTr7FIIFSKnQN3hDf/0JvQ4CIwMY7h+eilNjxq/CorqvYcEOu+LRt1W4ZS7KccEHLOdA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [glibc] '@oxfmt/binding-linux-x64-musl@0.44.0': resolution: {integrity: sha512-1CyS9JTB+pCUFYFI6pkQGGZaT/AY5gnhHVrQQLhFba6idP9AzVYm1xbdWfywoldTYvjxQJV6x4SuduCIfP3W+A==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [musl] '@oxfmt/binding-openharmony-arm64@0.44.0': resolution: {integrity: sha512-bmEv70Ak6jLr1xotCbF5TxIKjsmQaiX+jFRtnGtfA03tJPf6VG3cKh96S21boAt3JZc+Vjx8PYcDuLj39vM2Pw==} @@ -1113,48 +1124,56 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [glibc] '@oxlint/binding-linux-arm64-musl@1.59.0': resolution: {integrity: sha512-3CtsKp7NFB3OfqQzbuAecrY7GIZeiv7AD+xutU4tefVQzlfmTI7/ygWLrvkzsDEjTlMq41rYHxgsn6Yh8tybmA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] + libc: [musl] '@oxlint/binding-linux-ppc64-gnu@1.59.0': resolution: {integrity: sha512-K0diOpT3ncDmOfl9I1HuvpEsAuTxkts0VYwIv/w6Xiy9CdwyPBVX88Ga9l8VlGgMrwBMnSY4xIvVlVY/fkQk7Q==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] + libc: [glibc] '@oxlint/binding-linux-riscv64-gnu@1.59.0': resolution: {integrity: sha512-xAU7+QDU6kTJJ7mJLOGgo7oOjtAtkKyFZ0Yjdb5cEo3DiCCPFLvyr08rWiQh6evZ7RiUTf+o65NY/bqttzJiQQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] + libc: [glibc] '@oxlint/binding-linux-riscv64-musl@1.59.0': resolution: {integrity: sha512-KUmZmKlTTyauOnvUNVxK7G40sSSx0+w5l1UhaGsC6KPpOYHenx2oqJTnabmpLJicok7IC+3Y6fXAUOMyexaeJQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [riscv64] os: [linux] + libc: [musl] '@oxlint/binding-linux-s390x-gnu@1.59.0': resolution: {integrity: sha512-4usRxC8gS0PGdkHnRmwJt/4zrQNZyk6vL0trCxwZSsAKM+OxhB8nKiR+mhjdBbl8lbMh2gc3bZpNN/ik8c4c2A==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] + libc: [glibc] '@oxlint/binding-linux-x64-gnu@1.59.0': resolution: {integrity: sha512-s/rNE2gDmbwAOOP493xk2X7M8LZfI1LJFSSW1+yanz3vuQCFPiHkx4GY+O1HuLUDtkzGlhtMrIcxxzyYLv308w==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [glibc] '@oxlint/binding-linux-x64-musl@1.59.0': resolution: {integrity: sha512-+yYj1udJa2UvvIUmEm0IcKgc0UlPMgz0nsSTvkPL2y6n0uU5LgIHSwVu4AHhrve6j9BpVSoRksnz8c9QcvITJA==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] + libc: [musl] '@oxlint/binding-openharmony-arm64@1.59.0': resolution: {integrity: sha512-bUplUb48LYsB3hHlQXP2ZMOenpieWoOyppLAnnAhuPag3MGPnt+7caxE3w/Vl9wpQsTA3gzLntQi9rxWrs7Xqg==} @@ -2932,7 +2951,7 @@ packages: glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} - deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me + deprecated: Glob versions prior to v9 are no longer supported graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} @@ -3208,48 +3227,56 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] lightningcss-linux-arm64-gnu@1.32.0: resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] lightningcss-linux-arm64-musl@1.27.0: resolution: {integrity: sha512-rCGBm2ax7kQ9pBSeITfCW9XSVF69VX+fm5DIpvDZQl4NnQoMQyRwhZQm9pd59m8leZ1IesRqWk2v/DntMo26lg==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [musl] lightningcss-linux-arm64-musl@1.32.0: resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [musl] lightningcss-linux-x64-gnu@1.27.0: resolution: {integrity: sha512-Dk/jovSI7qqhJDiUibvaikNKI2x6kWPN79AQiD/E/KeQWMjdGe9kw51RAgoWFDi0coP4jinaH14Nrt/J8z3U4A==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [glibc] lightningcss-linux-x64-gnu@1.32.0: resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [glibc] lightningcss-linux-x64-musl@1.27.0: resolution: {integrity: sha512-QKjTxXm8A9s6v9Tg3Fk0gscCQA1t/HMoF7Woy1u68wCk5kS4fR+q3vXa1p3++REW784cRAtkYKrPy6JKibrEZA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [musl] lightningcss-linux-x64-musl@1.32.0: resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [musl] lightningcss-win32-arm64-msvc@1.27.0: resolution: {integrity: sha512-/wXegPS1hnhkeG4OXQKEMQeJd48RDC3qdh+OA8pCuOPCyvnm/yEayrJdJVqzBsqpy1aJklRCVxscpFur80o6iQ==} @@ -3318,6 +3345,13 @@ packages: lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lucide-react-native@1.8.0: + resolution: {integrity: sha512-trgqSA2ghSHUE3yLUBTdhjF1EMbgcJuccI1VXe6zTI2u4tbeUXbtXeHGORRdeGUdC80XBn/XJa1YrG8uvKhpNg==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-native: '*' + react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 + makeerror@1.0.12: resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==} @@ -8414,6 +8448,12 @@ snapshots: dependencies: yallist: 3.1.1 + lucide-react-native@1.8.0(react-native-svg@15.15.3(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0): + dependencies: + react: 19.2.0 + react-native: 0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0) + react-native-svg: 15.15.3(react-native@0.83.4(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0) + makeerror@1.0.12: dependencies: tmpl: 1.0.5 diff --git a/code/app/app-rn4/src/app/_layout.tsx b/code/app/app-rn4/src/app/_layout.tsx index e6de7443..1a39ff24 100644 --- a/code/app/app-rn4/src/app/_layout.tsx +++ b/code/app/app-rn4/src/app/_layout.tsx @@ -14,7 +14,7 @@ export default function RootLayout() { return ( - + {/* */} diff --git a/code/app/app-rn4/src/app/index.tsx b/code/app/app-rn4/src/app/index.tsx index 1a8beeac..088688e6 100644 --- a/code/app/app-rn4/src/app/index.tsx +++ b/code/app/app-rn4/src/app/index.tsx @@ -1,144 +1,118 @@ -import { BlurTargetView, BlurView } from "expo-blur"; -import React, { useRef } from "react"; -import { ScrollView, StyleSheet, Text, View } from "react-native"; - -export default function OnlyBlurDemo() { - const targetRef = useRef(null); +import Layout from "@/components/layout"; +import { View, Text } from "react-native"; +export default function Index() { return ( - - {/* 👇 Blur 目标区域 */} - - - - 蓝色卡片 - - - - 橙色卡片 - - - - 绿色卡片 - - - {Array.from({ length: 10 }).map((_, i) => ( - - 列表项 {i + 1} - - ))} - - - 紫色区域 - - - - 红色区域 - - - - - {/* 👇 毛玻璃底部栏（稳定版） */} - - {/* 用 overlay 替代 opacity（避免闪烁） */} - - - - TabBar - - - + + + 123 + + ); } -const styles = StyleSheet.create({ - blur: { - position: "absolute", - left: 0, - right: 0, - bottom: 0, - height: 56, - overflow: "hidden", - borderRadius: 999, - margin: 16, +// import React, { useState } from "react"; +// import { View, Text, StyleSheet, TouchableOpacity } from "react-native"; +// import { Ionicons } from "@expo/vector-icons"; - // ✨ 关键：只保留极轻“环境感” - shadowColor: "#000", - shadowOffset: { width: 0, height: 10 }, - shadowOpacity: 0.03, - shadowRadius: 20, +// const TABS = [ +// { label: "首页", icon: "home-outline", activeIcon: "home" }, +// { label: "统计", icon: "stats-chart-outline", activeIcon: "stats-chart" }, +// { label: "应用", icon: "grid-outline", activeIcon: "grid" }, // 中间 +// { label: "聊天", icon: "chatbubble-ellipses-outline", activeIcon: "chatbubble-ellipses" }, +// { label: "我的", icon: "person-outline", activeIcon: "person" }, +// ]; - // Android 基本关闭 - elevation: 0, +// export default function CapsuleTabBarIconDemo() { +// const [active, setActive] = useState(0); - // ✨ 玻璃底（很关键） - backgroundColor: "rgba(255,255,255,0.10)", +// return ( +// +// - // ✨ 极弱边缘，不要存在感 - borderWidth: 0.5, - borderColor: "rgba(255,255,255,0.12)", - }, +// {/* 👇 悬浮 TabBar */} +// +// +// {TABS.map((item, index) => { +// const isActive = index === active; - overlay: { - ...StyleSheet.absoluteFillObject, - backgroundColor: "rgba(249,249,249,0.4)", - }, +// return ( +// setActive(index)} +// activeOpacity={0.8} +// > +// - tabContent: { - flex: 1, - alignItems: "center", - justifyContent: "center", - }, +// {item.label} +// +// ); +// })} +// +// +// +// ); +// } - tabText: { - fontSize: 14, - fontWeight: "600", - color: "#333", - }, +// const styles = StyleSheet.create({ +// container: { +// flex: 1, +// backgroundColor: "#F2F3F5", +// }, - card: { - height: 120, - borderRadius: 16, - marginBottom: 16, - padding: 16, - justifyContent: "flex-end", - }, +// wrapper: { +// position: "absolute", +// left: 0, +// right: 0, +// bottom: 24, +// alignItems: "center", +// }, - cardText: { - color: "#FFFFFF", - fontSize: 18, - fontWeight: "600", - }, +// tabBar: { +// flexDirection: "row", +// height: 64, +// paddingHorizontal: 8, +// borderRadius: 999, - listItem: { - height: 60, - borderRadius: 12, - marginBottom: 12, - paddingHorizontal: 16, - justifyContent: "center", - }, +// // ✅ 半透明更高级 +// backgroundColor: "rgba(255,255,255,0.95)", - listText: { - fontSize: 16, - color: "#333", - }, -}); +// // ✅ 极弱阴影（可去掉） +// shadowColor: "#000", +// shadowOffset: { width: 0, height: 4 }, +// shadowOpacity: 0.05, +// shadowRadius: 12, +// }, + +// tabItem: { +// flex: 1, +// alignItems: "center", +// justifyContent: "center", +// }, + +// text: { +// fontSize: 11, +// marginTop: 2, +// color: "#888", +// }, + +// activeText: { +// color: "#111", +// fontWeight: "600", +// }, + +// // ⭐ 精髓：比背景高亮更高级 +// indicator: { +// position: "absolute", +// bottom: 6, +// width: 16, +// height: 3, +// borderRadius: 2, +// backgroundColor: "#111", +// }, +// }); diff --git a/code/app/app-rn4/src/components/layout/index.tsx b/code/app/app-rn4/src/components/layout/index.tsx new file mode 100644 index 00000000..adfdea47 --- /dev/null +++ b/code/app/app-rn4/src/components/layout/index.tsx @@ -0,0 +1,72 @@ +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import React, { ReactNode } from "react"; +import { View, Text } from "react-native"; +import Ionicons from "@expo/vector-icons/Ionicons"; +import AntDesign from "@expo/vector-icons/AntDesign"; +import { ChevronLeft, SwatchBook, CircleChevronLeft, CirclePower } from "lucide-react-native"; + +type LayoutProps = { + children: ReactNode; +}; + +export default function Layout({ children }: LayoutProps) { + const insets = useSafeAreaInsets(); + return ( + + + {children} + + + + {/* 左区域 */} + + + + + {/* 中间标题 */} + + 记账 + + + {/* 右区域 */} + + + + + + + + + + + + + + + + + footer + + + ); +} diff --git a/code/app/app-rn4/src/components/ui/box/index.tsx b/code/app/app-rn4/src/components/ui/box/index.tsx new file mode 100644 index 00000000..f22bb2fb --- /dev/null +++ b/code/app/app-rn4/src/components/ui/box/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { View, ViewProps } from 'react-native'; + +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { boxStyle } from './styles'; + +type IBoxProps = ViewProps & + VariantProps & { className?: string }; + +const Box = React.forwardRef, IBoxProps>( + function Box({ className, ...props }, ref) { + return ( + + ); + } +); + +Box.displayName = 'Box'; +export { Box }; diff --git a/code/app/app-rn4/src/components/ui/box/index.web.tsx b/code/app/app-rn4/src/components/ui/box/index.web.tsx new file mode 100644 index 00000000..8839eeb5 --- /dev/null +++ b/code/app/app-rn4/src/components/ui/box/index.web.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { boxStyle } from './styles'; + +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; + +type IBoxProps = React.ComponentPropsWithoutRef<'div'> & + VariantProps & { className?: string }; + +const Box = React.forwardRef(function Box( + { className, ...props }, + ref +) { + return ( +
+ ); +}); + +Box.displayName = 'Box'; +export { Box }; diff --git a/code/app/app-rn4/src/components/ui/box/styles.tsx b/code/app/app-rn4/src/components/ui/box/styles.tsx new file mode 100644 index 00000000..d2ade827 --- /dev/null +++ b/code/app/app-rn4/src/components/ui/box/styles.tsx @@ -0,0 +1,10 @@ +import { tva } from '@gluestack-ui/utils/nativewind-utils'; +import { isWeb } from '@gluestack-ui/utils/nativewind-utils'; + +const baseStyle = isWeb + ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none' + : ''; + +export const boxStyle = tva({ + base: baseStyle, +}); diff --git a/code/app/app-rn4/src/components/ui/center/index.tsx b/code/app/app-rn4/src/components/ui/center/index.tsx new file mode 100644 index 00000000..79ee74f5 --- /dev/null +++ b/code/app/app-rn4/src/components/ui/center/index.tsx @@ -0,0 +1,22 @@ +import { View, ViewProps } from 'react-native'; +import React from 'react'; +import { centerStyle } from './styles'; +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; + +type ICenterProps = ViewProps & VariantProps; + +const Center = React.forwardRef, ICenterProps>( + function Center({ className, ...props }, ref) { + return ( + + ); + } +); + +Center.displayName = 'Center'; + +export { Center }; diff --git a/code/app/app-rn4/src/components/ui/center/index.web.tsx b/code/app/app-rn4/src/components/ui/center/index.web.tsx new file mode 100644 index 00000000..023a01df --- /dev/null +++ b/code/app/app-rn4/src/components/ui/center/index.web.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { centerStyle } from './styles'; + +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; + +type ICenterProps = React.ComponentPropsWithoutRef<'div'> & + VariantProps; + +const Center = React.forwardRef(function Center( + { className, ...props }, + ref +) { + return ( +
+ ); +}); + +Center.displayName = 'Center'; + +export { Center }; diff --git a/code/app/app-rn4/src/components/ui/center/styles.tsx b/code/app/app-rn4/src/components/ui/center/styles.tsx new file mode 100644 index 00000000..576d23aa --- /dev/null +++ b/code/app/app-rn4/src/components/ui/center/styles.tsx @@ -0,0 +1,8 @@ +import { tva } from '@gluestack-ui/utils/nativewind-utils'; +import { isWeb } from '@gluestack-ui/utils/nativewind-utils'; + +const baseStyle = isWeb ? 'flex flex-col relative z-0' : ''; + +export const centerStyle = tva({ + base: `justify-center items-center ${baseStyle}`, +}); diff --git a/code/app/app-rn4/src/components/ui/hstack/index.tsx b/code/app/app-rn4/src/components/ui/hstack/index.tsx new file mode 100644 index 00000000..d05dc1b6 --- /dev/null +++ b/code/app/app-rn4/src/components/ui/hstack/index.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { View } from 'react-native'; +import type { ViewProps } from 'react-native'; +import { hstackStyle } from './styles'; + +type IHStackProps = ViewProps & VariantProps; + +const HStack = React.forwardRef, IHStackProps>( + function HStack({ className, space, reversed, ...props }, ref) { + return ( + + ); + } +); + +HStack.displayName = 'HStack'; + +export { HStack }; diff --git a/code/app/app-rn4/src/components/ui/hstack/index.web.tsx b/code/app/app-rn4/src/components/ui/hstack/index.web.tsx new file mode 100644 index 00000000..58f5b6a9 --- /dev/null +++ b/code/app/app-rn4/src/components/ui/hstack/index.web.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { hstackStyle } from './styles'; + +type IHStackProps = React.ComponentPropsWithoutRef<'div'> & + VariantProps; + +const HStack = React.forwardRef, IHStackProps>( + function HStack({ className, space, reversed, ...props }, ref) { + return ( +
+ ); + } +); + +HStack.displayName = 'HStack'; + +export { HStack }; diff --git a/code/app/app-rn4/src/components/ui/hstack/styles.tsx b/code/app/app-rn4/src/components/ui/hstack/styles.tsx new file mode 100644 index 00000000..2ab1e49f --- /dev/null +++ b/code/app/app-rn4/src/components/ui/hstack/styles.tsx @@ -0,0 +1,25 @@ +import { isWeb } from '@gluestack-ui/utils/nativewind-utils'; +import { tva } from '@gluestack-ui/utils/nativewind-utils'; + +const baseStyle = isWeb + ? 'flex relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none' + : ''; + +export const hstackStyle = tva({ + base: `flex-row ${baseStyle}`, + variants: { + space: { + 'xs': 'gap-1', + 'sm': 'gap-2', + 'md': 'gap-3', + 'lg': 'gap-4', + 'xl': 'gap-5', + '2xl': 'gap-6', + '3xl': 'gap-7', + '4xl': 'gap-8', + }, + reversed: { + true: 'flex-row-reverse', + }, + }, +}); diff --git a/code/app/app-rn4/src/components/ui/vstack/index.tsx b/code/app/app-rn4/src/components/ui/vstack/index.tsx new file mode 100644 index 00000000..76e42103 --- /dev/null +++ b/code/app/app-rn4/src/components/ui/vstack/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { View } from 'react-native'; + +import { vstackStyle } from './styles'; + +type IVStackProps = React.ComponentProps & + VariantProps; + +const VStack = React.forwardRef, IVStackProps>( + function VStack({ className, space, reversed, ...props }, ref) { + return ( + + ); + } +); + +VStack.displayName = 'VStack'; + +export { VStack }; diff --git a/code/app/app-rn4/src/components/ui/vstack/index.web.tsx b/code/app/app-rn4/src/components/ui/vstack/index.web.tsx new file mode 100644 index 00000000..2389e1f3 --- /dev/null +++ b/code/app/app-rn4/src/components/ui/vstack/index.web.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; + +import { vstackStyle } from './styles'; + +type IVStackProps = React.ComponentProps<'div'> & + VariantProps; + +const VStack = React.forwardRef, IVStackProps>( + function VStack({ className, space, reversed, ...props }, ref) { + return ( +
+ ); + } +); + +VStack.displayName = 'VStack'; + +export { VStack }; diff --git a/code/app/app-rn4/src/components/ui/vstack/styles.tsx b/code/app/app-rn4/src/components/ui/vstack/styles.tsx new file mode 100644 index 00000000..83a08cc9 --- /dev/null +++ b/code/app/app-rn4/src/components/ui/vstack/styles.tsx @@ -0,0 +1,25 @@ +import { isWeb } from '@gluestack-ui/utils/nativewind-utils'; +import { tva } from '@gluestack-ui/utils/nativewind-utils'; + +const baseStyle = isWeb + ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none' + : ''; + +export const vstackStyle = tva({ + base: `flex-col ${baseStyle}`, + variants: { + space: { + 'xs': 'gap-1', + 'sm': 'gap-2', + 'md': 'gap-3', + 'lg': 'gap-4', + 'xl': 'gap-5', + '2xl': 'gap-6', + '3xl': 'gap-7', + '4xl': 'gap-8', + }, + reversed: { + true: 'flex-col-reverse', + }, + }, +}); diff --git a/code/container-ocr/ocr-uniapp/src/pages-sub/upload/index.vue b/code/container-ocr/ocr-uniapp/src/pages-sub/upload/index.vue index 1fb301de..2b4fd59c 100644 --- a/code/container-ocr/ocr-uniapp/src/pages-sub/upload/index.vue +++ b/code/container-ocr/ocr-uniapp/src/pages-sub/upload/index.vue @@ -167,6 +167,7 @@ async function handleConfirm() { b_ocr_score: form.value.ocrScore || 0.00, } const fileInserts = [] + // 主表 await uploadContainerFileApi(boxImage.value.path, { jobId: form.value.b_id,