docs: 配置www.tall.wiki游戏目录;约定各游戏名称

README.md

@@ -1,7 +1,63 @@
-# Vue 3 + Vite
+# 康复游戏入口界面
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## 配置相关
 
-## Recommended IDE Setup
+### 训练部位
+```js
+export const TRAIN_SITE_LIST = [
+  { id: '1', name: 'UpperLimb', text: '上肢训练', order: 1 },
+  { id: '2', name: 'Hand', text: '手部训练', order: 2 },
+  { id: '3', name: 'LowerLimb', text: '下肢训练', order: 3 },
+];
+```
 
-- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+### 游戏列表
+```js
+// 游戏列表
+export const GAME_LIST = [
+  { id: '1', name: 'balloon', text: '踩气球', order: 1, site: 'LowerLimb' },
+  { id: '2', name: 'tomato', text: '番茄炒蛋', order: 2, site: 'Hand' },
+  { id: '3', name: 'hurdle', text: '跨栏', order: 3, site: 'LowerLimb' },
+  { id: '4', name: 'basketball', text: '投篮', order: 4, site: 'UpperLimb' },
+  { id: '5', name: 'bird', text: '鸟妈妈回家', order: 5, site: 'UpperLimb' },
+  { id: '6', name: 'bomb', text: '太空战机', order: 6, site: 'Hand' },
+  { id: '7', name: 'football', text: '踢足球', order: 7, site: 'LowerLimb' },
+  { id: '8', name: 'apple', text: '摘苹果', order: 8, site: 'Hand' },
+  { id: '9', name: 'orange-juice', text: '挤橙汁', order: 9, site: 'Hand' },
+  { id: '10', name: 'golf', text: '高尔夫', order: 10, site: 'UpperLimb' },
+  { id: '11', name: 'fish', text: '大鱼吃小鱼', order: 11, site: 'Hand' },
+  { id: '12', name: 'radish', text: '拔萝卜', order: 12, site: 'UpperLimb' },
+];
+```
+
+## 使用方法
+store里记录了selectedSite 当前训练部位的name值
+getters里根据selectedSite的值计算返回当前训练部位对应的游戏列表
+点击训练部位 更新selectedSite的值
+
+```js
+export default createStore({
+  state: { selectedSite: '' },
+  getters: {
+    /**
+     * 当前选中的训练部位下的 游戏列表
+     * @param {string} selectedSite
+     * @returns {{site: string, name: string, id: string, text: string, order: number}[]|*[]}
+     */
+    selectedGames({ selectedSite }) {
+      return getGamesBySite(selectedSite) || [];
+    },
+  },
+  mutations: {
+    /**
+     * 设置选中的训练部位
+     * @param state
+     * @param {string} site
+     */
+    setSelectedSite(state, site) {
+      state.selectedSite = site;
+    },
+  },
+  actions: {},
+});
+```