af-mobile-client-vue3 1.3.61 → 1.3.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,124 +0,0 @@
1
- # HomeApp Store 使用说明
2
-
3
- ## 概述
4
- `useHomeAppStore` 是一个专门用于管理首页应用列表的 Pinia store,与 `useSettingStore` 配合使用。
5
-
6
- ## 特性
7
- - 独立管理 `homeAppList` 数据
8
- - 提供完整的 CRUD 操作
9
- - 与 setting store 自动同步数据
10
- - 支持类型安全的 TypeScript 接口
11
-
12
- ## 基本使用
13
-
14
- ### 1. 导入和使用
15
- ```typescript
16
- import { useHomeAppStore } from '@/stores'
17
-
18
- const homeAppStore = useHomeAppStore()
19
- ```
20
-
21
- ### 2. 获取应用列表
22
- ```typescript
23
- // 获取所有应用
24
- const apps = homeAppStore.getHomeAppList()
25
-
26
- // 直接访问响应式数据
27
- const apps = homeAppStore.homeAppList
28
- ```
29
-
30
- ### 3. 添加应用
31
- ```typescript
32
- homeAppStore.addHomeApp({
33
- id: 'new-app',
34
- name: '新应用',
35
- icon: '/icon.png',
36
- url: 'https://example.com',
37
- description: '应用描述'
38
- })
39
- ```
40
-
41
- ### 4. 更新应用
42
- ```typescript
43
- homeAppStore.updateHomeApp('app-id', {
44
- name: '更新后的名称',
45
- description: '新的描述'
46
- })
47
- ```
48
-
49
- ### 5. 删除应用
50
- ```typescript
51
- homeAppStore.removeHomeApp('app-id')
52
- ```
53
-
54
- ### 6. 清空列表
55
- ```typescript
56
- homeAppStore.clearHomeAppList()
57
- ```
58
-
59
- ## 数据同步
60
-
61
- ### 自动同步
62
- - 当 `useSettingStore.init()` 被调用时,`homeAppList` 会自动同步到 `useHomeAppStore`
63
- - 无需手动同步,数据会自动保持一致
64
-
65
- ### 手动同步
66
- ```typescript
67
- import { useSettingStore, useHomeAppStore } from '@/stores'
68
-
69
- const settingStore = useSettingStore()
70
- const homeAppStore = useHomeAppStore()
71
-
72
- // 手动同步数据
73
- homeAppStore.setHomeAppList(settingStore.getSetting()?.homeAppList || [])
74
- ```
75
-
76
- ## 在组件中使用
77
-
78
- ### Vue 组件示例
79
- ```vue
80
- <template>
81
- <div class="home-apps">
82
- <div
83
- v-for="app in homeAppStore.homeAppList"
84
- :key="app.id"
85
- class="app-item"
86
- @click="openApp(app)"
87
- >
88
- <img :src="app.icon" :alt="app.name" />
89
- <span>{{ app.name }}</span>
90
- </div>
91
- </div>
92
- </template>
93
-
94
- <script setup lang="ts">
95
- import { useHomeAppStore } from '@/stores'
96
-
97
- const homeAppStore = useHomeAppStore()
98
-
99
- function openApp(app) {
100
- // 处理应用点击
101
- window.open(app.url, '_blank')
102
- }
103
- </script>
104
- ```
105
-
106
- ## 注意事项
107
-
108
- 1. **初始化顺序**:确保先调用 `useSettingStore.init()`,再使用 `useHomeAppStore`
109
- 2. **数据一致性**:两个 store 中的数据会自动保持同步
110
- 3. **类型安全**:使用 TypeScript 接口确保类型安全
111
- 4. **响应式**:所有数据都是响应式的,可以直接在模板中使用
112
-
113
- ## 接口定义
114
-
115
- ```typescript
116
- export interface HomeApp {
117
- id: string // 应用唯一标识
118
- name: string // 应用名称
119
- icon: string // 应用图标
120
- url: string // 应用链接
121
- description?: string // 应用描述(可选)
122
- [key: string]: any // 其他属性
123
- }
124
- ```