Merge pull request #33 from iori2333/master

v1.0.9
nju-lug · Jan 11, 2023 · 692f430 · 692f430
2 parents 653f5ed + 393ab6e
commit 692f430
Show file tree

Hide file tree

Showing 17 changed files with 247 additions and 110 deletions.
diff --git a/index.html b/index.html
@@ -1,16 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NJU Mirror</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>NJU Mirror</title>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <script>
+      if (window.ActiveXObject || 'ActiveXObject' in window) {
+        document.getElementById('app').innerHTML =
+          'Internet Explorer is no longer supported. Please use modern browsers such as Chrome, Firefox, Edge, etc.';
+      }
+    </script>
+  </body>
+</html>
diff --git a/src/assets/index-logo.jpg b/src/assets/index-logo.jpg
diff --git a/src/assets/nju-alt.png b/src/assets/nju-alt.png
diff --git a/src/assets/logo.png → src/assets/nju.png b/src/assets/logo.png → src/assets/nju.png
diff --git a/src/assets/report.json b/src/assets/report.json
@@ -0,0 +1,21 @@
+{
+  "request": {
+    "github": "https://github.com/nju-lug/NJU-Mirror-Issue/issues/new?assignees=yaoge123&labels=enhancement&template=new-mirror-request.md&title=%5BNMR%5D+New+Mirror+Request+for+%5BName%5D"
+  },
+  "mirror": {
+    "github": "https://github.com/nju-lug/NJU-Mirror-Issue/issues/new?assignees=yaoge123&labels=bug&template=mirror-error-report.md&title=%5BMER%5D+Mirror+Error+Report+for+%5BName%5D"
+  },
+  "document": {
+    "github": "https://github.com/nju-lug/NJU-Mirror-Configs/issues/new?assignees=&labels=documentation&template=mirror-doc-error-report.md&title=%5BMDR%5D+Mirror+Doc+Error+Report+for+%5BRepo+Name%5D",
+    "mail": "mailto:git+nju-lug-nju-mirror-configs-4009-yj7mew73nctozbsgnpupb3zn-issue@yaoge123.cn",
+    "gitlab": "https://git.nju.edu.cn/nju-lug/NJU-Mirror-Configs/-/issues"
+  },
+  "frontend": {
+    "github": "https://github.com/nju-lug/Mira/issues/new?assignees=yaoge123&labels=bug&template=mirror-front-error-report.md&title=%5BMFR%5D+Mirror+Front+End+Error+Report",
+    "mail": "mailto:[email protected]",
+    "gitlab": "https://git.nju.edu.cn/nju-lug/mira/-/issues"
+  },
+  "other": {
+    "github": "https://github.com/nju-lug/NJU-Mirror-Issue/issues/new?assignees=yaoge123&labels=question&template=other-usage-issues.md&title=%5BNOI%5D+New+Mirror+Other+Issue+for+%5BRepo+Name%5D"
+  }
+}
diff --git a/src/assets/shamiko-alt.jpg b/src/assets/shamiko-alt.jpg
diff --git a/src/assets/shamiko.jpg b/src/assets/shamiko.jpg
diff --git a/src/components/DownloadTile.vue b/src/components/DownloadTile.vue
@@ -11,21 +11,23 @@ const props = defineProps<{
 }>();
 
 const { title, description, url } = reactive(props.item);
-
-const download = () => window.open(url);
 </script>
 
 <template>
-  <div class="download-tile">
-    <NCard @click="download()" size="small" :title="title" embedded hoverable>
+  <a class="download-tile" :href="url" target="_blank">
+    <NCard size="small" :title="title" embedded hoverable>
       {{ description }}
     </NCard>
-  </div>
+  </a>
 </template>
 
 <style scoped lang="less">
 .download-tile {
+  display: block;
   padding-bottom: 10px;
   break-inside: avoid;
+  user-select: none;
+  cursor: default;
+  text-decoration: none;
 }
 </style>
