{
  "name": "应用名称",
  "author": {
    "name": "作者名称"
  },
  "location": {
    "topBar": {
      "flexible": true,
      "size": {
        "width": "220px",
        "height": "100px"
      }
    }
    "navBar": {
      "flexible": true,
      "size": {
        "width": "__px", 
        "height": "__px"
      }
    }
    "sideBar": {
      "flexible": true,
      "size": {
        "width": "__px",
        "height": "__px"
      }
    }
  },
  "version": "应用版本",
  "frameworkVersion": "框架版本要求"
}

const XINHE_CONFIG = {
  appkey: 'cbd489e2-c888-4477-95a4-4b0d4b2ff935',
  appsecret: 'Zu.1I1&+q7q7<0uC',
  tokenUrl: 'https://c2.xinheyun.com/api/open/v2/token',
  refreshUrl: 'https://c2.xinheyun.com/api/open/v2/token'
};

// Token管理类（封装认证逻辑）
class TokenManager {
  // Token获取、刷新和清理实现
  static async getAccessToken(): Promise<string> { /* ... */ }
}

// 生产单快速创建组件
const QuickOrderPage: React.FC = () => {
  // 国际化支持
  const { t } = useI18n();
  
  // 全局参数获取
  const { globalParams } = useGlobalParams();
  
  // Ant Design消息组件
  const { message } = App.useApp();
  
  // 表单控制
  const [form] = Form.useForm<QuickOrderForm>();
  
  // 状态管理
  const [materials, setMaterials] = useState<Material[]>([]);
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  
  // 搜索与分页状态
  const [searchKeyword, setSearchKeyword] = useState<string>('');
  const [currentPage, setCurrentPage] = useState<number>(0);
  const [hasMore, setHasMore] = useState<boolean>(true);
  
  // API交互方法
  const fetchMaterials = async () => { /* ... */ };
  const handleSubmit = async (values: QuickOrderForm) => { /* ... */ };
  
  // UI渲染
  return ( /* ... */ );
};

// 物料获取逻辑
const fetchMaterials = async (page: number = 0, keyword: string = '', append: boolean = false) => {
  setLoading(true);
  try {
    // 获取access_token
    const accessToken = await TokenManager.getAccessToken();
    
    // API调用（带认证头）
    const response = await request.post('https://c2.xinheyun.com/api/open/v3/items/page/query', {
      body: { /* 查询参数 */ }
    }, {
      headers: { 'Authorization': `Bearer ${accessToken}` }
    });
    
    // 数据处理与状态更新
    setMaterials(/* ... */);
  } catch (error) {
    // 错误处理与降级方案
    if (error.response?.status === 401) {
      TokenManager.clearTokens(); // 认证失败清理token
    }
    // 使用模拟数据降级
    setMaterials(/* 模拟数据 */);
  } finally {
    setLoading(false);
  }
};

// 生产单提交
const handleSubmit = async (values: QuickOrderForm) => {
  setSubmitting(true);
  try {
    const accessToken = await TokenManager.getAccessToken();
    
    // 构造生产单数据
    const productionOrder = {
      code: `WO${Date.now()}`,
      itemCode: /* 物料编码 */,
      planQty: values.plannedQuantity,
      endTime: new Date(values.plannedEndDate).getTime(),
      // ...其他字段
    };
    
    // 提交到新核云API
    const resp = await request.post('https://c2.xinheyun.com/api/open/v4/workOrder/create', {
      body: productionOrder
    }, {
      headers: { 'Authorization': `Bearer ${accessToken}` }
    });
    
    // 成功反馈
    message.success(t('app.quickOrder.submitSuccess'));
    form.resetFields();
  } catch (error) {
    // 错误处理
    message.error(t('app.quickOrder.submitError'));
  } finally {
    setSubmitting(false);
  }
};

