添加关于页面 & 页脚

.drone.yml

@@ -0,0 +1,10 @@
+kind: pipeline
+type: docker
+name: build-and-deploy
+
+steps: 
+  - name: install & build
+    image: oven/bun
+    commands:
+      - bun install
+      - bun run build

src/App.vue

@@ -24,18 +24,20 @@
       class="drawer-transition"
       :width="drawerWidth"
     >
+
+      <div class="fill-height d-flex flex-column">
         <v-list-item class="pa-4">
           <v-list-item-title class="text-h6 text-primary">
-          {{ locale === 'zh' ? '计算工具' : 'Calculator' }}
+            {{ $t('calculator') }}
           </v-list-item-title>
           <v-list-item-subtitle>
-          {{ locale === 'zh' ? '纸管计算辅助工具' : 'Paper Tube Calculator' }}
+            {{ $t('appTitle') }}
           </v-list-item-subtitle>
         </v-list-item>
 
         <v-divider />
 
-      <v-list density="compact">
+        <v-list class="flex-grow-1" density="compact">
           <v-list-item
             v-for="(item, index) in menuItems"
             :key="index"
@@ -51,8 +53,80 @@
           </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')

src/assets/logo.svg

@@ -1,6 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
-<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
-<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
-<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
-</svg>

src/components/AppFooter.vue

@@ -1,82 +0,0 @@
-<template>
-  <v-footer
-    app
-    height="40"
-  >
-    <a
-      v-for="item in items"
-      :key="item.title"
-      class="d-inline-block mx-2 social-link"
-      :href="item.href"
-      rel="noopener noreferrer"
-      target="_blank"
-      :title="item.title"
-    >
-      <v-icon
-        :icon="item.icon"
-        :size="item.icon === '$vuetify' ? 24 : 16"
-      />
-    </a>
-
-    <div
-      class="text-caption text-disabled"
-      style="position: absolute; right: 16px;"
-    >
-      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
-      —
-      <a
-        class="text-decoration-none on-surface"
-        href="https://vuetifyjs.com/about/licensing/"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        MIT License
-      </a>
-    </div>
-  </v-footer>
-</template>
-
-<script setup lang="ts">
-  const items = [
-    {
-      title: 'Vuetify Documentation',
-      icon: `$vuetify`,
-      href: 'https://vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Support',
-      icon: 'mdi-shield-star-outline',
-      href: 'https://support.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify X',
-      icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
-      href: 'https://x.com/vuetifyjs',
-    },
-    {
-      title: 'Vuetify GitHub',
-      icon: `mdi-github`,
-      href: 'https://github.com/vuetifyjs/vuetify',
-    },
-    {
-      title: 'Vuetify Discord',
-      icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
-      href: 'https://community.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Reddit',
-      icon: `mdi-reddit`,
-      href: 'https://reddit.com/r/vuetifyjs',
-    },
-  ]
-</script>
-
-<style scoped lang="sass">
-  .social-link :deep(.v-icon)
-    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
-    text-decoration: none
-    transition: .2s ease-in-out
-
-    &:hover
-      color: rgba(25, 118, 210, 1)
-</style>

src/components/HelloWorld.vue

@@ -1,90 +0,0 @@
-<template>
-  <v-container class="fill-height" max-width="900">
-    <div>
-      <v-img
-        class="mb-4"
-        height="150"
-        src="@/assets/logo.png"
-      />
-
-      <div class="mb-8 text-center">
-        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
-      </div>
-
-      <v-row>
-        <v-col cols="12">
-          <v-card
-            class="py-4"
-            color="surface-variant"
-            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
-            prepend-icon="mdi-rocket-launch-outline"
-            rounded="lg"
-            variant="tonal"
-          >
-            <template #image>
-              <v-img position="top right" />
-            </template>
-
-            <template #title>
-              <h2 class="text-h5 font-weight-bold">
-                Get started
-              </h2>
-            </template>
-
-            <template #subtitle>
-              <div class="text-subtitle-1">
-                Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
-              </div>
-            </template>
-          </v-card>
-        </v-col>
-
-        <v-col v-for="link in links" :key="link.href" cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            :href="link.href"
-            :prepend-icon="link.icon"
-            rel="noopener noreferrer"
-            rounded="lg"
-            :subtitle="link.subtitle"
-            target="_blank"
-            :title="link.title"
-            variant="tonal"
-          />
-        </v-col>
-      </v-row>
-    </div>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-  const links = [
-    {
-      href: 'https://vuetifyjs.com/',
-      icon: 'mdi-text-box-outline',
-      subtitle: 'Learn about all things Vuetify in our documentation.',
-      title: 'Documentation',
-    },
-    {
-      href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
-      icon: 'mdi-star-circle-outline',
-      subtitle: 'Explore available framework Features.',
-      title: 'Features',
-    },
-    {
-      href: 'https://vuetifyjs.com/components/all',
-      icon: 'mdi-widgets-outline',
-      subtitle: 'Discover components in the API Explorer.',
-      title: 'Components',
-    },
-    {
-      href: 'https://discord.vuetifyjs.com',
-      icon: 'mdi-account-group-outline',
-      subtitle: 'Connect with Vuetify developers.',
-      title: 'Community',
-    },
-  ]
-</script>

src/locale/en.json

@@ -62,5 +62,12 @@
   "calculatedValue": "Calculated value",
   "fit": "FIT",
   "notFit": "NOT FIT",
-  "multiLayerExcelOutputFile": "MultiLayerPaperTapeWidthAngle"
+  "multiLayerExcelOutputFile": "MultiLayerPaperTapeWidthAngle",
+  "about": "About",
+  "calculator": "Calculator",
+  "companyName": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd.",
+  "appDescription": "Paper tube production auxiliary production tool provides calculation of various parameters such as weight, size, angle, etc.",
+  "allRightsReserved": "All Rights Reserved",
+  "close": "Close",
+  "officialWebsite": "Official website"
 }

src/locale/zh.json

@@ -62,5 +62,12 @@
   "calculatedValue": "计算值",
   "fit": "符合",
   "notFit": "不符合",
-  "multiLayerExcelOutputFile": "多层纸带宽度角度计算"
+  "multiLayerExcelOutputFile": "多层纸带宽度角度计算",
+  "about": "关于",
+  "calculator": "计算工具",
+  "companyName": "浙江金申机械制造有限公司",
+  "appDescription": "纸管制作辅助生产工具，提供纸管重量、尺寸、角度等多种参数的计算。",
+  "allRightsReserved": "版权所有",
+  "close": "关闭",
+  "officialWebsite": "官方网站"
 }

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

vite.config.mts

@@ -96,4 +96,5 @@ export default defineConfig({
       },
     },
   },
+  base: process.env.NODE_ENV === 'production' ? '/calculator/' : '/',
 })