diff --git a/src/components/FeedbackButton.vue b/src/components/FeedbackButton.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {
+  NButton,
+  NSelect,
+  NDivider,
+  NH3,
+  NButtonGroup,
+  NModal,
+  useMessage
+} from 'naive-ui';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import reports from '@/assets/report.json';
+
+import { useMutableRef } from '@/hooks';
+import NamedIcon from './NamedIcon.vue';
+
+const { t } = useI18n();
+const message = useMessage();
+const [show, setShow] = useMutableRef(false);
+const [selected, setSelected] = useMutableRef<string | null>(null);
+
+type RequestKey = keyof typeof reports;
+
+const options = computed(() => {
+  const options = [];
+  for (const key in reports) {
+    const value = reports[key as RequestKey];
+    console.log(key, value);
+    options.push({ label: t(`report.${key}`), value: key });
+  }
+  return options;
+});
+
+const selectedValue = computed(
+  () => selected.value && reports[selected.value as RequestKey]
+);
+
+const onLinkClicked = (url: string) => {
+  window.open(url);
+  setShow(false);
+  setSelected(null);
+  message.info(`${t('report.prompt.done')} ❤`);
+};
+</script>
+
+<template>
+  <NButton text @click="setShow(true)">
+    <template #icon>
+      <NamedIcon name="bug" :size="16" />
+    </template>
+    {{ t('footer.bug') }}
+  </NButton>
+  <NModal
+    style="width: min(600px, 90%)"
+    preset="card"
+    size="huge"
+    :bordered="true"
+    :title="t('report.title')"
+    v-model:show="show"
+    aria-modal
+  >
+    <NH3 prefix="line">step.1 {{ t('report.prompt.type') }}</NH3>
+    <NSelect
+      :options="options"
+      v-model:value="selected"
+      :placeholder="t('report.prompt.type')"
+    />
+    <div v-if="selectedValue">
+      <NDivider />
+      <NH3 prefix="line">step.2 {{ t('report.prompt.link') }}</NH3>
+      <NButtonGroup>
+        <NButton
+          v-for="(url, name) in selectedValue"
+          :key="name"
+          @click="onLinkClicked(url)"
+        >
+          <template #icon>
+            <NamedIcon :name="name" :size="16" />
+          </template>
+          {{ t(`report.${name}`) }}
+        </NButton>
+      </NButtonGroup>
+    </div>
+  </NModal>
+</template>
diff --git a/src/components/MarkdownContainer.vue b/src/components/MarkdownContainer.vue
@@ -14,7 +14,9 @@ const theme = computed(() =>
 
 const CustomSelect = defineCustomElement(CustomSelectCe);
 
-customElements.define('mira-select', CustomSelect);
+if (customElements.get('mira-select') == undefined) {
+  customElements.define('mira-select', CustomSelect);
+}
 </script>
 
 <template>

diff --git a/src/components/NamedIcon.vue b/src/components/NamedIcon.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { VNode } from 'vue';
+import { VNode, computed } from 'vue';
 import {
   MaleOutline,
   SchoolOutline,
@@ -11,27 +11,37 @@ import {
   DocumentTextOutline,
   SpeedometerOutline,
   DesktopOutline,
-  ArrowForwardCircleOutline
+  ArrowForwardCircleOutline,
+  LogoGithub,
+  MailOutline,
+  CodeOutline,
+  BugOutline,
+  HelpCircleOutline
 } from '@vicons/ionicons5';
 import { NIcon } from 'naive-ui';
 
-const icons: Record<string, VNode> = {
-  male: <MaleOutline />,
-  school: <SchoolOutline />,
-  upload: <CloudUploadOutline />,
-  chart: <BarChartOutline />,
-  server: <ServerOutline />,
-  repo: <CodeSlashOutline />,
-  gitlab: <LogoGitlab />,
-  doc: <DocumentTextOutline />,
-  speedometer: <SpeedometerOutline />,
-  monitor: <DesktopOutline />,
-  unknown: <ArrowForwardCircleOutline />
+const icons: Record<string, () => VNode> = {
+  male: () => <MaleOutline />,
+  school: () => <SchoolOutline />,
+  upload: () => <CloudUploadOutline />,
+  chart: () => <BarChartOutline />,
+  server: () => <ServerOutline />,
+  repo: () => <CodeSlashOutline />,
+  github: () => <LogoGithub />,
+  gitlab: () => <LogoGitlab />,
+  mail: () => <MailOutline />,
+  doc: () => <DocumentTextOutline />,
+  speedometer: () => <SpeedometerOutline />,
+  monitor: () => <DesktopOutline />,
+  code: () => <CodeOutline />,
+  bug: () => <BugOutline />,
+  unknown: () => <ArrowForwardCircleOutline />,
+  fallback: () => <HelpCircleOutline />
 };
 
 const props = defineProps<{ name: string; size: number }>();
 
-const MyIcon = () => icons[props.name] || <ArrowForwardCircleOutline />;
+const MyIcon = computed(() => icons[props.name] ?? icons.unknown);
 </script>
 
 <template>

diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
@@ -1,32 +1,10 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import {
-  NH2,
-  NP,
-  NSpace,
-  NDropdown,
-  NButton,
-  NButtonGroup,
-  NIcon,
-  MenuOption
-} from 'naive-ui';
-import { BugOutline, CodeOutline, MaleOutline } from '@vicons/ionicons5';
+import { NH2, NP, NSpace, NButton, NButtonGroup } from 'naive-ui';
+import FeedbackButton from '@/components/FeedbackButton.vue';
+import NamedIcon from '@/components/NamedIcon.vue';
 
 const { t } = useI18n();
-const reports = [
-  {
-    label: 'Via Mail',
-    key: 'mailto:[email protected]'
-  },
-  {
-    label: 'Via GitHub',
-    key: 'https://github.com/iori2333/NJU-Mirror-Frontend/issues'
-  },
-  {
-    label: 'Via NJU Git',
-    key: 'https://git.nju.edu.cn/nju-lug/'
-  }
-] as MenuOption[];
 
 function handleSelect(key: string) {
   window.open(key);
@@ -46,34 +24,16 @@ function handleSelect(key: string) {
       <NP class="footer-text">{{ t('footer.special') }}</NP>
     </div>
     <NButtonGroup vertical>
-      <NDropdown
-        trigger="click"
-        @select="handleSelect"
-        placement="left-start"
-        :options="reports"
-      >
-        <NButton text>
-          <template #icon>
-            <NIcon size="16">
-              <BugOutline />
-            </NIcon>
-          </template>
-          {{ t('footer.bug') }}
-        </NButton>
-      </NDropdown>
+      <FeedbackButton />
       <NButton text @click="handleSelect('https://github.com/iori2333/Mira')">
         <template #icon>
-          <NIcon size="16">
-            <CodeOutline />
-          </NIcon>
+          <NamedIcon name="code" :size="16" />
         </template>
         {{ t('footer.source') }}
       </NButton>
       <NButton text @click="handleSelect('https://git.nju.edu.cn/nju-lug')">
         <template #icon>
-          <NIcon size="16">
-            <MaleOutline />
-          </NIcon>
+          <NamedIcon name="male" :size="16" />
         </template>
         {{ t('footer.lug') }}
       </NButton>

diff --git a/src/components/SidePanel.vue b/src/components/SidePanel.vue
@@ -46,18 +46,24 @@ async function handleClick(link: NewsEntry) {
     <NTabs type="segment" size="small" pane-class="tab-pane">
       <NTabPane name="Mirror">
         <NRow v-for="link in news" :key="link.content">
-          <NButton text tag="a" @click="handleClick(link)">{{
-            convertTimestamp(link.time, locale as 'zh' | 'en') +
-            ' - ' +
-            link.name
-          }}</NButton>
+          <NButton text tag="a" @click="handleClick(link)">
+            <span class="link-title">
+              {{
+                convertTimestamp(link.time, locale as 'zh' | 'en') +
+                ' - ' +
+                link.name
+              }}
+            </span>
+          </NButton>
         </NRow>
       </NTabPane>
       <NTabPane name="LUG Jokes">
         <NRow v-for="link in jokes" :key="link.title">
-          <NButton text tag="a" :href="link.web_url" target="_blank">{{
-            link.title
-          }}</NButton>
+          <NButton text tag="a" :href="link.web_url" target="_blank">
+            <span class="link-title">
+              {{ link.title }}
+            </span>
+          </NButton>
         </NRow>
       </NTabPane>
     </NTabs>
@@ -67,7 +73,7 @@ async function handleClick(link: NewsEntry) {
     preset="card"
     size="huge"
     :bordered="true"
-    :title="selected?.name || 'Null'"
+    :title="selected?.name"
     v-model:show="show"
   >
     <MarkdownContainer :content="content" />
@@ -80,6 +86,10 @@ async function handleClick(link: NewsEntry) {
 }
 
 a.n-button {
+  max-width: 100%;
+}
+
+span.link-title {
   overflow: hidden;
   max-width: 100%;
   text-overflow: ellipsis;