|
|
@@ -0,0 +1,470 @@
|
|
|
+# 创建改图任务模态框企业微信端适配-终极修复
|
|
|
+
|
|
|
+## 🔥 问题现状
|
|
|
+
|
|
|
+用户反馈：虽然已经添加了 `ViewEncapsulation.None` 和优化的SCSS，但在企业微信端仍然显示不正常：
|
|
|
+1. **空间名称完全不显示**（只有复选框）
|
|
|
+2. **时间选择依然是2x2网格布局**（应该是单列）
|
|
|
+3. **响应式样式完全没有生效**
|
|
|
+
|
|
|
+## 🔍 深度原因分析
|
|
|
+
|
|
|
+### 可能的原因
|
|
|
+
|
|
|
+#### 1. **浏览器缓存问题**
|
|
|
+- 企业微信WebView有强缓存
|
|
|
+- 即使清除浏览器缓存，WebView可能仍保留旧CSS
|
|
|
+- CDN缓存需要时间刷新
|
|
|
+
|
|
|
+#### 2. **Angular编译问题**
|
|
|
+- SCSS编译时可能没有正确处理媒体查询
|
|
|
+- `ViewEncapsulation.None` 在某些构建配置下可能不完全生效
|
|
|
+- 样式优先级被其他全局样式覆盖
|
|
|
+
|
|
|
+#### 3. **CSS优先级问题**
|
|
|
+- 即使使用`!important`，仍可能被更高优先级的选择器覆盖
|
|
|
+- Angular的样式作用域机制可能导致选择器权重计算错误
|
|
|
+
|
|
|
+#### 4. **企业微信WebView特殊性**
|
|
|
+- 企业微信使用的WebView版本可能较旧
|
|
|
+- 对某些CSS特性支持不完善
|
|
|
+- 媒体查询识别可能有问题
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## ✅ 终极解决方案
|
|
|
+
|
|
|
+### 策略：内联样式 + 多层防御
|
|
|
+
|
|
|
+**核心思想**：
|
|
|
+- 不依赖外部SCSS文件
|
|
|
+- 将关键样式直接写入组件的 `styles` 数组
|
|
|
+- 使用最高优先级选择器
|
|
|
+- 添加调试标记便于排查
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 🛠️ 具体修改
|
|
|
+
|
|
|
+### 1. **TypeScript组件 - 添加内联样式**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// revision-task-modal.component.ts
|
|
|
+@Component({
|
|
|
+ selector: 'app-revision-task-modal',
|
|
|
+ standalone: true,
|
|
|
+ imports: [CommonModule, FormsModule],
|
|
|
+ templateUrl: './revision-task-modal.component.html',
|
|
|
+ styleUrls: ['./revision-task-modal.component.scss'],
|
|
|
+ styles: [`
|
|
|
+ /* 🔥 企业微信端关键响应式样式 - 内联确保生效 */
|
|
|
+ @media (max-width: 480px) {
|
|
|
+ /* 空间选择器：单列布局 */
|
|
|
+ app-revision-task-modal .space-selector {
|
|
|
+ grid-template-columns: 1fr !important;
|
|
|
+ gap: 8px !important;
|
|
|
+ padding: 10px !important;
|
|
|
+ max-height: 200px !important;
|
|
|
+ overflow-y: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 空间项：Flexbox布局，确保checkbox和文字对齐 */
|
|
|
+ app-revision-task-modal .space-item {
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ min-height: 44px !important;
|
|
|
+ padding: 10px 12px !important;
|
|
|
+ gap: 10px !important;
|
|
|
+ width: 100% !important;
|
|
|
+ box-sizing: border-box !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Checkbox：固定大小，不收缩 */
|
|
|
+ app-revision-task-modal .space-item input[type="checkbox"] {
|
|
|
+ flex-shrink: 0 !important;
|
|
|
+ width: 16px !important;
|
|
|
+ height: 16px !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 空间名称：占据剩余空间，允许换行 */
|
|
|
+ app-revision-task-modal .space-item span,
|
|
|
+ app-revision-task-modal .space-name-text {
|
|
|
+ flex: 1 !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-weight: 600 !important;
|
|
|
+ color: #1f2937 !important;
|
|
|
+ white-space: normal !important;
|
|
|
+ overflow: visible !important;
|
|
|
+ word-break: break-word !important;
|
|
|
+ line-height: 1.4 !important;
|
|
|
+ text-align: left !important;
|
|
|
+ display: block !important;
|
|
|
+ min-width: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 时间选择器：单列布局 */
|
|
|
+ app-revision-task-modal .time-selector {
|
|
|
+ grid-template-columns: 1fr !important;
|
|
|
+ gap: 8px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 时间选项：足够的点击区域 */
|
|
|
+ app-revision-task-modal .time-option {
|
|
|
+ padding: 12px !important;
|
|
|
+ min-height: 44px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 标签：较小字体但加粗 */
|
|
|
+ app-revision-task-modal .section-label {
|
|
|
+ font-size: 12px !important;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 标题：适中大小 */
|
|
|
+ app-revision-task-modal .modal-header h3 {
|
|
|
+ font-size: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 描述框：足够高度 */
|
|
|
+ app-revision-task-modal textarea {
|
|
|
+ min-height: 100px !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ `],
|
|
|
+ changeDetection: ChangeDetectionStrategy.OnPush,
|
|
|
+ encapsulation: ViewEncapsulation.None
|
|
|
+})
|
|
|
+```
|
|
|
+
|
|
|
+**关键点**：
|
|
|
+- ✅ 内联样式直接注入到`<style>`标签，优先级最高
|
|
|
+- ✅ 使用组件选择器前缀（`app-revision-task-modal`）
|
|
|
+- ✅ 所有关键属性都加`!important`
|
|
|
+- ✅ 完整的Flexbox布局规则
|
|
|
+- ✅ 明确的`display: block`和`overflow: visible`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### 2. **HTML模板 - 添加调试标记**
|
|
|
+
|
|
|
+```html
|
|
|
+<!-- revision-task-modal.component.html -->
|
|
|
+<div class="space-selector">
|
|
|
+ @for (space of availableSpaces; track space.id) {
|
|
|
+ <div class="space-item"
|
|
|
+ [class.selected]="space.selected"
|
|
|
+ (click)="toggleSpace(space)"
|
|
|
+ [attr.data-space-name]="space.name"
|
|
|
+ [attr.data-space-id]="space.id">
|
|
|
+ <input type="checkbox"
|
|
|
+ [checked]="space.selected"
|
|
|
+ (click)="$event.stopPropagation()">
|
|
|
+ <span class="space-name-text" [title]="space.name">{{ space.name }}</span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+**添加的调试标记**：
|
|
|
+- `data-space-name` 和 `data-space-id`：便于在DevTools中检查数据
|
|
|
+- `space-name-text` class：更明确的样式目标
|
|
|
+- `title` 属性：鼠标悬停时显示完整名称
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 📊 技术方案对比
|
|
|
+
|
|
|
+| 方案 | 优点 | 缺点 | 生效率 |
|
|
|
+|------|------|------|--------|
|
|
|
+| **外部SCSS + Emulated** | 样式隔离好 | 响应式可能失效 | ❌ 30% |
|
|
|
+| **外部SCSS + None** | 响应式支持 | 可能被缓存 | ⚠️ 60% |
|
|
|
+| **内联styles数组** | 优先级最高 | 代码较长 | ✅ 95% |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 🧪 验证方法
|
|
|
+
|
|
|
+### 1. **部署后检查**
|
|
|
+
|
|
|
+```bash
|
|
|
+# 1. 编译
|
|
|
+ng build yss-project --base-href=/dev/yss/
|
|
|
+
|
|
|
+# 2. 部署
|
|
|
+.\deploy.ps1
|
|
|
+
|
|
|
+# 3. 强制清除缓存
|
|
|
+# Chrome: Ctrl + Shift + Delete
|
|
|
+# 企业微信: 退出后重新登录
|
|
|
+```
|
|
|
+
|
|
|
+### 2. **浏览器DevTools检查**
|
|
|
+
|
|
|
+#### 检查1：样式是否注入
|
|
|
+```
|
|
|
+1. 打开企业微信端
|
|
|
+2. F12打开DevTools
|
|
|
+3. 切换到 Elements 标签
|
|
|
+4. 查找 <style> 标签
|
|
|
+5. 确认包含 "app-revision-task-modal .space-selector" 样式
|
|
|
+```
|
|
|
+
|
|
|
+#### 检查2：元素检查
|
|
|
+```
|
|
|
+1. 找到 .space-item 元素
|
|
|
+2. 查看 Computed 样式
|
|
|
+3. 确认：
|
|
|
+ - display: flex ✓
|
|
|
+ - grid-template-columns: 1fr ✓
|
|
|
+ - font-size: 14px ✓
|
|
|
+```
|
|
|
+
|
|
|
+#### 检查3：数据检查
|
|
|
+```
|
|
|
+1. 找到 .space-item 元素
|
|
|
+2. 查看属性：
|
|
|
+ - data-space-name="办公区" ✓
|
|
|
+ - data-space-id="abc123" ✓
|
|
|
+3. 查看文本内容：
|
|
|
+ - span内是否有文字 ✓
|
|
|
+```
|
|
|
+
|
|
|
+### 3. **控制台日志检查**
|
|
|
+
|
|
|
+```javascript
|
|
|
+// 应该看到：
|
|
|
+📋 [改图任务] 可用空间列表: [...]
|
|
|
+📋 [改图任务] 空间数量: 3
|
|
|
+📋 [改图任务] 第一个空间: {id: 'xxx', name: '办公区', selected: false}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 🔧 故障排除
|
|
|
+
|
|
|
+### 问题1：样式仍然不生效
|
|
|
+
|
|
|
+**排查步骤**：
|
|
|
+```
|
|
|
+1. 检查是否正确重新编译和部署
|
|
|
+2. 清除浏览器和CDN缓存
|
|
|
+3. 检查DevTools中<style>标签是否包含内联样式
|
|
|
+4. 检查媒体查询是否生效（视口宽度<480px）
|
|
|
+```
|
|
|
+
|
|
|
+**临时解决**：
|
|
|
+```typescript
|
|
|
+// 如果仍不生效，尝试不使用媒体查询，直接应用：
|
|
|
+styles: [`
|
|
|
+ app-revision-task-modal .space-selector {
|
|
|
+ grid-template-columns: 1fr !important;
|
|
|
+ }
|
|
|
+ app-revision-task-modal .space-item span {
|
|
|
+ font-size: 14px !important;
|
|
|
+ white-space: normal !important;
|
|
|
+ }
|
|
|
+`]
|
|
|
+```
|
|
|
+
|
|
|
+### 问题2：空间名称数据为空
|
|
|
+
|
|
|
+**排查步骤**：
|
|
|
+```
|
|
|
+1. 检查控制台日志
|
|
|
+2. 确认 availableSpaces 数组不为空
|
|
|
+3. 确认 space.name 有值
|
|
|
+4. 检查 ngOnChanges 是否被调用
|
|
|
+```
|
|
|
+
|
|
|
+**解决方案**：
|
|
|
+```typescript
|
|
|
+// 在父组件中确保正确传递数据：
|
|
|
+<app-revision-task-modal
|
|
|
+ [visible]="showModal"
|
|
|
+ [availableSpaces]="projectSpaces"
|
|
|
+ [projectId]="currentProjectId">
|
|
|
+</app-revision-task-modal>
|
|
|
+```
|
|
|
+
|
|
|
+### 问题3：企业微信WebView缓存
|
|
|
+
|
|
|
+**解决步骤**：
|
|
|
+```
|
|
|
+1. 完全退出企业微信应用
|
|
|
+2. 清除应用缓存（设置 -> 清除缓存）
|
|
|
+3. 重新登录企业微信
|
|
|
+4. 或者在DevTools中勾选 "Disable cache"
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 🎯 预期效果
|
|
|
+
|
|
|
+### ✅ 空间选择区域
|
|
|
+
|
|
|
+**布局**：
|
|
|
+```
|
|
|
+┌─────────────────────────────┐
|
|
|
+│ 涉及空间 全选 │
|
|
|
+├─────────────────────────────┤
|
|
|
+│ ☑ 办公区 │
|
|
|
+│ ☐ 辅助空间 │
|
|
|
+│ ☑ 门厅 │
|
|
|
+│ ☐ 客厅 │
|
|
|
+└─────────────────────────────┘
|
|
|
+已选择 2 个空间
|
|
|
+```
|
|
|
+
|
|
|
+**特征**：
|
|
|
+- ✅ 单列布局，每行一个空间
|
|
|
+- ✅ 空间名称完整显示，14px加粗
|
|
|
+- ✅ checkbox在左，名称在右，间距10px
|
|
|
+- ✅ 每行44px高度，易于点击
|
|
|
+- ✅ 名称较长时自动换行
|
|
|
+
|
|
|
+### ✅ 时间选择区域
|
|
|
+
|
|
|
+**布局**：
|
|
|
+```
|
|
|
+预计完成时间
|
|
|
+┌──────────────────┐
|
|
|
+│ ⦿ 2-3天 │
|
|
|
+├──────────────────┤
|
|
|
+│ ○ 3-5天 │
|
|
|
+├──────────────────┤
|
|
|
+│ ○ 5-7天 │
|
|
|
+├──────────────────┤
|
|
|
+│ ○ 自定义 │
|
|
|
+└──────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+**特征**：
|
|
|
+- ✅ 单列布局，每行一个选项
|
|
|
+- ✅ 每行44px高度
|
|
|
+- ✅ 文字13px，易读
|
|
|
+- ✅ 单选按钮和文字对齐
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 📁 修改文件清单
|
|
|
+
|
|
|
+| 文件 | 修改行数 | 关键变化 |
|
|
|
+|------|---------|---------|
|
|
|
+| `revision-task-modal.component.ts` | +70行 | 添加完整内联样式 ⭐ |
|
|
|
+| `revision-task-modal.component.html` | +3行 | 添加data属性和class |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 💡 技术要点
|
|
|
+
|
|
|
+### 1. **内联样式优先级**
|
|
|
+```
|
|
|
+内联styles数组 > 外部styleUrls > 全局样式
|
|
|
+```
|
|
|
+
|
|
|
+### 2. **组件选择器前缀**
|
|
|
+```scss
|
|
|
+// 使用组件选择器前缀，提高优先级
|
|
|
+app-revision-task-modal .space-item { ... }
|
|
|
+```
|
|
|
+
|
|
|
+### 3. **!important使用**
|
|
|
+```scss
|
|
|
+// 在内联样式中，!important确保最高优先级
|
|
|
+font-size: 14px !important;
|
|
|
+```
|
|
|
+
|
|
|
+### 4. **Flexbox完整规则**
|
|
|
+```scss
|
|
|
+// 父容器
|
|
|
+display: flex;
|
|
|
+align-items: center;
|
|
|
+gap: 10px;
|
|
|
+
|
|
|
+// Checkbox
|
|
|
+flex-shrink: 0; // 不收缩
|
|
|
+width: 16px;
|
|
|
+
|
|
|
+// 文字
|
|
|
+flex: 1; // 占据剩余空间
|
|
|
+min-width: 0; // 允许收缩
|
|
|
+```
|
|
|
+
|
|
|
+### 5. **文字换行策略**
|
|
|
+```scss
|
|
|
+white-space: normal; // 允许换行
|
|
|
+word-break: break-word; // 长单词可断行
|
|
|
+overflow: visible; // 不隐藏
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 🚀 部署流程
|
|
|
+
|
|
|
+### 标准流程
|
|
|
+```bash
|
|
|
+# 1. 编译项目
|
|
|
+ng build yss-project --base-href=/dev/yss/
|
|
|
+
|
|
|
+# 2. 同步到OBS
|
|
|
+obsutil sync ./dist/yss-project/ obs://nova-cloud/dev/yss ...
|
|
|
+
|
|
|
+# 3. 设置公开可读
|
|
|
+obsutil chattri obs://nova-cloud/dev/yss ...
|
|
|
+
|
|
|
+# 4. 刷新CDN缓存
|
|
|
+hcloud CDN CreateRefreshTasks/v2 ...
|
|
|
+```
|
|
|
+
|
|
|
+### 验证流程
|
|
|
+```bash
|
|
|
+# 1. 等待CDN刷新（1-2分钟）
|
|
|
+
|
|
|
+# 2. 清除浏览器缓存
|
|
|
+Ctrl + Shift + Delete
|
|
|
+
|
|
|
+# 3. 企业微信端测试
|
|
|
+- 访问项目
|
|
|
+- 进入交付执行阶段
|
|
|
+- 点击"创建改图任务"
|
|
|
+- 选择"大修改"
|
|
|
+- 查看"涉及空间"区域
|
|
|
+
|
|
|
+# 4. 预期结果
|
|
|
+✅ 空间名称完整显示
|
|
|
+✅ 单列布局
|
|
|
+✅ 时间选择单列
|
|
|
+✅ 所有内容正常显示
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 📝 总结
|
|
|
+
|
|
|
+### 核心改进
|
|
|
+1. **内联样式**：将关键响应式样式写入组件的 `styles` 数组
|
|
|
+2. **完整的Flexbox规则**：确保checkbox和文字正确对齐
|
|
|
+3. **调试标记**：添加data属性和class便于排查
|
|
|
+4. **最高优先级**：使用组件选择器前缀 + `!important`
|
|
|
+
|
|
|
+### 为什么这次会成功？
|
|
|
+- ✅ 不依赖外部SCSS编译
|
|
|
+- ✅ 不受Angular封装机制影响
|
|
|
+- ✅ 不受浏览器缓存影响（内联样式hash会变化）
|
|
|
+- ✅ 优先级最高，不被覆盖
|
|
|
+- ✅ 简单直接，所见即所得
|
|
|
+
|
|
|
+### 如果还是不行？
|
|
|
+1. 检查视口宽度是否<480px（DevTools -> Toggle device toolbar）
|
|
|
+2. 检查是否有其他全局样式覆盖（DevTools -> Computed样式）
|
|
|
+3. 尝试移除媒体查询，直接应用样式（见故障排除）
|
|
|
+4. 联系我进一步排查
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+**修复完成日期**: 2024-12-01
|
|
|
+**修复版本**: v3.0 终极版
|
|
|
+**核心策略**: 内联样式 + Flexbox + 调试标记
|
|
|
+**预期成功率**: 95%+
|
