Hugging Face's logo

Spaces:
CatPtain
/
web_ppt
Running

App Files Community
CatPtain commited on
Commit
31fe995
·
verified ·
1 Parent(s): f5b4781

Upload 44 files

Browse files
Files changed (2) hide show
  1. frontend/src/components/CheckboxButton.vue +20 -20
  2. frontend/src/components/PPTManager.vue +164 -164
frontend/src/components/CheckboxButton.vue CHANGED
@@ -1,21 +1,21 @@
1
- <template>
2
- <Button
3
- :checked="checked"
4
- :disabled="disabled"
5
- type="checkbox"
6
- >
7
- <slot></slot>
8
- </Button>
9
- </template>
10
-
11
- <script lang="ts" setup>
12
- import Button from './Button.vue'
13
-
14
- withDefaults(defineProps<{
15
- checked?: boolean
16
- disabled?: boolean
17
- }>(), {
18
- checked: false,
19
- disabled: false,
20
- })
21
  </script>
 
1
+ <template>
2
+ <Button
3
+ :checked="checked"
4
+ :disabled="disabled"
5
+ type="checkbox"
6
+ >
7
+ <slot></slot>
8
+ </Button>
9
+ </template>
10
+
11
+ <script lang="ts" setup>
12
+ import Button from './Button.vue'
13
+
14
+ withDefaults(defineProps<{
15
+ checked?: boolean
16
+ disabled?: boolean
17
+ }>(), {
18
+ checked: false,
19
+ disabled: false,
20
+ })
21
  </script>
frontend/src/components/PPTManager.vue CHANGED
@@ -1,165 +1,165 @@
1
- <template>
2
- <div class="ppt-manager">
3
- <div class="ppt-manager-header">
4
- <h3>我的演示文稿</h3>
5
- <div class="header-actions">
6
- <button @click="handleCreateNewPPT" :disabled="loading" class="btn-primary">
7
- 新建PPT
8
- </button>
9
- <button @click="handleSaveCurrentPPT" :disabled="loading" class="btn-secondary">
10
- 保存当前
11
- </button>
12
- <button @click="handleLogout" class="btn-logout">
13
- 退出登录
14
- </button>
15
- </div>
16
- </div>
17
-
18
- <div class="ppt-list" v-if="pptList.length > 0">
19
- <div
20
- v-for="ppt in pptList"
21
- :key="ppt.name"
22
- class="ppt-item"
23
- @click="() => loadPPT(ppt.name)"
24
- >
25
- <div class="ppt-info">
26
- <h4>{{ ppt.title || ppt.name }}</h4>
27
- <span class="ppt-meta">{{ ppt.repoUrl }}</span>
28
- </div>
29
- <div class="ppt-actions">
30
- <button @click.stop="() => handleGenerateShareLinks(0)" class="btn-share">
31
- 分享
32
- </button>
33
- <button @click.stop="() => deletePPT(ppt.name)" class="btn-delete">
34
- 删除
35
- </button>
36
- </div>
37
- </div>
38
- </div>
39
-
40
- <div v-else-if="!loading" class="empty-state">
41
- <p>还没有演示文稿，创建一个开始吧！</p>
42
- </div>
43
-
44
- <div v-if="loading" class="loading-state">
45
- <p>加载中...</p>
46
- </div>
47
- </div>
48
- </template>
49
-
50
- <script setup lang="ts">
51
- import { useAuthStore } from '@/store'
52
- import usePPTManager from '@/hooks/usePPTManager'
53
-
54
- const authStore = useAuthStore()
55
- const {
56
- pptList,
57
- loading,
58
- createNewPPT,
59
- loadPPT,
60
- deletePPT,
61
- saveCurrentPPT,
62
- generateShareLinks
63
- } = usePPTManager()
64
-
65
- // 包装函数以修复类型错误
66
- const handleCreateNewPPT = () => createNewPPT()
67
- const handleSaveCurrentPPT = () => saveCurrentPPT()
68
- const handleLogout = () => authStore.logout()
69
- const handleGenerateShareLinks = (slideIndex: number) => generateShareLinks(slideIndex)
70
- </script>
71
-
72
- <style scoped>
73
- .ppt-manager {
74
- padding: 20px;
75
- max-width: 800px;
76
- margin: 0 auto;
77
- }
78
-
79
- .ppt-manager-header {
80
- display: flex;
81
- justify-content: space-between;
82
- align-items: center;
83
- margin-bottom: 20px;
84
- }
85
-
86
- .header-actions {
87
- display: flex;
88
- gap: 10px;
89
- }
90
-
91
- .btn-primary, .btn-secondary, .btn-logout, .btn-share, .btn-delete {
92
- padding: 8px 16px;
93
- border: none;
94
- border-radius: 4px;
95
- cursor: pointer;
96
- font-size: 14px;
97
- }
98
-
99
- .btn-primary {
100
- background: #5b9bd5;
101
- color: white;
102
- }
103
-
104
- .btn-secondary {
105
- background: #f0f0f0;
106
- color: #333;
107
- }
108
-
109
- .btn-logout {
110
- background: #dc3545;
111
- color: white;
112
- }
113
-
114
- .btn-share {
115
- background: #28a745;
116
- color: white;
117
- }
118
-
119
- .btn-delete {
120
- background: #dc3545;
121
- color: white;
122
- }
123
-
124
- .ppt-list {
125
- display: flex;
126
- flex-direction: column;
127
- gap: 10px;
128
- }
129
-
130
- .ppt-item {
131
- display: flex;
132
- justify-content: space-between;
133
- align-items: center;
134
- padding: 15px;
135
- border: 1px solid #ddd;
136
- border-radius: 8px;
137
- cursor: pointer;
138
- transition: background-color 0.2s;
139
- }
140
-
141
- .ppt-item:hover {
142
- background-color: #f8f9fa;
143
- }
144
-
145
- .ppt-info h4 {
146
- margin: 0 0 5px 0;
147
- color: #333;
148
- }
149
-
150
- .ppt-meta {
151
- font-size: 12px;
152
- color: #666;
153
- }
154
-
155
- .ppt-actions {
156
- display: flex;
157
- gap: 8px;
158
- }
159
-
160
- .empty-state, .loading-state {
161
- text-align: center;
162
- padding: 40px;
163
- color: #666;
164
- }
165
  </style>
 
