From 33113f279c6b463de48e044ac9037c497c1fc32d Mon Sep 17 00:00:00 2001
From: oneao <hi_itao@163.com>
Date: Fri, 14 Nov 2025 22:46:30 +0800
Subject: [PATCH] u

---
 .../base-app/src/app/(tabs)/chat.tsx          | 17 +++++
 .../app/(tabs)/components/LocaleSelector.tsx  | 68 +++++++++++++++++++
 .../app/(tabs)/components/ThemeSelector.tsx   | 54 +++++++++++++++
 3 files changed, 139 insertions(+)
 create mode 100644 code/base-project/base-app/src/app/(tabs)/components/LocaleSelector.tsx
 create mode 100644 code/base-project/base-app/src/app/(tabs)/components/ThemeSelector.tsx

diff --git a/code/base-project/base-app/src/app/(tabs)/chat.tsx b/code/base-project/base-app/src/app/(tabs)/chat.tsx
index f015cd56..f0261775 100644
--- a/code/base-project/base-app/src/app/(tabs)/chat.tsx
+++ b/code/base-project/base-app/src/app/(tabs)/chat.tsx
@@ -11,6 +11,21 @@ export default function App() {
       <DateTimePicker
         mode="single"
         date={date}
+        selectedItemColor="#fff"
+        selectedTextStyle={{
+          fontWeight: 'bold',
+          color: '#00d279',
+        }}
+        headerTextStyle={{
+          fontSize: 18,
+        }}
+        headerButtonStyle={{
+          backgroundColor: '#ffffff',
+          borderRadius: 8,
+        }}
+        headerButtonColor="#00d279"
+        headerButtonSize={18}
+        headerButtonsPosition="right"
         onChange={params => setDate(params.date)}
       />
     </View>
@@ -21,5 +36,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#F5FCFF',
+    marginTop: 128,
+    padding: 16,
   },
 })
diff --git a/code/base-project/base-app/src/app/(tabs)/components/LocaleSelector.tsx b/code/base-project/base-app/src/app/(tabs)/components/LocaleSelector.tsx
new file mode 100644
index 00000000..d3e51d1e
--- /dev/null
+++ b/code/base-project/base-app/src/app/(tabs)/components/LocaleSelector.tsx
@@ -0,0 +1,68 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+const Locales = ['zh-cn', 'en', 'de', 'es']
+
+interface Props {
+  locale: string
+  setLocale: (locale: string) => void
+  mainColor?: string
+  activeTextColor?: string
+}
+
+export default function LocaleSelector({
+  locale,
+  setLocale,
+  mainColor,
+  activeTextColor,
+}: Props) {
+  return (
+    <View style={styles.localeContainer}>
+      <Text style={{ marginRight: 8 }}>Locale:</Text>
+      {Locales.map((item, index) => (
+        <Pressable
+          key={index}
+          style={[
+            styles.localeButton,
+            item === locale && {
+              backgroundColor: mainColor,
+            },
+          ]}
+          onPress={() => setLocale(item)}
+          accessibilityRole="button"
+          accessibilityLabel={item.toUpperCase()}
+        >
+          <Text
+            style={[
+              styles.localeButtonText,
+              item === locale && {
+                fontWeight: 'bold',
+                color: activeTextColor,
+              },
+            ]}
+          >
+            {item.split('-')[0]?.toUpperCase()}
+          </Text>
+        </Pressable>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  localeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  localeButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 36,
+    height: 36,
+    borderRadius: 36,
+    margin: 2,
+  },
+  localeButtonText: {
+    fontSize: 15,
+  },
+})
diff --git a/code/base-project/base-app/src/app/(tabs)/components/ThemeSelector.tsx b/code/base-project/base-app/src/app/(tabs)/components/ThemeSelector.tsx
new file mode 100644
index 00000000..30fe6c9a
--- /dev/null
+++ b/code/base-project/base-app/src/app/(tabs)/components/ThemeSelector.tsx
@@ -0,0 +1,54 @@
+import { Pressable, StyleSheet, View } from 'react-native'
+
+export interface ITheme {
+  mainColor: string
+  activeTextColor: string
+}
+
+interface Props {
+  themes: ITheme[]
+  setTheme: (theme: ITheme) => void
+}
+
+export default function ThemeSelector({ themes = [], setTheme }: Props) {
+  return (
+    <View style={styles.themeContainer}>
+      {themes.map((item, index) => (
+        <Pressable
+          key={index}
+          style={[
+            styles.themeButton,
+            {
+              borderColor: item.activeTextColor,
+              backgroundColor: item.mainColor,
+            },
+          ]}
+          onPress={() => setTheme(item)}
+          accessibilityRole="button"
+          accessibilityLabel="Set Active Theme"
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  themeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    marginBottom: 10,
+    width: 330,
+  },
+  themeButton: {
+    borderWidth: 4,
+    width: 32,
+    height: 32,
+    borderRadius: 32,
+    margin: 5,
+    shadowRadius: 20,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 0 },
+  },
+})