From 0fb4a9d61b308ce198a14634c3b244c1910c1df4 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Thu, 24 Apr 2025 12:57:25 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(=E7=99=BB=E5=BD=95):=20=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增登录API模块，支持用户登录请求 - 在登录表单中集成登录功能，添加加载提示 - 优化输入框和按钮的UI样式，调整颜色和禁用状态 --- src/api/index.tsx | 1 + src/api/modules/login.ts | 18 +++++++++++++++++ src/components/login-form.tsx | 31 ++++++++++++++++++++++-------- src/components/settings/index.tsx | 4 ++++ src/lib/auth/utils.tsx | 1 + src/utils/message.tsx | 32 ++++++++++++++++++++++++++++++- 6 files changed, 78 insertions(+), 9 deletions(-) create mode 100644 src/api/modules/login.ts create mode 100644 src/components/settings/index.tsx diff --git a/src/api/index.tsx b/src/api/index.tsx index deda663..a8a7064 100644 --- a/src/api/index.tsx +++ b/src/api/index.tsx @@ -1,3 +1,4 @@ export * from './common'; +export * from './modules/login'; export * from './posts'; export * from './types'; diff --git a/src/api/modules/login.ts b/src/api/modules/login.ts new file mode 100644 index 0000000..e64ba15 --- /dev/null +++ b/src/api/modules/login.ts @@ -0,0 +1,18 @@ +import http from '@/api/common/http'; +// import { ReqLogin, ResLogin } from "@/api/interface/index"; + +interface ResLogin { + Token: string; + UserId: string; +} +export interface ReqLogin { + UserAccount: string; + Password: string; +} +/** + * @name AuthModule + */ +// User login +export const loginApi = (params: ReqLogin) => { + return http.post(`api/Authorize/Login`, params); +}; diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx index ca57c94..53ca042 100644 --- a/src/components/login-form.tsx +++ b/src/components/login-form.tsx @@ -1,5 +1,6 @@ /* eslint-disable react/react-in-jsx-scope */ // import { zodResolver } from '@hookform/resolvers/zod'; +import { Env } from '@env'; import { FontAwesome } from '@expo/vector-icons'; import Entypo from '@expo/vector-icons/Entypo'; import { useRouter } from 'expo-router'; @@ -17,6 +18,7 @@ import { import { KeyboardAvoidingView } from 'react-native-keyboard-controller'; import * as z from 'zod'; +import { loginApi } from '@/api'; import { Image, Text, View } from '@/components/ui'; import { signIn } from '@/lib'; import { message } from '@/utils'; @@ -50,7 +52,7 @@ export const LoginForm = () => { // router.push('/'); // }; // 处理登录 - const handleLogin = () => { + const handleLogin = async () => { if (!username) { message.error('用户名/手机号不能为空！'); return; @@ -59,8 +61,20 @@ export const LoginForm = () => { message.error('密码不能为空！'); return; } - signIn({ access: 'access-token', refresh: 'refresh-token' }); - router.push('/'); + message.loading('数据提交中...'); + const { Success, Data } = await loginApi({ + UserAccount: username, + Password: password, + }); + message.hideLoading(); + if (Success) { + signIn({ + access: Data.Token, + userId: Data.UserId, + refresh: 'refresh-token', + }); + router.push('/'); + } }; // 状态管理 @@ -91,7 +105,7 @@ export const LoginForm = () => { contentFit="contain" /> - 优智云 + {Env.NAME} 智能制造管理系统 @@ -107,7 +121,7 @@ export const LoginForm = () => { { { 登 录 @@ -320,7 +335,7 @@ const styles = StyleSheet.create({ color: '#0066ff', }, loginButton: { - backgroundColor: '#0066ff', + backgroundColor: '#e94538', borderRadius: 12, height: 50, alignItems: 'center', @@ -379,7 +394,7 @@ const styles = StyleSheet.create({ color: '#6b7280', }, footerLink: { - color: '#0066ff', + color: '#e94538', fontWeight: '500', }, copyright: { diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx new file mode 100644 index 0000000..99f92f6 --- /dev/null +++ b/src/components/settings/index.tsx @@ -0,0 +1,4 @@ +const About = () => { + return

333