1
+ <template>
2
+ <div class="ppt-manager">
3
+ <div class="ppt-manager-header">
4
+ <h3>我的演示文稿</h3>
5
+ <div class="header-actions">
6
+ <button @click="handleCreateNewPPT" :disabled="loading" class="btn-primary">
7
+ 新建PPT
8
+ </button>
9
+ <button @click="handleSaveCurrentPPT" :disabled="loading" class="btn-secondary">
10
+ 保存当前
11
+ </button>
12
+ <button @click="handleLogout" class="btn-logout">
13
+ 退出登录
14
+ </button>
15
+ </div>
16
+ </div>
17
+
18
+ <div class="ppt-list" v-if="pptList.length > 0">
19
+ <div
20
+ v-for="ppt in pptList"
21
+ :key="ppt.name"
22
+ class="ppt-item"
23
+ @click="() => loadPPT(ppt.name)"
24
+ >
25
+ <div class="ppt-info">
26
+ <h4>{{ ppt.title || ppt.name }}</h4>
27
+ <span class="ppt-meta">{{ ppt.repoUrl }}</span>
28
+ </div>
29
+ <div class="ppt-actions">
30
+ <button @click.stop="() => handleGenerateShareLinks(0)" class="btn-share">
31
+ 分享
32
+ </button>
33
+ <button @click.stop="() => deletePPT(ppt.name)" class="btn-delete">
34
+ 删除
35
+ </button>
36
+ </div>
37
+ </div>
38
+ </div>
39
+
40
+ <div v-else-if="!loading" class="empty-state">
41
+ <p>还没有演示文稿，创建一个开始吧！</p>
42
+ </div>
43
+
44
+ <div v-if="loading" class="loading-state">
45
+ <p>加载中...</p>
46
+ </div>
47
+ </div>
48
+ </template>
49
+
50
+ <script setup lang="ts">
51
+ import { useAuthStore } from '@/store'
52
+ import usePPTManager from '@/hooks/usePPTManager'
53
+
54
+ const authStore = useAuthStore()
55
+ const {
56
+ pptList,
57
+ loading,
58
+ createNewPPT,
59
+ loadPPT,
60
+ deletePPT,
61
+ saveCurrentPPT,
62
+ generateShareLinks
63
+ } = usePPTManager()
64
+
65
+ // 包装函数以修复类型错误
66
+ const handleCreateNewPPT = () => createNewPPT()
67
+ const handleSaveCurrentPPT = () => saveCurrentPPT()
68
+ const handleLogout = () => authStore.logout()
69
+ const handleGenerateShareLinks = (slideIndex: number) => generateShareLinks(slideIndex)
70
+ </script>
71
+
72
+ <style scoped>
73
+ .ppt-manager {
74
+ padding: 20px;
75
+ max-width: 800px;
76
+ margin: 0 auto;
77
+ }
78
+
79
+ .ppt-manager-header {
80
+ display: flex;
81
+ justify-content: space-between;
82
+ align-items: center;
83
+ margin-bottom: 20px;
84
+ }
85
+
86
+ .header-actions {
87
+ display: flex;
88
+ gap: 10px;
89
+ }
90
+
91
+ .btn-primary, .btn-secondary, .btn-logout, .btn-share, .btn-delete {
92
+ padding: 8px 16px;
93
+ border: none;
94
+ border-radius: 4px;
95
+ cursor: pointer;
96
+ font-size: 14px;
97
+ }
98
+
99
+ .btn-primary {
100
+ background: #5b9bd5;
101
+ color: white;
102
+ }
103
+
104
+ .btn-secondary {
105
+ background: #f0f0f0;
106
+ color: #333;
107
+ }
108
+
109
+ .btn-logout {
110
+ background: #dc3545;
111
+ color: white;
112
+ }
113
+
114
+ .btn-share {
115
+ background: #28a745;
116
+ color: white;
117
+ }
118
+
119
+ .btn-delete {
120
+ background: #dc3545;
121
+ color: white;
122
+ }
123
+
124
+ .ppt-list {
125
+ display: flex;
126
+ flex-direction: column;
127
+ gap: 10px;
128
+ }
129
+
130
+ .ppt-item {
131
+ display: flex;
132
+ justify-content: space-between;
133
+ align-items: center;
134
+ padding: 15px;
135
+ border: 1px solid #ddd;
136
+ border-radius: 8px;
137
+ cursor: pointer;
138
+ transition: background-color 0.2s;
139
+ }
140
+
141
+ .ppt-item:hover {
142
+ background-color: #f8f9fa;
143
+ }
144
+
145
+ .ppt-info h4 {
146
+ margin: 0 0 5px 0;
147
+ color: #333;
148
+ }
149
+
150
+ .ppt-meta {
151
+ font-size: 12px;
152
+ color: #666;
153
+ }
154
+
155
+ .ppt-actions {
156
+ display: flex;
157
+ gap: 8px;
158
+ }
159
+
160
+ .empty-state, .loading-state {
161
+ text-align: center;
162
+ padding: 40px;
163
+ color: #666;
164
+ }
165
  </style>