Skip to content

Commit 441ed7c

Browse files
qianmoQqianmoQ
committed
feat (core): 增加关于软件 GitHub 相关链接
1 parent 96a7325 commit 441ed7c

3 files changed

Lines changed: 170 additions & 79 deletions

File tree

‎src/components/About.vue‎

Lines changed: 32 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,19 @@
99
</div>
1010
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 transition-all duration-600 delay-100">CodeForge</h2>
1111
<p class="text-gray-600 dark:text-gray-400 mb-4 transition-all duration-600 delay-200">CodeForge 是一款轻量级、高性能的桌面代码执行器，专为开发者、学生和编程爱好者设计。</p>
12+
13+
<!-- GitHub Actions -->
14+
<div class="flex justify-center gap-3 mt-4">
15+
<Button @click="starRepository" type="warning" :icon="Star" class="transition-all duration-200 transform hover:scale-105 hover:shadow-lg">
16+
给个 Star
17+
</Button>
18+
<Button @click="openGitHubRepo" :icon="GithubIcon" class="transition-all duration-200 transform hover:scale-105 hover:shadow-lg">
19+
查看源码
20+
</Button>
21+
<Button @click="reportIssue" type="danger" :icon="Bug" class="transition-all duration-200 transform hover:scale-105 hover:shadow-lg">
22+
报告问题
23+
</Button>
24+
</div>
1225
</div>
1326

1427
<!-- 版本信息 -->
@@ -70,92 +83,32 @@
7083
</template>
7184

