Quellcode durchsuchen

fix: :key 表达式改为方法调用,修复小程序非 H5 平台编译警告

微信小程序模板编译器不支持 :key 中带运算符的表达式
(item.id || item.circleId),改为 getCircleKey(item) 方法调用。

pages/action/index.vue (2处) + pages/discover/circles.vue (2处)
同时更新 AGENTS.md / README.md 加入规范
liaoxg vor 1 Monat
Ursprung
Commit
aafc8d5748
5 geänderte Dateien mit 14 neuen und 6 gelöschten Zeilen
  1. 2 1
      AGENTS.md
  2. 1 1
      README.md
  3. 1 0
      cfc-frontend/AGENTS.md
  4. 5 2
      cfc-frontend/pages/action/index.vue
  5. 5 2
      cfc-frontend/pages/discover/circles.vue

+ 2 - 1
AGENTS.md

@@ -42,7 +42,7 @@
 - **认证:** JWT Bearer Token,`Authorization` Header;`JwtInterceptor` 拦截 `/api/**`(8个公开路径除外)
 - **DI:** `@Resource` 替代 `@Autowired`,字段名匹配默认 Bean Name
 - **角色控制:** 控制器内手动检查 `@RequestAttribute("role")`
-- **小程序限制:** 禁止可选链 `?.`(用 `&&` 替代)、禁止 CSS Grid(用 flexbox)
+- **小程序限制:** 禁止可选链 `?.`(用 `&&` 替代)、禁止 CSS Grid(用 flexbox)、禁止 `:key` 表达式(用方法调用代替)
 - **新增Controller/Service:** 检查类名是否与其他包重名(Spring Bean Name 冲突)
 - **新增路由:** 运行 `grep -rn '@Mapping' cfc-backend/src/.../controller/ | grep -oP '@\w+Mapping\("\K[^"]*' | sort -u` 检查重复
 
@@ -220,6 +220,7 @@ curl -X POST http://localhost:9082/api/migration/run
 
 - 禁止可选链 `?.`(用 `&&` 替代)
 - 禁止 CSS Grid(用 flexbox)
+- 禁止 `:key` 表达式(如 `:key="item.id || item.circleId"`,微信小程序模板编译器不支持带运算符的 `:key` 绑定 → 改用方法调用 `:key="getItemKey(item)"`)
 - Vue 2 Options API,禁止 Composition API
 
 ## 子模块详细规范

+ 1 - 1
README.md

@@ -264,7 +264,7 @@ npm run serve                # localhost:8082
 - **认证:** JWT Bearer Token,`JwtInterceptor` 拦截 `/api/**`(8 个公开路径除外)
 - **DI:** `@Resource`,字段名匹配 Bean Name
 - **角色控制:** 控制器内手动检查 `@RequestAttribute("role")`
-- **小程序限制:** 禁止可选链 `?.`(用 `&&` 替代)、禁止 CSS Grid(用 flexbox)
+- **小程序限制:** 禁止可选链 `?.`(用 `&&` 替代)、禁止 CSS Grid(用 flexbox)、禁止 `:key` 表达式(用方法调用代替)
 - **小程序设计:** Vue 2 Options API,不引入 Composition API
 
 ---

+ 1 - 0
cfc-frontend/AGENTS.md

@@ -96,6 +96,7 @@ pages.json 中定义 5 个 TabBar 页面(TabBar 文案,非五维维度名)
 - **NEVER** 在 WXML/Vue 模板中使用可选链 `?.`,微信小程序不支持 → 使用 `&&` 代替(如 `currentWish?.title` 改为 `currentWish && currentWish.title`)
 - **NEVER** 在 `:class` 绑定中调用方法(如 `:class="getStatusClass(item)"`),微信小程序模板编译器不支持带参数的方法调用 → 改用内联表达式(如 `:class="'status-' + item._cssClass"`)或计算属性
 - **NEVER** 在 CSS 类名、选择器中使用中文(如 `.val-偏高`、`.badge-低风险`),微信小程序 wxss 编译器不支持中文类名 → 使用英文(如 `.val-high`、`.badge-low`),数据中的中文状态通过 `_cssClass` 字段映射
+- **NEVER** 在 `:key` 中使用表达式(如 `:key="item.id || item.circleId"`),微信小程序模板编译器不支持带运算符的 `:key` 绑定 → 改用方法调用(如 `:key="getItemKey(item)"`,在 methods 中定义 `getItemKey(item) { return item.id || item.circleId }`)
 
 ## UNIQUE FEATURES
 

+ 5 - 2
cfc-frontend/pages/action/index.vue

@@ -97,7 +97,7 @@
           </view>
           <scroll-view class="circle-scroll" scroll-x enable-flex v-if="myCircles.length > 0">
             <view class="circle-scroll-inner">
-              <view class="circle-card-wrap" v-for="item in myCircles" :key="item.id || item.circleId" @click="onCircleClick(item)">
+              <view class="circle-card-wrap" v-for="item in myCircles" :key="getCircleKey(item)" @click="onCircleClick(item)">
                 <CircleCard :circle="item" compact />
               </view>
             </view>
@@ -113,7 +113,7 @@
               <text class="circle-header-link" @click="goDiscoverCircles">查看更多 ›</text>
             </view>
             <view class="discover-list">
-              <view class="discover-item" v-for="item in discoverCirclesList" :key="item.id || item.circleId" @click="onCircleClick(item)">
+              <view class="discover-item" v-for="item in discoverCirclesList" :key="getCircleKey(item)" @click="onCircleClick(item)">
                 <CircleCard :circle="item" />
               </view>
             </view>
@@ -254,6 +254,9 @@ export default {
     this._watchPageReady()
   },
   methods: {
+    getCircleKey: function(item) {
+      return item.id || item.circleId
+    },
     loadSectionConfig: function() {
       var self = this
       var baseSections = ['func_entries']

+ 5 - 2
cfc-frontend/pages/discover/circles.vue

@@ -33,7 +33,7 @@
         <view class="circle-grid">
           <view
             v-for="item in myCircles"
-            :key="item.id || item.circleId"
+            :key="getCircleKey(item)"
             class="circle-item"
             @click="onCircleClick(item)">
             <CircleCard :circle="item" compact />
@@ -49,7 +49,7 @@
         <view class="circle-grid" v-if="discoverList.length > 0">
           <view
             v-for="item in discoverList"
-            :key="item.id || item.circleId"
+            :key="getCircleKey(item)"
             class="circle-item"
             @click="onCircleClick(item)">
             <CircleCard :circle="item" />
@@ -94,6 +94,9 @@ export default {
     this.loadData()
   },
   methods: {
+    getCircleKey: function(item) {
+      return item.id || item.circleId
+    },
     loadData: function() {
       var self = this
       self.loading = true