// 表单渲染
<Form form={form} onFinish={handleSubmit}>
  {/* 物料选择（带搜索和分页） */}
  <Form.Item name="materialId">
    <Select
      showSearch
      onSearch={handleSearch}
      options={materials.map(m => ({
        value: m.id,
        label: `${m.name} (${m.code}) - ${m.unit}`
      }))}
      dropdownRender={(menu) => (
        <div onScroll={handleScroll}> {/* 无限滚动容器 */}
          {menu}
          {loading && <div>加载中...</div>}
        </div>
      )}
    />
  </Form.Item>
  
  {/* 数量输入 */}
  <Form.Item name="plannedQuantity">
    <InputNumber min={1} precision={0} />
  </Form.Item>
  
  {/* 日期选择 */}
  <Form.Item name="plannedEndDate">
    <DatePicker disabledDate={current => current < moment().startOf('day')} />
  </Form.Item>
  
  {/* 操作按钮 */}
  <Button type="primary" htmlType="submit" loading={submitting}>
    {t('app.quickOrder.submit')}
  </Button>
</Form>

# .env.production - 生产环境配置
VITE_XHY_APP_KEY=your_actual_app_key
VITE_XHY_APP_SECRET=your_actual_app_secret
VITE_XHY_API_BASE=https://api.xinheyun.com
VITE_XHY_TOKEN_PATH=/api/open/v2/token

// 从环境变量获取敏感信息
const XINHE_CONFIG = {
  appkey: import.meta.env.VITE_XHY_APP_KEY,
  appsecret: import.meta.env.VITE_XHY_APP_SECRET,
  tokenUrl: `${import.meta.env.VITE_XHY_API_BASE}${import.meta.env.VITE_XHY_TOKEN_PATH}`
};

// API调用示例
const fetchMaterials = async () => {
  const response = await request.post(
    `${import.meta.env.VITE_XHY_API_BASE}/api/open/v3/items/page/query`,
    { /* ... */ }
  );
};

// 推荐使用CSS Modules（示例：TopBarWidget.module.css）
.widgetContainer {
  padding: 12px;
  border-radius: 8px;
  background-color: var(--xhy-bg-primary); /* 使用设计系统变量 */
}

.flexLayout {
  display: flex;
  gap: 8px;
  align-items: center;
}

// 暗色模式适配
@media (prefers-color-scheme: dark) {
  .widgetContainer {
    border: 1px solid var(--xhy-border-dark);
  }
}

// React动画组件
import { motion } from 'framer-motion';

function AnimatedCard() {
  return (
    <motion.div
      initial={{ scale: 0.9 }}
      animate={{ scale: 1 }}
      transition={{ duration: 0.2 }}
      whileHover={{ boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
    >
      <CardContent />
    </motion.div>
  );
}

// zh-CN.json
{
  "app": {
    "title": "员工管理系统",
    "welcome": "欢迎回来, {name}",
    "buttons": {
      "submit": "提交",
      "cancel": "取消"
    }
  },
  "errors": {
    "required": "{field} 是必填项"
  }
}


// en-US.json
{
  "app": {
    "title": "Employee Management",
    "welcome": "Welcome back, {name}",
    "buttons": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  },
  "errors": {
    "required": "{field} is required"
  }
}

import { t } from '@/lib/i18n';

// 在组件中使用
function WelcomeBanner() {
  const { user } = useUser(); // 假设从上下文中获取用户信息

  return (
    <div className="welcome-container">
      <h1>{t('app.title')}</h1>
      
      {/* 带参数的翻译 */}
      <p>{t('app.welcome', { name: user.firstName })}</p>
      
      {/* 嵌套属性访问 */}
      <div className="action-buttons">
        <button>{t('app.buttons.submit')}</button>
        <button>{t('app.buttons.cancel')}</button>
      </div>
    </div>
  );
}

// 在语言文件中
{
  "notifications": {
    "count": "您有 {count} 条通知 | 您有 {count} 条通知"
  }
}

// 在组件中
const notificationCount = 3;
const text = t('notifications.count', { count: notificationCount });
// 根据数量自动选择单复数形式

// 语言文件中定义格式
{
  "formats": {
    "date": "YYYY年MM月DD日",
    "currency": "¥{amount}"
  }
}

// 在组件中使用
const today = new Date();
const formattedDate = t('formats.date', { value: today });

const price = 99.9;
const formattedPrice = t('formats.currency', { amount: price.toFixed(2) });