update frontend

Author: zmh-program

README.md

@@ -40,9 +40,9 @@ The repository card are used to show the language analysis of the project, stars
 ## 🍎 Contributor Card
 The contributor card is used to count the contributors in a project and will be ranked by the number of `commits`.
 ```markdown
-[![Web ChatGPT QQ Bot's Contributors](https://stats.deeptrain.net/contributor/zmh-program/web-chatgpt-qq-bot?column=8)](https://github.com/zmh-program/code-statistic)
+[![Web ChatGPT QQ Bot's Contributors](https://stats.deeptrain.net/contributor/zmh-program/web-chatgpt-qq-bot)](https://github.com/zmh-program/code-statistic)
 ```
-[![Web ChatGPT QQ Bot's Contributors](https://stats.deeptrain.net/contributor/zmh-program/web-chatgpt-qq-bot?column=8)](https://github.com/zmh-program/code-statistic)
+[![Web ChatGPT QQ Bot's Contributors](https://stats.deeptrain.net/contributor/zmh-program/web-chatgpt-qq-bot)](https://github.com/zmh-program/code-statistic)
 
 
 The param `column` is the number of contributors in each row. The minimum is **4** and the default is **6**.
@@ -67,9 +67,9 @@ The issue card is used to show the status of the issue, title, time, communicati
 ## 🍓 Pull Request Card
 The pull request card is used to show the status of the pull request, branches, title, time, migrations, etc.
 ```markdown
-[![TurboWarp's PR #497](https://stats.deeptrain.net/pull/TurboWarp/extensions/497)](https://github.com/zmh-program/code-statistic)
+[![Code Statistic's PR #1](https://stats.deeptrain.net/pull/zmh-program/code-statistic/1)](https://github.com/zmh-program/code-statistic)
 ```
-[![TurboWarp's PR #497](https://stats.deeptrain.net/pull/TurboWarp/extensions/497)](https://github.com/zmh-program/code-statistic)
+[![Code Statistic's PR #1](https://stats.deeptrain.net/pull/zmh-program/code-statistic/1)](https://github.com/zmh-program/code-statistic)
 
 ## 🥝 Dark Theme
 Very easy, just add `?theme=dark` after it in any kind of card!

gui/src/App.vue

@@ -22,6 +22,16 @@ const release = reactive({
   repo: '',
   tag: 'latest'
 })
+const issue = reactive({
+  username: '',
+  repo: '',
+  id: 1,
+})
+const pull = reactive({
+  username: '',
+  repo: '',
+  id: 1,
+})
 
 function validate(map: Record<string, any>) {
   for (const key in map) {
@@ -57,6 +67,14 @@ function generate() {
       if (!validate(release)) return;
       link.value = join(`/release/${release.username}/${release.repo}/?tag=${release.tag}&theme=${theme.value}`);
       break;
+    case 'issue':
+      if (!validate(issue)) return;
+      link.value = join(`/issue/${issue.username}/${issue.repo}/${issue.id}?theme=${theme.value}`);
+      break;
+    case 'pull':
+      if (!validate(pull)) return;
+      link.value = join(`/pull/${pull.username}/${pull.repo}/${pull.id}?theme=${theme.value}`);
+      break;
   }
 }
 </script>
@@ -107,6 +125,32 @@ function generate() {
             <t-input placeholder="tag" v-model="release.tag" />
           </t-form-item>
         </t-tab-panel>
+        <t-tab-panel value="issue" label="Issue"><br>
+          <t-form-item label="User">
+            <t-input-adornment prepend="github.com/">
+              <t-input placeholder="username" v-model="issue.username" />
+            </t-input-adornment>
+          </t-form-item>
+          <t-form-item label="Repo">
+            <t-input placeholder="repository" v-model="issue.repo" />
+          </t-form-item>
+          <t-form-item label="Id">
+            <t-input placeholder="id" v-model="issue.id" />
+          </t-form-item>
+        </t-tab-panel>
+        <t-tab-panel value="pull" label="Pull Request"><br>
+          <t-form-item label="User">
+            <t-input-adornment prepend="github.com/">
+              <t-input placeholder="username" v-model="pull.username" />
+            </t-input-adornment>
+          </t-form-item>
+          <t-form-item label="Repo">
+            <t-input placeholder="repository" v-model="pull.repo" />
+          </t-form-item>
+          <t-form-item label="Id">
+            <t-input placeholder="id" v-model="pull.id" />
+          </t-form-item>
+        </t-tab-panel>
       </t-tabs>
       <t-form-item label="Theme" name="theme" initial-data="dark">
         <t-select defaultValue="light" class="select" v-model="theme">