7285
<script setup lang="ts">
73-
import { nextTick, onMounted, ref, watch } from 'vue'
74-
import { invoke } from '@tauri-apps/api/core'
75-
import { open } from '@tauri-apps/plugin-shell'
86+
import { onMounted } from 'vue'
7687
import Modal from '../ui/Modal.vue'
77-
78-
interface AppInfo
79-
{
80-
version: string
81-
build_time: string
82-
platform: string
83-
arch: string
84-
}
85-
86-
const platform = ref('Unknown')
87-
const version = ref('1.0.0')
88-
const buildTime = ref('2025-08-09')
89-
const isVisible = ref(false)
90-
91-
const features = [
92-
'多语言代码执行支持',
93-
'智能语法高亮系统',
94-
'实时执行统计分析',
95-
'现代化用户界面'
96-
]
97-
98-
const techStack = [
99-
{ name: 'Vue 3', class: 'bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200', url: 'https://vuejs.org' },
100-
{ name: 'TypeScript', class: 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200', url: 'https://www.typescriptlang.org' },
101-
{ name: 'Tauri', class: 'bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-200', url: 'https://tauri.app' },
102-
{ name: 'Rust', class: 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200', url: 'https://www.rust-lang.org' },
103-
{ name: 'Tailwind CSS', class: 'bg-cyan-100 dark:bg-cyan-900/50 text-cyan-800 dark:text-cyan-200', url: 'https://tailwindcss.com' }
104-
]
88+
import { useAboutModal } from '../composables/useAboutModal'
89+
import Button from '../ui/Button.vue'
90+
import { Bug, GithubIcon, Star } from 'lucide-vue-next'
10591
10692
const emit = defineEmits<{
10793
close: []
10894
}>()
10995
110-
const closeAbout = () => {
111-
isVisible.value = false
112-
setTimeout(() => {
113-
emit('close')
114-
}, 300)
115-
}
116-
117-
const openTechUrl = async (url: string) => {
118-
try {
119-
console.log('Opening URL:', url)
120-
await open(url)
121-
}
122-
catch (error) {
123-
console.error('Failed to open URL:', error)
124-
}
125-
}
126-
127-
const loadAppInfo = async () => {
128-
try {
129-
const appInfo: AppInfo = await invoke('get_app_info')
130-
version.value = appInfo.version
131-
buildTime.value = appInfo.build_time
132-
platform.value = `${ appInfo.platform } (${ appInfo.arch })`
133-
}
134-
catch (error) {
135-
console.error('Failed to get app info:', error)
136-
// 使用默认值
137-
platform.value = navigator.platform
138-
}
139-
}
140-
141-
// 监听组件显示状态，当组件重新显示时重置动画
142-
watch(() => true, () => {
143-
if (!isVisible.value) {
144-
nextTick(() => {
145-
setTimeout(() => {
146-
isVisible.value = true
147-
}, 50)
148-
})
149-
}
150-
})
96+
const {
97+
isVisible,
98+
platform,
99+
version,
100+
buildTime,
101+
features,
102+
techStack,
103+
openTechUrl,
104+
openGitHubRepo,
105+
starRepository,
106+
reportIssue,
107+
closeAbout,
108+
showModal
109+
} = useAboutModal(emit)
151110
152111
onMounted(async () => {
153-
await loadAppInfo()
154-
155-
// 延迟显示动画
156-
await nextTick()
157-
setTimeout(() => {
158-
isVisible.value = true
159-
}, 50)
112+
await showModal()
160113
})
161114
</script>

‎src/composables/useAboutModal.ts‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import { nextTick, ref } from 'vue'
2+
import { invoke } from '@tauri-apps/api/core'
3+
import { open } from '@tauri-apps/plugin-shell'
4+
import { AppInfo } from '../types/app.ts'
5+
6+
export function useAboutModal(emit: any)
7+
{
8+
// 状态管理
9+
const isVisible = ref(false)
10+
const platform = ref('Unknown')
11+
const version = ref('1.0.0')
12+
const buildTime = ref('2025-08-09')
13+
14+
// 功能列表
15+
const features = [
16+
'多语言代码执行支持',
17+
'智能语法高亮系统',
18+
'实时执行统计分析',
19+
'现代化用户界面'
20+
]
21+
22+
// 技术栈
23+
const techStack = [
24+
{ name: 'Vue 3', class: 'bg-emerald-100 dark:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200', url: 'https://vuejs.org' },
25+
{ name: 'TypeScript', class: 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200', url: 'https://www.typescriptlang.org' },
26+
{ name: 'Tauri', class: 'bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-200', url: 'https://tauri.app' },
27+
{ name: 'Rust', class: 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200', url: 'https://www.rust-lang.org' },
28+
{ name: 'Tailwind CSS', class: 'bg-cyan-100 dark:bg-cyan-900/50 text-cyan-800 dark:text-cyan-200', url: 'https://tailwindcss.com' }
29+
]
30+
31+
// GitHub 相关信息
32+
const githubInfo = {
33+
repository: 'https://github.com/devlive-community/codeforge',
34+
starUrl: 'https://github.com/devlive-community/codeforge/stargazers',
35+
issuesUrl: 'https://github.com/devlive-community/codeforge/issues'
36+
}
37+
38+
// 加载应用信息
39+
const loadAppInfo = async () => {
40+
try {
41+
const appInfo: AppInfo = await invoke('get_app_info')
42+
version.value = appInfo.version
43+
buildTime.value = appInfo.build_time
44+
platform.value = `${ appInfo.platform } (${ appInfo.arch })`
45+
}
46+
catch (error) {
47+
console.error('Failed to get app info:', error)
48+
// 使用默认值
49+
platform.value = navigator.platform
50+
}
51+
}
52+
53+
// 打开技术栈链接
54+
const openTechUrl = async (url: string) => {
55+
try {
56+
console.log('Opening URL:', url)
57+
await open(url)
58+
}
59+
catch (error) {
60+
console.error('Failed to open URL:', error)
61+
}
62+
}
63+
64+
// 打开 GitHub 仓库
65+
const openGitHubRepo = async () => {
66+
try {
67+
await open(githubInfo.repository)
68+
}
69+
catch (error) {
70+
console.error('Failed to open GitHub repository:', error)
71+
}
72+
}
73+
74+
// 给仓库点 Star
75+
const starRepository = async () => {
76+
try {
77+
await open(githubInfo.repository)
78+
}
79+
catch (error) {
80+
console.error('Failed to star repository:', error)
81+
}
82+
}
83+
84+
// 报告问题
85+
const reportIssue = async () => {
86+
try {
87+
await open(githubInfo.issuesUrl)
88+
}
89+
catch (error) {
90+
console.error('Failed to open issues page:', error)
91+
}
92+
}
93+
94+
// 关闭模态框
95+
const closeAbout = () => {
96+
isVisible.value = false
97+
setTimeout(() => {
98+
emit('close')
99+
}, 300)
100+
}
101+
102+
// 显示模态框
103+
const showModal = async () => {
104+
await loadAppInfo()
105+
await nextTick()
106+
setTimeout(() => {
107+
isVisible.value = true
108+
}, 50)
109+
}
110+
111+
return {
112+
// 状态
113+
isVisible,
114+
platform,
115+
version,
116+
buildTime,
117+
features,
118+
techStack,
119+
githubInfo,
120+
121+
// 方法
122+
loadAppInfo,
123+
openTechUrl,
124+
openGitHubRepo,
125+
starRepository,
126+
reportIssue,
127+
closeAbout,
128+
showModal
129+
}
130+
}

‎src/types/app.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,11 @@ export interface CodeOutputEvent
3636
content: string
3737
language: string
3838
}
39+
40+
export interface AppInfo
41+
{
42+
version: string
43+
build_time: string
44+
platform: string
45+
arch: string
46+
}

0 commit comments

Comments
 (0)