底部版权增加备案号设置

src/components/Copyright/index.vue

@@ -5,20 +5,29 @@ const settingsStore = useSettingsStore()
 
 <template>
     <footer class="copyright">
-        Copyright © {{ settingsStore.copyright.dates }}
-        <a v-if="settingsStore.copyright.website" :href="settingsStore.copyright.website" target="_blank" rel="noopener">{{ settingsStore.copyright.company }},</a>
-        <span v-else>{{ settingsStore.copyright.company }},</span>
-        All Rights Reserved
+        <span>Copyright</span>
+        <span class="icon">©</span>
+        <span v-if="settingsStore.copyright.dates">{{ settingsStore.copyright.dates }}</span>
+        <template v-if="settingsStore.copyright.company">
+            <a v-if="settingsStore.copyright.website" :href="settingsStore.copyright.website" target="_blank" rel="noopener">{{ settingsStore.copyright.company }}</a>
+            <span v-else>{{ settingsStore.copyright.company }}</span>
+        </template>
+        <a v-if="settingsStore.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.copyright.beian }}</a>
     </footer>
 </template>
 
 <style lang="scss" scoped>
 footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     margin: 40px 0 20px;
-    line-height: 20px;
-    text-align: center;
     color: var(--el-text-color-secondary);
     font-size: 14px;
+    span,
+    a {
+        padding: 0 5px;
+    }
     a {
         text-decoration: none;
         color: var(--el-text-color-secondary);
@@ -27,5 +36,9 @@ footer {
             color: var(--el-text-color-primary);
         }
     }
+    .icon {
+        padding: 0;
+        font-size: 18px;
+    }
 }
 </style>

src/layout/components/AppSetting/index.vue

@@ -181,6 +181,10 @@ function handleCopy() {
                 <div class="label">网址</div>
                 <el-input v-model="settings.copyright.website" size="small" :disabled="!settings.copyright.enable" />
             </div>
+            <div class="setting-item">
+                <div class="label">备案</div>
+                <el-input v-model="settings.copyright.beian" size="small" :disabled="!settings.copyright.enable" />
+            </div>
             <el-divider>控制台</el-divider>
             <div class="setting-item">
                 <div class="label">

src/settings.js

@@ -83,10 +83,11 @@ let globalSettings = {
     copyright: {
         // 是否开启，同时在路由 meta 对象里可以单独设置某个路由是否显示底部版权信息
         enable: true,
-        // 版权信息配置，格式为：Copyright © [dates] <company>, All Rights Reserved
+        // 版权信息配置，格式为：Copyright © [dates] <company> <beian>
         dates: '2020-2022',
         company: 'Fantastic-admin',
-        website: 'https://fantastic-admin.netlify.app'
+        website: 'https://fantastic-admin.netlify.app',
+        beian: ''
     }
 }