; +}; +export default About; diff --git a/src/lib/auth/utils.tsx b/src/lib/auth/utils.tsx index 04499d6..7677a8c 100644 --- a/src/lib/auth/utils.tsx +++ b/src/lib/auth/utils.tsx @@ -4,6 +4,7 @@ const TOKEN = 'token'; export type TokenType = { access: string; + userId: string; refresh: string; }; diff --git a/src/utils/message.tsx b/src/utils/message.tsx index 9a22271..9f59089 100644 --- a/src/utils/message.tsx +++ b/src/utils/message.tsx @@ -1,4 +1,6 @@ -import { showMessage } from 'react-native-flash-message'; +// src/utils/message.tsx +import { ActivityIndicator } from 'react-native'; +import { hideMessage, showMessage } from 'react-native-flash-message'; /** * @message 提示内容 @@ -9,6 +11,7 @@ export const info = (message: string) => { type: 'info', }); }; + /** * @message 提示内容 */ @@ -18,3 +21,30 @@ export const error = (message: string) => { type: 'danger', }); }; + +/** + * @message 加载提示内容 + * @param message 提示文字 + */ +export const loading = (message: string = '加载中...') => { + showMessage({ + message, + type: 'default', + icon: () => ( + + ), + duration: 0, // 不自动隐藏 + hideOnPress: false, + }); +}; + +/** + * 隐藏加载提示 + */ +export const hideLoading = () => { + hideMessage(); +}; -- Gitee From a0e3554dd4a92cc6110118a7cd380ae69ccc0ef1 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Thu, 24 Apr 2025 14:03:10 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0README.md?= =?UTF-8?q?=E5=B9=B6=E5=88=A0=E9=99=A4=E5=86=97=E4=BD=99=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 更新README.md以简化项目介绍并添加使用的库列表 --- README copy.md | 138 ------------------------------------------------- README.md | 69 +++++++++++-------------- 2 files changed, 31 insertions(+), 176 deletions(-) delete mode 100644 README copy.md diff --git a/README copy.md b/README copy.md deleted file mode 100644 index 649f0fd..0000000 --- a/README copy.md +++ /dev/null @@ -1,138 +0,0 @@ -

- React Native Template Obytes -

- -

- React Native Template Obytes -

