feat(team): refine mobile workspace experience

Author: Kaviilee

docs/design/TEAM_MOBILE_NAVIGATION_GUIDE.md

@@ -0,0 +1,78 @@
+# 团队平台移动端导航准则
+
+> 状态：团队平台共享页面的响应式开发基线
+> 适用项目：`pvbb`
+> 适用范围：使用 `TeamHomeSidebar` 与现代工作台外壳的团队广场、公开主页、活动页和团队工作台
+> 整理日期：2026-08-02
+
+## 1. 目标
+
+桌面端的团队平台左侧栏同时承载平台发现入口、团队管理入口、成员团队入口和角色入口。移动端不得把这套长侧栏简单排到正文底部，也不应把数量不固定的团队列表压缩成固定底部导航。
+
+移动端统一采用“左侧悬浮触发按钮 + 左侧侧滑抽屉”：
+
+-   屏幕左侧边缘显示紧凑的悬浮触发按钮，并在页面滚动时保持可访问。
+-   触发按钮统一只显示团队导航图标，不展示当前团队 Logo、名称或其他团队身份信息。
+-   触发按钮只表达“打开团队导航”，团队上下文统一留在页面信息卡和抽屉内部呈现。
+-   点击触发按钮后，从左侧打开全高抽屉；原桌面侧栏的信息结构在抽屉中完整保留。
+-   选择入口、切换团队、点击遮罩或关闭按钮、按下 `Escape`、发生路由切换时均关闭抽屉。
+
+## 2. 响应式边界
+
+-   `> 1100px`：桌面双栏，左侧工作台保持 `sticky`。
+-   `821px–1100px`：页面主体改为单列，侧栏内部可使用双列面板。
+-   `<= 820px`：不再展示内联侧栏，改为左侧悬浮按钮和左侧抽屉。
+-   团队列表很多时只允许抽屉内部滚动，不得继续撑高正文。
+-   抽屉宽度使用视口宽度的约 `88%`，并设置合理最大宽度；必须处理顶部和底部安全区。
+
+断点属于共享工作台合同。后续页面不得在自己的页面样式中再次改变侧栏的排列顺序或复制另一套移动导航。
+
+## 3. 信息层级
+
+抽屉继续沿用桌面端顺序：
+
+1. 团队平台标识和关闭操作。
+2. 团队广场、团队活动等平台发现入口。
+3. 团队工作区。
+4. “团队管理”分组。
+5. “我的团队”分组。
+6. “我的角色”等跨平台入口。
+
+管理身份和成员身份由现有路由表达：
+
+-   `/team/manage/org/:id`：管理视图。
+-   `/team/my/org/:id`：成员视图。
+
+移动适配不得新增 `mode` 查询参数，也不得在抽屉中重新实现团队权限判断。
+
+## 4. 实现边界
+
+-   共享数据加载、团队去重排序、当前团队判断和路由生成继续由 `src/components/team/org/team_home_sidebar.vue` 负责。
+-   `src/pages/team/App.vue` 只负责现代工作台外壳，不为单个业务页面维护抽屉状态。
+-   CSS 负责断点、定位、遮罩、位移、滚动、安全区和动效。
+-   JavaScript 只负责开关状态、路由后关闭、`Escape` 关闭和页面滚动锁定。
+-   桌面端必须复用同一份导航 DOM 与数据，禁止复制一份独立的移动团队列表。
+-   新增团队平台共享页面时，应加入 `isModernWorkspace` 路由集合，从而继承统一外壳；不得在业务页面底部手工插入 `TeamHomeSidebar`。
+
+## 5. 交互与可访问性
+
+-   触发器使用原生 `button`，提供“打开团队导航”的 `aria-label`、`aria-controls` 与 `aria-expanded`。
+-   触发按钮固定在左侧垂直居中的安全位置，不占据正文布局高度，也不得遮挡公共页头的核心操作。
+-   遮罩和关闭按钮必须有清晰的关闭语义。
+-   所有可点击项保留 `:focus-visible` 状态。
+-   抽屉关闭时，其内部控件不得继续进入键盘焦点顺序。
+-   打开抽屉时锁定背景页面滚动；组件卸载时必须清理滚动锁。
+-   支持 `prefers-reduced-motion: reduce`，关闭位移动效。
+-   抽屉中的团队 Logo 加载失败时继续使用共享默认图，不因移动端结构增加另一套回退逻辑。
+
+## 6. 验收清单
+
+-   桌面端侧栏视觉、分组、展开逻辑和路由行为未发生回归。
+-   `820px` 以下正文出现在团队长列表之前。
+-   左侧触发按钮只显示导航图标，不泄露或重复展示当前团队身份。
+-   抽屉能够通过触发器、遮罩、关闭按钮和 `Escape` 完整开关。
+-   点击团队广场、团队活动、团队条目或角色入口后抽屉关闭。
+-   管理团队与成员团队较多时，滚动限制在抽屉内部。
+-   抽屉打开时背景不可滚动，关闭和组件卸载后恢复。
+-   iPhone 安全区、窄屏长团队名和失效 Logo 均没有遮挡或溢出。
+-   路由仍使用既有 `manage_my_org`、`view_my_org` 等名称，没有引入移动端专用业务路由。

