Quellcode durchsuchen

📝 docs(mobile): 创建移动端一级页面名称规范文档

- 新增一级页面名称规范文档,定义首页"银龄智慧"标题的显示规范
- 明确字体族、字号、字重、字间距和颜色等样式属性
- 提供样式代码示例和响应式设计规范
- 规范与LOGO的配合关系和可访问性要求

✨ feat(mobile): 实现首页标题与LOGO的组合展示

- 调整HeaderLogo组件,支持单独显示LOGO
- 在NewHomePage页面实现LOGO与标题的组合布局
- 设置标题与LOGO间距为space-x-2(8px),垂直居中对齐

♻️ refactor(mobile): 优化HeaderLogo组件的尺寸映射

- 移除HeaderLogo组件中名称字体的尺寸映射
- 简化sizeMap结构,只保留LOGO尺寸配置
- 调整默认showName属性为false,提高组件灵活性
yourname vor 7 Monaten
Ursprung
Commit
0dccf0d517

+ 88 - 0
docs/mobile-first-level-page-name-spec.md

@@ -0,0 +1,88 @@
+# 一级页面名称规范文档
+
+## 概述
+本文档定义了移动端一级页面名称的字体规范,确保整个应用的一致性和专业性。
+
+## 页面名称规范
+
+### 1. 首页页面名称
+- **页面名称**: 银龄智慧
+- **位置**: 顶部导航栏左侧(LOGO右侧)
+- **显示状态**: 始终显示
+
+### 2. 字体规范
+| 属性 | 规范值 | 说明 |
+|------|--------|------|
+| 字体族 | `font-serif` | 衬线字体,体现传统智慧感 |
+| 字号 | `text-xl` (20px) | 一级页面标题标准字号 |
+| 字重 | `font-bold` | 粗体,突出重要性 |
+| 字间距 | `tracking-wide` | 宽松字间距,提升可读性 |
+| 颜色 | `#2f1f0f` (COLORS.text.primary) | 墨色文字,符合水墨风格 |
+
+### 3. 样式代码
+```typescript
+// 首页标题样式
+const homePageTitleStyle = {
+  fontFamily: 'font-serif',
+  fontSize: 'text-xl', // 20px
+  fontWeight: 'font-bold',
+  letterSpacing: 'tracking-wide',
+  color: '#2f1f0f'
+};
+
+// 实际使用示例
+<h1 className="font-serif text-xl font-bold tracking-wide" style={{ color: '#2f1f0f' }}>
+  银龄智慧
+</h1>
+```
+
+### 4. 响应式规范
+- **移动端**: text-xl (20px)
+- **平板端**: text-2xl (24px)
+- **折叠屏**: text-xl (20px) 保持与移动端一致
+
+### 5. 对比度要求
+- 与背景色对比度: 4.5:1 (符合WCAG 2.1 AA标准)
+- 背景色: `#f5f3f0` (宣纸背景色)
+
+### 6. 字体备选方案
+```css
+/* CSS Font Stack */
+font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
+```
+
+### 7. 与LOGO的配合关系
+- LOGO与标题间距: `space-x-2` (8px)
+- 垂直对齐: `items-center`
+- 整体高度: 32px (LOGO 32px + 标题 28px)
+
+### 8. 可访问性规范
+- 最小触摸目标: 44x44px
+- 屏幕阅读器支持: 添加合适的aria-label
+- 高对比度模式: 自动适配系统设置
+
+### 9. 国际化支持
+- 中文: 银龄智慧
+- 英文: Silver Wisdom
+- 字体保持相同规范,字号可微调
+
+### 10. 设计原则
+- **一致性**: 所有一级页面标题使用相同规范
+- **可识别性**: 确保用户在不同页面间能快速识别当前位置
+- **美观性**: 符合中国水墨风格设计理念
+- **可用性**: 确保在各种设备和环境下的良好体验
+
+## 实施检查清单
+- [ ] 字号符合规范 (20px)
+- [ ] 字体族使用衬线字体
+- [ ] 颜色使用指定墨色
+- [ ] 字间距设置正确
+- [ ] 与LOGO间距合适
+- [ ] 响应式适配完成
+- [ ] 可访问性测试通过
+- [ ] 跨浏览器兼容性验证
+
+## 相关文件
+- `src/client/mobile/pages/NewHomePage.tsx` - 首页实现文件
+- `src/client/mobile/styles/` - 样式文件目录
+- `COLORS` 常量定义 - 色彩规范

+ 10 - 10
src/client/mobile/components/HeaderLogo.tsx

@@ -7,22 +7,22 @@ interface HeaderLogoProps {
   showName?: boolean;
 }
 
-const HeaderLogo: React.FC<HeaderLogoProps> = ({ 
-  className = '', 
-  logoSize = 'md', 
-  showName = true 
+const HeaderLogo: React.FC<HeaderLogoProps> = ({
+  className = '',
+  logoSize = 'md',
+  showName = false
 }) => {
-  // 尺寸映射
+  // 尺寸映射 - 只保留logo尺寸,移除名称字体映射
   const sizeMap = {
-    sm: { logo: 'h-6 w-auto', name: 'text-lg' },
-    md: { logo: 'h-8 w-auto', name: 'text-xl' },
-    lg: { logo: 'h-10 w-auto', name: 'text-2xl' }
+    sm: { logo: 'h-6 w-auto' },
+    md: { logo: 'h-8 w-auto' },
+    lg: { logo: 'h-10 w-auto' }
   };
 
   const currentSize = sizeMap[logoSize];
 
   return (
-    <div className={`flex items-center space-x-2 ${className}`}>
+    <div className={`flex items-center ${className}`}>
       <img
         src="/yizhihuilogo.png"
         alt="银龄智慧"
@@ -30,7 +30,7 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({
       />
       {showName && (
         <h1
-          className={`font-serif font-bold tracking-wide ${currentSize.name}`}
+          className="font-serif font-bold tracking-wide text-3xl"
           style={{ color: INK_COLORS.text.primary }}
         >
           银龄智慧

+ 12 - 4
src/client/mobile/pages/NewHomePage.tsx

@@ -322,16 +322,24 @@ const NewHomePage: React.FC = () => {
   return (
     <div className="min-h-screen" style={{ backgroundColor: COLORS.ink.light }}>
       {/* 顶部导航栏 */}
-      <header 
+      <header
         className="shadow-sm sticky top-0 z-10 border-b border-opacity-20"
-        style={{ 
+        style={{
           backgroundColor: COLORS.ink.light,
-          borderColor: COLORS.ink.medium 
+          borderColor: COLORS.ink.medium
         }}
       >
         <div className="px-4 py-4">
           <div className="flex items-center justify-between mb-3">
-            <HeaderLogo className="flex-1" />
+            <div className="flex items-center space-x-2">
+              <HeaderLogo logoSize="md" showName={false} />
+              <h1
+                className="font-serif text-xl font-bold tracking-wide"
+                style={{ color: COLORS.text.primary }}
+              >
+                银龄智慧
+              </h1>
+            </div>
             {user ? (
               <div className="flex items-center space-x-2">
                 <span