Forráskód Böngészése

✨ feat(navbar): 为多个页面添加导航栏组件

- 在首页添加导航栏,标题为"首页",右侧为通知图标
- 在发现页面添加导航栏,标题为"发现",右侧为搜索图标
- 在个人中心添加导航栏,标题为"个人中心",右侧为设置图标
- 在登录页面添加导航栏,标题为"用户登录",透明背景
- 在注册页面添加导航栏,标题为"创建账号",透明背景

✨ feat(home): 更新首页内容展示

- 修改首页欢迎文本为"欢迎使用"和"这是一个简洁优雅的小程序首页"
- 添加搜索输入框组件
- 优化页面布局和间距

🐛 fix(login): 移除密码输入框的type属性

- 解决密码框显示问题,移除显式type属性以使用组件默认行为
yourname 4 hónapja
szülő
commit
a60721d260

+ 7 - 1
mini/src/pages/explore/index.tsx

@@ -1,11 +1,17 @@
 import React from 'react'
 import { View, Text } from '@tarojs/components'
 import { TabBarLayout } from '@/layouts/tab-bar-layout'
+import { Navbar } from '@/components/ui/navbar'
 
 const ExplorePage: React.FC = () => {
   return (
     <TabBarLayout activeKey="explore">
-      <View className="p-4">
+      <Navbar
+        title="发现"
+        rightIcon="i-heroicons-magnifying-glass-20-solid"
+        onClickRight={() => console.log('点击搜索')}
+      />
+      <View className="px-4 py-4">
         <Text className="text-2xl font-bold text-gray-900">发现页面</Text>
         <View className="mt-4">
           <Text className="text-gray-600">这里展示发现内容</Text>

+ 13 - 5
mini/src/pages/index/index.tsx

@@ -3,17 +3,25 @@ import { View, Text } from '@tarojs/components'
 import { TabBarLayout } from '@/layouts/tab-bar-layout'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { Navbar } from '@/components/ui/navbar'
 import './index.css'
 
 const HomePage: React.FC = () => {
   return (
     <TabBarLayout activeKey="home">
-      <View className="p-4">
-        <Text className="text-2xl font-bold text-gray-900">首页</Text>
+      <Navbar
+        title="首页"
+        rightIcon="i-heroicons-bell-20-solid"
+        onClickRight={() => console.log('点击通知')}
+      />
+      <View className="px-4 py-4">
+        <Text className="text-2xl font-bold text-gray-900">欢迎使用</Text>
         <View className="mt-4">
-          <Text className="text-gray-600">欢迎来到首页!</Text>
-          <Label>abc</Label>
-          <Input />
+          <Text className="text-gray-600">这是一个简洁优雅的小程序首页</Text>
+          <View className="mt-6">
+            <Label className="mb-2">搜索</Label>
+            <Input placeholder="搜索内容..." />
+          </View>
         </View>
       </View>
     </TabBarLayout>

+ 7 - 1
mini/src/pages/login/index.tsx

@@ -5,6 +5,7 @@ import { useAuth } from '@/utils/auth'
 import { cn } from '@/utils/cn'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import Navbar from '@/components/ui/navbar'
 
 export default function Login() {
   const [username, setUsername] = useState('')
@@ -129,6 +130,12 @@ export default function Login() {
 
   return (
     <View className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
+      <Navbar
+        title="用户登录"
+        backgroundColor="bg-transparent"
+        textColor="text-gray-900"
+        border={false}
+      />
       <View className="flex-1 px-6 py-12">
         {/* Logo区域 */}
         <View className="flex flex-col items-center mb-10">
@@ -169,7 +176,6 @@ export default function Login() {
                 value={password}
                 onInput={handlePasswordInput}
                 maxlength={20}
-                type={showPassword ? 'text' : 'password'}
                 confirmType="done"
                 size="lg"
                 variant="filled"

+ 6 - 0
mini/src/pages/profile/index.tsx

@@ -6,6 +6,7 @@ import { useAuth , type User as UserProfile} from '@/utils/auth'
 import { cn } from '@/utils/cn'
 import { Button } from '@/components/ui/button'
 import { Image } from '@/components/ui/image'
+import { Navbar } from '@/components/ui/navbar'
 
 const ProfilePage: React.FC = () => {
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null)
@@ -125,6 +126,11 @@ const ProfilePage: React.FC = () => {
 
   return (
     <TabBarLayout activeKey="profile">
+      <Navbar
+        title="个人中心"
+        rightIcon="i-heroicons-cog-6-tooth-20-solid"
+        onClickRight={handleSettings}
+      />
       <ScrollView className="flex-1 bg-gray-50">
         {/* 用户信息卡片 */}
         <View className="bg-white rounded-b-3xl shadow-sm pb-8">

+ 7 - 0
mini/src/pages/register/index.tsx

@@ -5,6 +5,7 @@ import { useAuth } from '@/utils/auth'
 import { cn } from '@/utils/cn'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import Navbar from '@/components/ui/navbar'
 
 export default function Register() {
   const [username, setUsername] = useState('')
@@ -118,6 +119,12 @@ export default function Register() {
 
   return (
     <View className="min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50">
+      <Navbar
+        title="创建账号"
+        backgroundColor="bg-transparent"
+        textColor="text-gray-900"
+        border={false}
+      />
       <View className="flex-1 px-6 py-12">
         {/* Logo区域 */}
         <View className="flex flex-col items-center mb-10">