Skip to content
This repository was archived by the owner on May 11, 2025. It is now read-only.

Commit 4a8ba32

Browse files
zmh-programzmh-program
committed
update frontend
1 parent 521add0 commit 4a8ba32

2 files changed

Lines changed: 78 additions & 11 deletions

File tree

‎gui/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>Code Statistic</title>
99
<meta name="description" content="🔎 Dynamically analysis the code for each language in the repository/user and generate the results for your github account and repo README. 🔎 动态生成用户/仓库中的语言统计，可以作为图片装饰在个人首页和仓库README中" />
10+
<link crossorigin='anonymous' href="https://fonts.googlefonts.cn/css?family=Open+Sans" rel="stylesheet">
1011
<link crossorigin='anonymous' href="https://fonts.googlefonts.cn/css?family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
1112
</head>
1213
<body>

‎gui/src/App.vue‎

Lines changed: 77 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,78 @@
11
<script setup lang="ts">
2+
import {reactive, ref} from "vue";
3+
4+
const link = ref('');
5+
const tab = ref('user');
6+
const theme = ref('light');
7+
8+
const user = reactive({
9+
username: '',
10+
});
11+
const repo = reactive({
12+
username: '',
13+
repo: '',
14+
});
15+
16+
function tabChanged(value: string) {
17+
tab.value = value;
18+
}
19+
20+
function join(src: string) {
21+
return `https://stats.deeptrain.net` + src;
22+
}
23+
function generate() {
24+
switch (tab.value) {
25+
case 'user':
26+
link.value = join(`/user/${user.username}?theme=${theme.value}`);
27+
break;
28+
case 'repo':
29+
link.value = join(`/repo/${repo.username}/${repo.repo}/?theme=${theme.value}`);
30+
break;
31+
case 'release':
32+
//link.value = `https://code-statistic.vercel.app/api?username=zmh-program&repo=code-statistic&theme=${theme}`;
33+
break;
34+
}
35+
}
236
</script>
337
<template>
438
<t-card bordered class="card">
539
<t-form class="form">
6-
<t-tabs :default-value="1" class="tab">
7-
<t-tab-panel :value="1" label="User"><br>
40+
<t-tabs default-value="user" class="tab" :onChange="tabChanged">
41+
<t-tab-panel value="user" label="User"><br>
842
<t-form-item label="User">
943
<t-input-adornment prepend="github.com/">
10-
<t-input placeholder="username" />
44+
<t-input placeholder="username" v-model="user.username" />
1145
</t-input-adornment>
1246
</t-form-item>
1347
</t-tab-panel>
14-
<t-tab-panel :value="2" label="Repo"><br>
48+
<t-tab-panel value="repo" label="Repo"><br>
1549
<t-form-item label="User">
1650
<t-input-adornment prepend="github.com/">
17-
<t-input placeholder="username" />
51+
<t-input placeholder="username" v-model="repo.username" />
1852
</t-input-adornment>
1953
</t-form-item>
2054
<t-form-item label="Repo">
21-
<t-input placeholder="repository" />
55+
<t-input placeholder="repository" v-model="repo.repo" />
2256
</t-form-item>
2357
</t-tab-panel>
24-
<t-tab-panel :value="3" label="Release">
58+
<t-tab-panel value="release" label="Release">
2559
</t-tab-panel>
2660
</t-tabs>
2761
<t-form-item label="Theme" name="theme" initial-data="dark">
28-
<t-select defaultValue="light">
62+
<t-select defaultValue="light" class="select" v-model="theme">
2963
<t-option key="light" label="light" value="light" />
3064
<t-option key="dark" label="dark" value="dark" />
3165
</t-select>
3266
</t-form-item>
3367
</t-form>
34-
<t-button id="generate">Generate</t-button>
68+
<t-button id="generate" @click="generate">Generate</t-button>
69+
<a class="quote" href="https://github.com/zmh-program/code-statistic">
70+
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
71+
</a>
72+
</t-card>
73+
<t-card class="response">
74+
<img :src="link" alt v-if="link" />
75+
<t-loading class="loading" v-else />
3576
</t-card>
3677
</template>
3778

@@ -63,9 +104,15 @@ html, body {
63104
min-width: 220px;
64105
max-width: 550px;
65106
}
107+
.t-input-adornment {
108+
width: 100%;
109+
}
66110
67111
.card {
68112
width: 100%;
113+
padding-bottom: 12px;
114+
}
115+
.card .t-card__body {
69116
display: grid;
70117
grid-gap: 46px;
71118
}
@@ -83,15 +130,34 @@ html, body {
83130
margin: 0 auto;
84131
}
85132
86-
#preview {
133+
.response {
134+
min-height: 120px;
135+
height: max-content;
136+
margin-bottom: 24px;
137+
}
138+
139+
.response .loading {
140+
position: absolute;
141+
top: 50%;
142+
left: 50%;
143+
transform: translate(-50%, -50%);
144+
}
145+
146+
.response img {
87147
width: 100%;
88148
}
89149
90150
.quote {
151+
position: absolute;
91152
width: 20px;
153+
top: 24px;
154+
right: 24px;
92155
color: black !important;
93-
float: right;
94156
text-decoration: none;
95157
transform: translate(5px, -5px);
96158
}
159+
160+
.select * {
161+
font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
162+
}
97163
</style>

0 commit comments

Comments
 (0)