Blame view

前端分面配置说明.md 5.52 KB
bad3b18b   tangwang   fix facet for 172
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
  # 前端分面配置说明
  
  ## 问题描述
  
  tenant_id=170 的分面返回为空,原因是:
  1. `category1_name` 字段在数据中为 None(这是数据问题)
  2. `specifications.name` 字段在数据中使用首字母大写(如 "Color"、"Size"),而前端查询时使用小写("color"、"size"),导致 ES term 查询匹配失败
  
  ## 解决方案
  
  采用前端配置方案,根据不同的 `tenant_id` 配置不同的分面字段。配置包括:
  - **字段名**(field):ES 中的实际字段名,如 `specifications.Color`
  - **显示标签**(label):前端显示的名称,如 "颜色"、"尺寸"
  - **容器ID**(containerId):HTML 中用于显示分面的容器 ID,如 `colorTags`
  - **查询参数**:size、type、disjunctive 等
  
  ## 配置文件
  
  配置文件位置:`frontend/static/js/tenant_facets_config.js`
  
  ### 配置结构
  
  ```javascript
  const TENANT_FACETS_CONFIG = {
      "租户ID": {
          specificationFields: [
              { 
                  field: "specifications.字段名",      // ES字段名(必须与实际数据匹配,包括大小写)
                  label: "显示标签",                    // 前端显示名称
                  containerId: "容器ID",                // HTML容器ID
                  size: 20,                            // 返回的分面值数量
                  type: "terms",                       // 分面类型
                  disjunctive: true                    // 是否支持多选
              }
          ]
      }
  };
  ```
  
  ### 示例配置
  
  #### tenant_id=162(使用小写)
  ```javascript
  "162": {
      specificationFields: [
          { 
              field: "specifications.color", 
              label: "Color",
              containerId: "colorTags",
              size: 20, 
              type: "terms", 
              disjunctive: true 
          },
          { 
              field: "specifications.size", 
              label: "Size",
              containerId: "sizeTags",
              size: 15, 
              type: "terms", 
              disjunctive: true 
          },
          { 
              field: "specifications.material", 
              label: "Material",
              containerId: "materialTags",
              size: 10, 
              type: "terms", 
              disjunctive: true 
          }
      ]
  }
  ```
  
  #### tenant_id=170(使用首字母大写,没有material)
  ```javascript
  "170": {
      specificationFields: [
          { 
              field: "specifications.Color",    // 注意:首字母大写
              label: "Color",
              containerId: "colorTags",
              size: 20, 
              type: "terms", 
              disjunctive: true 
          },
          { 
              field: "specifications.Size",     // 注意:首字母大写
              label: "Size",
              containerId: "sizeTags",
              size: 15, 
              type: "terms", 
              disjunctive: true 
          }
          // 注意:170 没有 material 分面
      ]
  }
  ```
  
  #### 示例:添加新租户(包含其他规格字段,如重量、包装方式)
  ```javascript
  "新租户ID": {
      specificationFields: [
          { 
              field: "specifications.Weight",        // 重量
              label: "Weight",
              containerId: "weightTags",              // 需要在HTML中添加此容器
              size: 15, 
              type: "terms", 
              disjunctive: true 
          },
          { 
              field: "specifications.PackageType",   // 包装方式
              label: "Package Type",
              containerId: "packageTags",            // 需要在HTML中添加此容器
              size: 10, 
              type: "terms", 
              disjunctive: true 
          }
      ]
  }
  ```
  
  ## 添加新租户配置步骤
  
  1. **确定 ES 数据中的实际字段名**
     - 检查 ES 中 `specifications.name` 的实际值(注意大小写)
     - 例如:`"Color"` 或 `"color"` 是不同的字段
  
  2. **在配置文件中添加配置**
     ```javascript
     "新租户ID": {
         specificationFields: [
             { 
                 field: "specifications.实际字段名",
                 label: "显示名称",
                 containerId: "容器ID",
                 size: 20, 
                 type: "terms", 
                 disjunctive: true 
             }
         ]
     }
     ```
  
  3. **在 HTML 中添加容器**(如果需要新的容器)
  `frontend/index.html` 的 Filter Section 中添加:
     ```html
     <div class="filter-row">
         <div class="filter-label">显示名称:</div>
         <div class="filter-tags" id="容器ID"></div>
     </div>
     ```
  
  ## 代码修改说明
  
  ### 1. 配置文件 (`tenant_facets_config.js`)
  - 增加了 `label` 和 `containerId` 字段
  - 新增 `getFacetDisplayConfig()` 函数,根据字段名获取显示配置
  
  ### 2. 前端代码 (`app.js`)
  - `performSearch()`: 使用配置文件获取分面查询参数
  - `displayFacets()`: 使用配置来匹配分面字段并找到对应的容器
  
  ### 3. HTML (`index.html`)
  - 引入了配置文件 `tenant_facets_config.js`
  
  ## 注意事项
  
  1. **字段名必须完全匹配**`field` 必须与 ES 中实际存储的 `specifications.name` 值完全匹配(包括大小写)
  2. **容器ID必须存在**`containerId` 必须在 HTML 中存在,否则分面无法显示
  3. **后端代码无需修改**:后端直接使用前端传入的字段名进行查询
  4. **分面信息是动态加载的**:只有在搜索返回后才显示,符合需求
  
  ## 数据问题说明
  
  对于 tenant_id=170,`category1_name` 字段在 ES 数据中全部为 None,因此该类目分面会返回空。这需要在数据索引时修复,确保正确解析和填充 `category1_name` 字段。