docs/project/team/battle.md

@@ -146,7 +146,7 @@ item.boss_info?.is_rank_boss > 0 || Boolean(item.aid_info?.event_id)
 - 主提示：绑定战斗数据，用于展示在秘境百强榜。
 - 数据源：归属团队的所有团长上报数据。
 
-两边提示条不可关闭，活动筛选开关位于右侧。战绩卡片统一展示首领、届数、成绩状态、团长、上报时间、上报来源、关联数据与关联操作。
+两边提示条不可关闭，并使用紧凑提示工具条：主说明、数据源和上报指南集中在左侧，活动筛选开关位于右侧；极窄屏下开关换行后保持左对齐，不居中占用大块纵向空间。战绩卡片统一展示首领、届数、成绩状态、团长、上报时间、上报来源、关联数据与关联操作。
 
 ## 7. 分页与后端待修边界
 

docs/project/team/team.md

@@ -44,6 +44,8 @@
 
 应用外壳把 `index`、`view_my_org`、`manage_my_org`、`add_org` 等视为现代工作区；其它历史路由仍使用面包屑和 `Nav2.vue` 旧侧栏。
 
+现代工作区的响应式导航统一遵循 [`docs/design/TEAM_MOBILE_NAVIGATION_GUIDE.md`](../../design/TEAM_MOBILE_NAVIGATION_GUIDE.md)：桌面端保留共享左侧工作台，`820px` 以下使用纯图标左侧悬浮按钮和左侧侧滑抽屉；触发按钮不展示当前团队身份，也不得把完整侧栏排列到长正文底部或在业务页面复制移动端团队列表。
+
 ## 3. 核心入口与两种视图
 
 ### 3.1 团队广场

src/assets/css/team/app.less

@@ -160,14 +160,21 @@
 }
 
 @media screen and (max-width: 820px) {
-    .p-team .m-team-modern-shell__content {
+    .p-team .m-team-modern-shell__sidebar {
+        position: absolute;
+        width: 0;
+        height: 0;
         order: 1;
     }
 
-    .p-team .m-team-modern-shell__sidebar {
+    .p-team .m-team-modern-shell__content {
         order: 2;
     }
 }
+
+body.is-team-navigation-open {
+    overflow: hidden;
+}
 @media screen and (max-width: @phone) {
     .p-team .m-main {
         padding: 10px 15px;
@@ -298,11 +305,8 @@
             font-size: 13px;
             font-weight: 600;
             line-height: 36px;
-            transition:
-                color 150ms cubic-bezier(0.2, 0, 0, 1),
-                border-color 150ms cubic-bezier(0.2, 0, 0, 1),
-                background-color 150ms cubic-bezier(0.2, 0, 0, 1),
-                box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
+            transition: color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
 
             &:focus-visible {
                 outline: none;

src/assets/css/team/battle/index.less

@@ -3,7 +3,9 @@
 .v-battle,
 .m-team-view {
     .m-battle-notice {
+        align-items: flex-start;
         margin-bottom: @team-space-3;
+        padding: 14px 16px;
         border: 1px solid #fde7b0;
         border-radius: @team-radius-small;
         background: #fffbeb;
@@ -15,6 +17,7 @@
         }
 
         .el-alert__icon {
+            margin-top: 2px;
             color: #f59e0b;
         }
 
@@ -26,17 +29,28 @@
         }
 
         .m-battle-notice__content {
-            display: flex;
+            display: grid;
             width: 100%;
             align-items: center;
-            justify-content: space-between;
+            grid-template-columns: minmax(0, 1fr) auto;
             gap: @team-space-3;
 
             .u-notice-copy {
                 display: flex;
                 min-width: 0;
                 flex-direction: column;
-                gap: 2px;
+                gap: 4px;
+
+                > span:first-child {
+                    line-height: 18px;
+                }
+
+                .u-notice-meta {
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 2px @team-space-2;
+                }
 
                 small {
                     color: #b7791f;
@@ -54,6 +68,10 @@
                 }
             }
 
+            .el-switch {
+                flex: none;
+            }
+
             .el-switch__label {
                 color: @team-text-secondary;
                 font-size: 12px;
@@ -66,9 +84,30 @@
 @media screen and (max-width: @phone) {
     .v-battle,
     .m-team-view {
+        .m-battle-notice {
+            padding: 12px;
+        }
+
         .m-battle-notice__content {
-            align-items: flex-start;
-            flex-direction: column;
+            gap: @team-space-2;
+
+            .el-switch {
+                justify-self: end;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .v-battle,
+    .m-team-view {
+        .m-battle-notice__content {
+            align-items: start;
+            grid-template-columns: minmax(0, 1fr);
+
+            .el-switch {
+                justify-self: start;
+            }
         }
     }
 }

src/assets/css/team/design-system/_tokens.less

@@ -35,4 +35,6 @@
 @team-space-5: 24px;
 
 @team-duration-fast: 150ms;
+@team-duration-normal: 200ms;
+@team-duration-slow: 300ms;
 @team-ease-standard: cubic-bezier(0.2, 0, 0, 1);