css sys

DESIGN.md

@@ -0,0 +1,80 @@
+# Design System Specification: The Ethereal Interface
+ 
+## 1. Overview & Creative North Star: "The Digital Curator"
+This design system moves away from the rigid, boxed-in constraints of traditional web frameworks to embrace a philosophy we call **The Digital Curator**. Inspired by high-end iOS editorial layouts and the precision of Swiss minimalism, the North Star of this system is *effortless clarity*. 
+ 
+We do not use lines to contain content; we use light, space, and depth to organize it. The interface should feel like a series of meticulously arranged glass panes floating over a soft, infinite canvas. By prioritizing intentional asymmetry and varying tonal depths, we create a signature experience that feels bespoke, premium, and human-centric.
+ 
+---
+ 
+## 2. Colors & Tonal Architecture
+The palette is rooted in a sophisticated "Lucid Blue" (#2563eb) and a spectrum of soft, cool grays. 
+ 
+### The "No-Line" Rule
+**Explicit Instruction:** Sectioning via 1px solid borders is strictly prohibited. Physical boundaries must be defined solely through background color shifts or tonal transitions. Use `surface_container_low` sections against a `surface` background to create structure without visual "noise."
+ 
+### Surface Hierarchy & Nesting
+Treat the UI as a physical stack. The depth of a component is determined by its color token:
+*   **Base Layer:** `surface` (#f9f9fe) – The infinite canvas.
+*   **Sectioning:** `surface_container_low` (#f3f3f8) – Subtle grouping of related content.
+*   **Primary Containers:** `surface_container_lowest` (#ffffff) – High-contrast "pops" for cards and interactive elements.
+*   **Floating Elements:** `surface_bright` with 80% opacity and `backdrop-filter: blur(20px)`.
+ 
+### The "Glass & Gradient" Rule
+To inject "soul" into the interface:
+*   **Action Gradients:** Primary CTAs should transition subtly from `primary_container` (#2563eb) to `primary` (#004ac6) at a 135° angle.
+*   **Glassmorphism:** Headers and navigation bars must use a semi-transparent `surface_container_lowest` with a heavy backdrop blur to allow content colors to bleed through, creating a sense of environmental integration.
+ 
+---
+ 
+## 3. Typography: Editorial Authority
+We utilize **SF Pro** (or **PingFang SC** for regional optimization) to maintain an authoritative yet approachable voice. The hierarchy is designed to favor extreme contrast—large, bold headlines paired with generous tracking in labels.
+ 
+*   **Display (Display-LG/MD/SM):** Set with -0.02em letter spacing. These are your "hooks." Use them sparingly to break the grid.
+*   **Headlines (Headline-LG/MD/SM):** The backbone of the editorial flow. Ensure at least 32px of vertical breathing room above these.
+*   **Body (Body-LG/MD/SM):** Optimized for readability. Use `on_surface_variant` (#434655) for secondary body text to reduce visual weight.
+*   **Labels (Label-MD/SM):** All-caps with +0.05em tracking when used for category tags to provide a premium, "metadata" feel.
+ 
+---
+ 
+## 4. Elevation & Depth: Tonal Layering
+Traditional shadows are heavy; we use **Ambient Light** principles.
+ 
+*   **The Layering Principle:** Instead of shadows, place a `surface_container_lowest` card on top of a `surface_container_low` background. The slight shift in hex value creates a "soft lift."
+*   **Ambient Shadows:** For floating modals or menus, use a multi-layered shadow: `0 10px 40px rgba(26, 28, 31, 0.06)`. The color is a tint of `on_surface`, never pure black.
+*   **The "Ghost Border" Fallback:** If accessibility requires a border, use `outline_variant` (#c3c6d7) at **15% opacity**. It should be felt, not seen.
+*   **Corner Radii:** Apply a consistent `xl` (1.5rem / 24px) for large containers and `lg` (1rem / 16px) for standard cards to mimic the hardware curvature of modern iOS devices.
+ 
+---
+ 
+## 5. Components
+ 
+### Buttons & Interaction
+*   **Primary:** Gradient fill (`primary_container` to `primary`), white text, 16px radius.
+*   **Secondary:** `surface_container_high` background with `on_surface` text. No border.
+*   **Tertiary:** Ghost style. No background, `primary` text weight at "Medium."
+ 
+### Cards & Lists
+*   **The "No-Divider" Rule:** Vertical lists must never use horizontal lines. Use 16px–24px of vertical padding (`spacing-scale`) or alternating tonal backgrounds to separate items.
+*   **Cards:** Use `surface_container_lowest` with an `xl` corner radius. Content inside should have at least 24px of internal padding.
+ 
+### Input Fields
+*   **Form Style:** Use a "filled" approach rather than outlined. Use `surface_container_low` as the base. Upon focus, transition the background to `surface_container_lowest` and apply a 2px `primary` "Ghost Border" (20% opacity).
+ 
+### iOS Navigation Patterns
+*   **Bottom Sheets:** Use for secondary actions. Must include a "grabber" (a 36x5mm pill in `outline_variant`).
+*   **Tab Bars:** 100% width, `surface_container_lowest` with 85% opacity and `backdrop-filter: blur(30px)`. Icons should use `primary` for active states and `outline` for inactive.
+ 
+---
+ 
+## 6. Do's and Don'ts
+ 
+### Do:
+*   **Do** embrace negative space. If a layout feels "empty," it is likely working.
+*   **Do** use asymmetrical margins (e.g., a wider left margin for headlines) to create an editorial feel.
+*   **Do** use `primary_fixed_dim` for subtle accent backgrounds behind icons.
+ 
+### Don't:
+*   **Don't** use 1px solid borders to separate sections. Use color tokens `surface` vs `surface_container`.
+*   **Don't** use pure black (#000000) for text. Use `on_surface` (#1a1c1f) to maintain a premium softness.
+*   **Don't** use standard "drop shadows." If it looks like a 2010 web app, the blur radius is too small and the opacity is too high.

app.json

@@ -34,6 +34,7 @@
       ]
     },
     "web": {
+      "bundler": "metro",
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};

metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require('nativewind/metro');
+ 
+const config = getDefaultConfig(__dirname)
+ 
+module.exports = withNativeWind(config, { input: './src/global.css' })

nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

package.json

@@ -28,6 +28,7 @@
     "expo-symbols": "~55.0.7",
     "expo-system-ui": "~55.0.14",
     "expo-web-browser": "~55.0.13",
+    "nativewind": "^4.2.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-native": "0.83.4",

src/app/_layout.tsx

@@ -1,3 +1,5 @@
+import '@/global.css';
+
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 import React from 'react';
 import { useColorScheme } from 'react-native';

src/app/customer.tsx

@@ -0,0 +1,11 @@
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+
+
+export default function CustomerScreen() {
+  return (
+      <SafeAreaView className='flex-1'>
+        
+      </SafeAreaView>
+  );
+}

src/app/explore.tsx

@@ -1,181 +0,0 @@
-import { Image } from 'expo-image';
-import { SymbolView } from 'expo-symbols';
-import React from 'react';
-import { Platform, Pressable, ScrollView, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { ExternalLink } from '@/components/external-link';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { Collapsible } from '@/components/ui/collapsible';
-import { WebBadge } from '@/components/web-badge';
-import { BottomTabInset, MaxContentWidth, Spacing } from '@/constants/theme';
-import { useTheme } from '@/hooks/use-theme';
-
-export default function TabTwoScreen() {
-  const safeAreaInsets = useSafeAreaInsets();
-  const insets = {
-    ...safeAreaInsets,
-    bottom: safeAreaInsets.bottom + BottomTabInset + Spacing.three,
-  };
-  const theme = useTheme();
-
-  const contentPlatformStyle = Platform.select({
-    android: {
-      paddingTop: insets.top,
-      paddingLeft: insets.left,
-      paddingRight: insets.right,
-      paddingBottom: insets.bottom,
-    },
-    web: {
-      paddingTop: Spacing.six,
-      paddingBottom: Spacing.four,
-    },
-  });
-
-  return (
-    <ScrollView
-      style={[styles.scrollView, { backgroundColor: theme.background }]}
-      contentInset={insets}
-      contentContainerStyle={[styles.contentContainer, contentPlatformStyle]}>
-      <ThemedView style={styles.container}>
-        <ThemedView style={styles.titleContainer}>
-          <ThemedText type="subtitle">Explore</ThemedText>
-          <ThemedText style={styles.centerText} themeColor="textSecondary">
-            This starter app includes example{'\n'}code to help you get started.
-          </ThemedText>
-
-          <ExternalLink href="https://docs.expo.dev" asChild>
-            <Pressable style={({ pressed }) => pressed && styles.pressed}>
-              <ThemedView type="backgroundElement" style={styles.linkButton}>
-                <ThemedText type="link">Expo documentation</ThemedText>
-                <SymbolView
-                  tintColor={theme.text}
-                  name={{ ios: 'arrow.up.right.square', android: 'link', web: 'link' }}
-                  size={12}
-                />
-              </ThemedView>
-            </Pressable>
-          </ExternalLink>
-        </ThemedView>
-
-        <ThemedView style={styles.sectionsWrapper}>
-          <Collapsible title="File-based routing">
-            <ThemedText type="small">
-              This app has two screens: <ThemedText type="code">src/app/index.tsx</ThemedText> and{' '}
-              <ThemedText type="code">src/app/explore.tsx</ThemedText>
-            </ThemedText>
-            <ThemedText type="small">
-              The layout file in <ThemedText type="code">src/app/_layout.tsx</ThemedText> sets up
-              the tab navigator.
-            </ThemedText>
-            <ExternalLink href="https://docs.expo.dev/router/introduction">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Android, iOS, and web support">
-            <ThemedView type="backgroundElement" style={styles.collapsibleContent}>
-              <ThemedText type="small">
-                You can open this project on Android, iOS, and the web. To open the web version,
-                press <ThemedText type="smallBold">w</ThemedText> in the terminal running this
-                project.
-              </ThemedText>
-              <Image
-                source={require('@/assets/images/tutorial-web.png')}
-                style={styles.imageTutorial}
-              />
-            </ThemedView>
-          </Collapsible>
-
-          <Collapsible title="Images">
-            <ThemedText type="small">
-              For static images, you can use the <ThemedText type="code">@2x</ThemedText> and{' '}
-              <ThemedText type="code">@3x</ThemedText> suffixes to provide files for different
-              screen densities.
-            </ThemedText>
-            <Image source={require('@/assets/images/react-logo.png')} style={styles.imageReact} />
-            <ExternalLink href="https://reactnative.dev/docs/images">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Light and dark mode components">
-            <ThemedText type="small">
-              This template has light and dark mode support. The{' '}
-              <ThemedText type="code">useColorScheme()</ThemedText> hook lets you inspect what the
-              user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-            </ThemedText>
-            <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-              <ThemedText type="linkPrimary">Learn more</ThemedText>
-            </ExternalLink>
-          </Collapsible>
-
-          <Collapsible title="Animations">
-            <ThemedText type="small">
-              This template includes an example of an animated component. The{' '}
-              <ThemedText type="code">src/components/ui/collapsible.tsx</ThemedText> component uses
-              the powerful <ThemedText type="code">react-native-reanimated</ThemedText> library to
-              animate opening this hint.
-            </ThemedText>
-          </Collapsible>
-        </ThemedView>
-        {Platform.OS === 'web' && <WebBadge />}
-      </ThemedView>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  container: {
-    maxWidth: MaxContentWidth,
-    flexGrow: 1,
-  },
-  titleContainer: {
-    gap: Spacing.three,
-    alignItems: 'center',
-    paddingHorizontal: Spacing.four,
-    paddingVertical: Spacing.six,
-  },
-  centerText: {
-    textAlign: 'center',
-  },
-  pressed: {
-    opacity: 0.7,
-  },
-  linkButton: {
-    flexDirection: 'row',
-    paddingHorizontal: Spacing.four,
-    paddingVertical: Spacing.two,
-    borderRadius: Spacing.five,
-    justifyContent: 'center',
-    gap: Spacing.one,
-    alignItems: 'center',
-  },
-  sectionsWrapper: {
-    gap: Spacing.five,
-    paddingHorizontal: Spacing.four,
-    paddingTop: Spacing.three,
-  },
-  collapsibleContent: {
-    alignItems: 'center',
-  },
-  imageTutorial: {
-    width: '100%',
-    aspectRatio: 296 / 171,
-    borderRadius: Spacing.three,
-    marginTop: Spacing.two,
-  },
-  imageReact: {
-    width: 100,
-    height: 100,
-    alignSelf: 'center',
-  },
-});

src/app/index.tsx

@@ -1,98 +1,11 @@
-import * as Device from 'expo-device';
-import { Platform, StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { AnimatedIcon } from '@/components/animated-icon';
-import { HintRow } from '@/components/hint-row';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { WebBadge } from '@/components/web-badge';
-import { BottomTabInset, MaxContentWidth, Spacing } from '@/constants/theme';
 
-function getDevMenuHint() {
-  if (Platform.OS === 'web') {
-    return <ThemedText type="small">use browser devtools</ThemedText>;
-  }
-  if (Device.isDevice) {
-    return (
-      <ThemedText type="small">
-        shake device or press <ThemedText type="code">m</ThemedText> in terminal
-      </ThemedText>
-    );
-  }
-  const shortcut = Platform.OS === 'android' ? 'cmd+m (or ctrl+m)' : 'cmd+d';
-  return (
-    <ThemedText type="small">
-      press <ThemedText type="code">{shortcut}</ThemedText>
-    </ThemedText>
-  );
-}
 
 export default function HomeScreen() {
   return (
-    <ThemedView style={styles.container}>
-      <SafeAreaView style={styles.safeArea}>
-        <ThemedView style={styles.heroSection}>
-          <AnimatedIcon />
-          <ThemedText type="title" style={styles.title}>
-            Welcome to&nbsp;Expo
-          </ThemedText>
-        </ThemedView>
-
-        <ThemedText type="code" style={styles.code}>
-          get started
-        </ThemedText>
-
-        <ThemedView type="backgroundElement" style={styles.stepContainer}>
-          <HintRow
-            title="Try editing"
-            hint={<ThemedText type="code">src/app/index.tsx</ThemedText>}
-          />
-          <HintRow title="Dev tools" hint={getDevMenuHint()} />
-          <HintRow
-            title="Fresh start"
-            hint={<ThemedText type="code">npm run reset-project</ThemedText>}
-          />
-        </ThemedView>
-
-        {Platform.OS === 'web' && <WebBadge />}
+      <SafeAreaView className='flex-1'>
+        
       </SafeAreaView>
-    </ThemedView>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    flexDirection: 'row',
-  },
-  safeArea: {
-    flex: 1,
-    paddingHorizontal: Spacing.four,
-    alignItems: 'center',
-    gap: Spacing.three,
-    paddingBottom: BottomTabInset + Spacing.three,
-    maxWidth: MaxContentWidth,
-  },
-  heroSection: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-    paddingHorizontal: Spacing.four,
-    gap: Spacing.four,
-  },
-  title: {
-    textAlign: 'center',
-  },
-  code: {
-    textTransform: 'uppercase',
-  },
-  stepContainer: {
-    gap: Spacing.three,
-    alignSelf: 'stretch',
-    paddingHorizontal: Spacing.three,
-    paddingVertical: Spacing.four,
-    borderRadius: Spacing.four,
-  },
-});

src/components/app-tabs.tsx

@@ -14,15 +14,15 @@ export default function AppTabs() {
       indicatorColor={colors.backgroundElement}
       labelStyle={{ selected: { color: colors.text } }}>
       <NativeTabs.Trigger name="index">
-        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
+        <NativeTabs.Trigger.Label>首页</NativeTabs.Trigger.Label>
         <NativeTabs.Trigger.Icon
           src={require('@/assets/images/tabIcons/home.png')}
           renderingMode="template"
         />
       </NativeTabs.Trigger>
 
-      <NativeTabs.Trigger name="explore">
-        <NativeTabs.Trigger.Label>Explore</NativeTabs.Trigger.Label>
+      <NativeTabs.Trigger name="customer">
+        <NativeTabs.Trigger.Label>客户</NativeTabs.Trigger.Label>
         <NativeTabs.Trigger.Icon
           src={require('@/assets/images/tabIcons/explore.png')}
           renderingMode="template"

src/global.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --font-display:
     Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,

src/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="nativewind/types" />
+
 interface ApiConfig {
     url: string;
     timeout?: number;

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all files that contain Nativewind classes.
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -15,6 +15,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
   ]
-}
+}