添加关于页面 & 页脚

src/App.vue

@@ -24,35 +24,109 @@
       class="drawer-transition"
       :width="drawerWidth"
     >
-      <v-list-item class="pa-4">
-        <v-list-item-title class="text-h6 text-primary">
-          {{ locale === 'zh' ? '计算工具' : 'Calculator' }}
-        </v-list-item-title>
-        <v-list-item-subtitle>
-          {{ locale === 'zh' ? '纸管计算辅助工具' : 'Paper Tube Calculator' }}
-        </v-list-item-subtitle>
-      </v-list-item>
 
-      <v-divider />
-
-      <v-list density="compact">
-        <v-list-item
-          v-for="(item, index) in menuItems"
-          :key="index"
-          :active="selectedIndex === index"
-          class="ma-1"
-          :color="selectedIndex === index ? 'primary' : undefined"
-          rounded="lg"
-          @click="handleSelect(index)"
-        >
-          <v-list-item-title class="text-body-2">
-            {{ item.title }}
+      <div class="fill-height d-flex flex-column">
+        <v-list-item class="pa-4">
+          <v-list-item-title class="text-h6 text-primary">
+            {{ $t('calculator') }}
           </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ $t('appTitle') }}
+          </v-list-item-subtitle>
         </v-list-item>
-      </v-list>
+
+        <v-divider />
+
+        <v-list class="flex-grow-1" density="compact">
+          <v-list-item
+            v-for="(item, index) in menuItems"
+            :key="index"
+            :active="selectedIndex === index"
+            class="ma-1"
+            :color="selectedIndex === index ? 'primary' : undefined"
+            rounded="lg"
+            @click="handleSelect(index)"
+          >
+            <v-list-item-title class="text-body-2">
+              {{ item.title }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+
+        <v-divider />
+
+        <div class="pa3">
+          <v-btn
+            block
+            class="mb-2"
+            prepend-icon="mdi-information-outline"
+            variant="text"
+            @click="showAboutDialog = true"
+          >
+            {{ $t('about') }}
+          </v-btn>
+        </div>
+
+      </div>
 
     </v-navigation-drawer>
 
+    <v-dialog
+      v-model="showAboutDialog"
+      max-width="500px"
+    >
+      <v-card
+        class="mx-auto"
+        prepend-icon="mdi-information-outline"
+      >
+        <template #title>
+          <v-card-title class="text-h5">
+            {{ appInfo.appName }}
+          </v-card-title>
+        </template>
+
+        <template #subtitle>
+          <div class="text-caption text-secondary">
+            {{ appInfo.version }}
+            {{ appInfo.copyright }}
+          </div>
+        </template>
+
+        <template #text>
+          <v-card-text>
+            <div>
+              {{ appInfo.description }}
+            </div>
+          </v-card-text>
+
+          <div class="mb-3">
+            {{ $t('officialWebsite') }}:
+            <v-btn
+              color="primary"
+              :href="appInfo.officialWebsite"
+              prepend-icon="mdi-web"
+              rel="noopener noreferrer"
+              size="small"
+              target="_blank"
+              variant="text"
+            >
+              {{ appInfo.officialWebsite }}
+            </v-btn>
+          </div></template>
+
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="primary"
+            variant="text"
+            @click="showAboutDialog = false"
+          >
+            {{ $t('close') }}
+          </v-btn>
+        </v-card-actions>
+
+      </v-card></v-dialog>
+
     <v-main>
       <v-container
         class="pa-6"
@@ -62,6 +136,18 @@
         <component :is="currentComponent" :key="selectedIndex" />
       </v-fade-transition>
     </v-main>
+
+    <!-- 页脚 -->
+    <v-footer app class="pa-4 bg-grey-lighten-5">
+      <div class="d-flex justify-space-between align-center w-100">
+        <div class="text-caption text-disabled">
+          &copy; {{ new Date().getFullYear() }} {{ appInfo.author }} - {{ $t('allRightsReserved') }}
+        </div>
+        <div class="text-caption text-disabled">
+          v{{ appInfo.version }}
+        </div>
+      </div>
+    </v-footer>
   </v-app>
 
 </template>
@@ -83,6 +169,20 @@
   const selectedIndex = ref(0)
   const windowWidth = ref(typeof window === 'undefined' ? 1200 : window.innerWidth)
 
+  const showAboutDialog = ref(false)
+
+  // 应用信息
+  const appInfo = computed(() => {
+    return {
+      appName: t('appTitle'),
+      version: '1.0.0',
+      author: t('companyName'),
+      description: t('appDescription'),
+      copyright: `© ${new Date().getFullYear()} ${t('companyName')}. ${t('allRightsReserved')}`,
+      officialWebsite: 'http://www.jinshen.cn',
+    }
+  })
+
   // 动态设置网页标题
   const pageTitle = computed(() => {
     return t('appTitle')