- -![expo](https://img.shields.io/github/package-json/dependency-version/obytes/react-native-template-obytes/expo?label=expo) ![react-native](https://img.shields.io/github/package-json/dependency-version/obytes/react-native-template-obytes/react-native?label=react-native) ![GitHub Repo stars](https://img.shields.io/github/stars/obytes/react-native-template-obytes) ![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/obytes/react-native-template-obytes) ![GitHub issues](https://img.shields.io/github/issues/obytes/react-native-template-obytes) ![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/obytes/react-native-template-obytes) - -📱 A template for your next React Native project 🚀, Made with developer experience and performance first: Expo, TypeScript, TailwindCSS, Husky, Lint-Staged, expo-router, react-query, react-hook-form, I18n. - -> Welcome to the Obytes Mobile Tribe's Expo / React Native Starter Kit! - -## 🚀 Motivation - -Our goal with this starter kit was to streamline the process of building React Native apps, both for our own team and for our clients. We wanted to create a resource that would allow us to create high-quality apps faster and with less effort, while ensuring that all of our projects adhere to the same code standards and architectural principles. - -The benefits of using this starter kit are numerous. It helps our team easily switch between projects, as we can rely on a consistent foundation of code. It also allows us to focus on the business logic of each project rather than getting bogged down in boilerplate code. And, because it promotes consistency across projects, it makes it easier to maintain and scale our apps, as well as share code between teams. - -Overall, our starter kit is designed to facilitate efficient and effective app development, helping us to bring the best possible products to our clients - -## ✍️ Philosophy - -When creating this starter kit, we had several guiding principles in mind:: - -- **🚀 Production-ready**: We wanted to ensure that this starter was ready for real-world use, providing a solid foundation for building production-grade apps. -- **🥷 Developer experience and productivity**: Our focus was on creating a starter that would enhance the developer experience and increase productivity. -- **🧩 Minimal code and dependencies**: We aimed to keep the codebase and dependencies as small as possible. -- **💪 Well-maintained third-party libraries**: We included only well-maintained and reliable third-party libraries, to provide stability and support for our projects. - -## ⭐ Key Features - -- ✅ Latest Expo SDK with Custom Dev Client: Leverage the best of the Expo ecosystem while maintaining full control over your app. -- 🎉 [TypeScript](https://www.typescriptlang.org/) for enhanced code quality and bug prevention through static type checking. -- 💅 Minimal UI kit built with [TailwindCSS](https://www.nativewind.dev/), featuring common components essential for your app. -- ⚙️ Multi-environment build support (Production, Staging, Development) using Expo configuration. -- 🦊 Husky for Git Hooks: Automate your git hooks and enforce code standards. -- 💡 Clean project structure with Absolute Imports for easier code navigation and management. -- 🚫 Lint-staged: Run Eslint and TypeScript checks on Git staged files to maintain code quality. -- 🗂 VSCode recommended extensions, settings, and snippets for an enhanced developer experience. -- ☂️ Pre-installed [Expo Router](https://docs.expo.dev/router/introduction/) with examples for comprehensive app navigation. -- 💫 Auth flow implementation using [Zustand](https://github.com/pmndrs/zustand) for state management and [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) for secure data storage. -- 🛠 10+ [Github Actions](https://github.com/features/actions) workflows for building, releasing, testing, and distributing your app. -- 🔥 [React Query](https://react-query.tanstack.com/) and [axios](https://github.com/axios/axios) for efficient data fetching and state management. -- 🧵 Robust form handling with [react-hook-form](https://react-hook-form.com/) and [zod](https://github.com/colinhacks/zod) for validation, plus keyboard handling. -- 🎯 Localization support with [i18next](https://www.i18next.com/), including Eslint for validation. -- 🧪 Unit testing setup with [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). -- 🔍 E2E testing capabilities with [Maestro](https://maestro.mobile.dev/) for comprehensive app testing. - -## Is this starter for me? - -Yes 😀 - -This starter kit is designed to benefit a wide range of React Native developers, from beginners to experienced professionals. Here's why it might be a good fit for you: - -1. **For beginners:** It provides a solid foundation with best practices and common solutions, helping you learn industry-standard approaches to React Native development. - -2. **For experienced developers:** It offers a well-structured, production-ready setup that can save you time and effort in project initialization and configuration. - -3. **For teams:** It ensures consistency across projects and team members, making it easier to onboard new developers and maintain code quality. - -4. **For explorers:** Even if you prefer not to use starter kits, this project can serve as a valuable reference. You can explore the codebase, documentation, and architectural decisions to gain insights and potentially adopt specific solutions for your projects. - -5. **For learners:** The starter kit incorporates up-to-date libraries and patterns, allowing you to familiarize yourself with current best practices in the React Native ecosystem. - -6. **For AI-assisted development:** This starter kit works well with AI coding tools. It provides a solid structure and best practices that can guide AI-generated code. This helps ensure that AI assistance leads to high-quality, maintainable code that fits well within your project. - -Remember, you don't have to use the entire starter kit as-is. Feel free to cherry-pick ideas, configurations, or code snippets that align with your project needs. Whether you're building a new app from scratch or looking to improve your existing development process, this starter kit can provide valuable insights and practical solutions. - -## Why Expo and not React Native CLI? - -We have been using Expo as our main framework since the introduction of [Continuous Native Generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/) concept and we are happy with the experience. - -I think this question is not valid anymore, especially after the last React conference when the core React native team recommended using Expo for new projects. - -> "As of today, the only recommended community framework for React Native is Expo. Folks at Expo have been investing in the React Native ecosystem since the early days of React Native and as of today, we believe the developer experience offered by Expo is best in class." React native core team - -Still hesitating? Check out this [article](https://reactnative.dev/blog/2024/06/25/use-a-framework-to-build-react-native-apps) or this [video](https://www.youtube.com/watch?v=lifGTznLBcw), maybe this one [video](https://www.youtube.com/watch?v=ek_IdGC0G80) too. - -## 🧑‍💻 Stay up to date - -We are committed to continually improving our starter kit and providing the best possible resources for building React Native apps. To that end, we regularly add new features and fix any bugs that are discovered. - -If you want to stay up to date with the latest developments in our starter kit, you can either watch the repository or hit the "star" button. This will allow you to receive notifications whenever new updates are available. - -We value the feedback and contributions of our users, and we encourage you to let us know if you have any suggestions for improving our starter kit. We are always looking for ways to make it even more effective and useful for our community. So, please do not hesitate to reach out and share your thoughts with us. - - - -## 💎 Libraries used - -- [Expo](https://docs.expo.io/) -- [Expo Router](https://docs.expo.dev/router/introduction/) -- [Nativewind](https://www.nativewind.dev/v4/overview) -- [Flash list](https://github.com/Shopify/flash-list) -- [React Query](https://tanstack.com/query/v4) -- [Axios](https://axios-http.com/docs/intro) -- [React Hook Form](https://react-hook-form.com/) -- [i18next](https://www.i18next.com/) -- [zustand](https://github.com/pmndrs/zustand) -- [React Native MMKV](https://github.com/mrousavy/react-native-mmkv) -- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) -- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/) -- [React Native Svg](https://github.com/software-mansion/react-native-svg) -- [React Error Boundaries](https://github.com/bvaughn/react-error-boundary) -- [Expo Image](https://docs.expo.dev/versions/unversioned/sdk/image/) -- [React Native Keyboard Controller](https://github.com/kirillzyusko/react-native-keyboard-controller) -- [Moti](https://moti.fyi/) -- [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context) -- [React Native Screens](https://github.com/software-mansion/react-native-screens) -- [Tailwind Variants](https://www.tailwind-variants.org/) -- [Zod](https://zod.dev/) - -## Contributors - -This starter is maintained by [Obytes mobile tribe team](https://www.obytes.com/team) and we welcome new contributors to join us in improving it. If you are interested in getting involved in the project, please don't hesitate to open an issue or submit a pull request. - -In addition to maintaining this starter kit, we are also available to work on custom projects and help you build your dream app. If you are looking for experienced and reliable developers to bring your app vision to life, please visit our website at [obytes.com/contact](https://www.obytes.com/contact) to get in touch with us. We would be happy to discuss your project in more detail and explore how we can help you achieve your goals. - -## 🔥 How to contribute? - -Thank you for your interest in contributing to our project. Your involvement is greatly appreciated and we welcome your contributions. Here are some ways you can help us improve this project: - -1. Show your support for the project by giving it a 🌟 on Github. This helps us increase visibility and attract more contributors. -2. Share your thoughts and ideas with us by opening an issue. If you have any suggestions or feedback about any aspect of the project, we are always eager to hear from you and have a discussion. -3. If you have any questions about the project, please don't hesitate to ask. Simply open an issue and our team will do our best to provide a helpful and informative response. -4. If you encounter a bug or typo while using the starter kit or reading the documentation, we would be grateful if you could bring it to our attention. You can open an issue to report the issue, or even better, submit a pull request with a fix. - -We value the input and contributions of our community and look forward to working with you to improve this project. - -## ❓ FAQ - -If you have any questions about the starter and want answers, please check out the [Discussions](https://github.com/obytes/react-native-template-obytes/discussions) page. - -## 🔖 License - -This project is MIT licensed. diff --git a/README.md b/README.md index 14ab0c3..b8c5d86 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,31 @@ -# eu.admin.reactnative - -#### 介绍 - -🚀🚀🚀 EU-Admin App -1 - -#### 软件架构 - -软件架构说明 - -#### 安装教程 - -1. xxxx -2. xxxx -3. xxxx - -#### 使用说明 - -1. xxxx -2. xxxx -3. xxxx - -#### 参与贡献 - -1. Fork 本仓库 -2. 新建 Feat_xxx 分支 -3. 提交代码 -4. 新建 Pull Request - -#### 特技 - -1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md -2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) -3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 -4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 -5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) -6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) +

EU-Admin-React-Native

+ +📱 A React Native project 🚀, Made with developer experience and performance first: Expo, TypeScript, TailwindCSS, Husky, Lint-Staged, expo-router, react-query, react-hook-form, I18n. + +## 💎 Libraries used + +- [Expo](https://docs.expo.io/) +- [Expo Router](https://docs.expo.dev/router/introduction/) +- [Nativewind](https://www.nativewind.dev/v4/overview) +- [Flash list](https://github.com/Shopify/flash-list) +- [React Query](https://tanstack.com/query/v4) +- [Axios](https://axios-http.com/docs/intro) +- [React Hook Form](https://react-hook-form.com/) +- [i18next](https://www.i18next.com/) +- [zustand](https://github.com/pmndrs/zustand) +- [React Native MMKV](https://github.com/mrousavy/react-native-mmkv) +- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) +- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/) +- [React Native Svg](https://github.com/software-mansion/react-native-svg) +- [React Error Boundaries](https://github.com/bvaughn/react-error-boundary) +- [Expo Image](https://docs.expo.dev/versions/unversioned/sdk/image/) +- [React Native Keyboard Controller](https://github.com/kirillzyusko/react-native-keyboard-controller) +- [Moti](https://moti.fyi/) +- [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context) +- [React Native Screens](https://github.com/software-mansion/react-native-screens) +- [Tailwind Variants](https://www.tailwind-variants.org/) +- [Zod](https://zod.dev/) + +## 🔖 License + +This project is MIT licensed. -- Gitee