feat: add copyright components to enable preferences to configure copyright more accurately

packages/@core/forward/preferences/src/config.ts

@@ -9,7 +9,6 @@ const defaultPreferences: Preferences = {
     colorWeakMode: false,
     compact: false,
     contentCompact: 'wide',
-    copyright: 'Copyright © 2024 Vben Admin Pro',
     defaultAvatar:
       'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/avatar-v1.webp',
     dynamicTitle: true,
@@ -27,6 +26,14 @@ const defaultPreferences: Preferences = {
     showIcon: true,
     styleType: 'normal',
   },
+  copyright: {
+    companyName: 'Vben Admin Pro',
+    companySiteLink: 'https://www.vben.pro',
+    date: '2024',
+    enable: true,
+    icp: '',
+    icpLink: '',
+  },
   footer: {
     enable: true,
     fixed: false,

packages/@core/forward/preferences/src/types.ts

@@ -32,8 +32,6 @@ interface AppPreferences {
   compact: boolean;
   /** 是否开启内容紧凑模式 */
   contentCompact: ContentCompactType;
-  /** 页脚Copyright */
-  copyright: string;
   // /** 应用默认头像 */
   defaultAvatar: string;
   // /** 开启动态标题 */
@@ -65,6 +63,21 @@ interface BreadcrumbPreferences {
   styleType: BreadcrumbStyleType;
 }
 
+interface CopyrightPreferences {
+  /** 版权公司名 */
+  companyName: string;
+  /** 版权公司名链接 */
+  companySiteLink: string;
+  /** 版权日期 */
+  date: string;
+  /** 版权是否可见 */
+  enable: boolean;
+  /** 备案号 */
+  icp: string;
+  /** 备案号链接 */
+  icpLink: string;
+}
+
 interface FooterPreferences {
   /** 底栏是否可见 */
   enable: boolean;
@@ -167,6 +180,8 @@ interface Preferences {
   app: AppPreferences;
   /** 顶栏配置 */
   breadcrumb: BreadcrumbPreferences;
+  /** 版权配置 */
+  copyright: CopyrightPreferences;
   /** 底栏配置 */
   footer: FooterPreferences;
   /** 面包屑配置 */

packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue

@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
     <VbenButton
       v-if="visible"
       :style="backTopStyle"
-      class="bg-accent hover:bg-heavy data fixed bottom-10 right-5 z-10 h-10 w-10 rounded-full"
+      class="bg-accent hover:bg-heavy data fixed bottom-10 right-5 z-[1000] h-10 w-10 rounded-full"
       size="icon"
       variant="icon"
       @click="handleClick"

packages/business/layouts/src/authentication/from-view.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { preferences } from '@vben-core/preferences';
 
+import { Copyright } from '../basic/copyright';
 import Toolbar from './toolbar.vue';
 
 defineOptions({
@@ -28,7 +29,10 @@ defineOptions({
     <div
       class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
     >
-      {{ preferences.app.copyright }}
+      <Copyright
+        v-if="preferences.copyright.enable"
+        v-bind="preferences.copyright"
+      />
     </div>
   </div>
 </template>

packages/business/layouts/src/basic/copyright/copyright.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+interface Props {
+  companyName: string;
+  companySiteLink?: string;
+  date: string;
+  icp?: string;
+  icpLink?: string;
+}
+
+defineOptions({
+  name: 'Copyright',
+});
+
+withDefaults(defineProps<Props>(), {
+  companyName: 'Vben Admin Pro',
+  companySiteLink: '',
+  date: '2024',
+  icp: '',
+  icpLink: '',
+});
+</script>
+
+<template>
+  <div class="text-md flex-center">
+    <a
+      v-if="icp"
+      :href="icpLink || 'javascript:void 0'"
+      class="hover:text-primary-hover"
+      target="_blank"
+    >
+      {{ icp }}
+    </a>
+
+    Copyright © {{ date }}
+    <a
+      v-if="companyName"
+      :href="companySiteLink || 'javascript:void 0'"
+      class="hover:text-primary-hover mx-1"
+      target="_blank"
+    >
+      {{ companyName }}
+    </a>
+  </div>
+</template>

packages/business/layouts/src/basic/copyright/index.ts

@@ -0,0 +1 @@
+export { default as Copyright } from './copyright.vue';

packages/business/layouts/src/basic/layout.vue

@@ -14,6 +14,7 @@ import { mapTree } from '@vben-core/toolkit';
 import { MenuRecordRaw } from '@vben-core/typings';
 
 import { LayoutContent } from './content';
+import { Copyright } from './copyright';
 import { LayoutFooter } from './footer';
 import { LayoutHeader } from './header';
 import {
@@ -267,8 +268,11 @@ function clearPreferencesAndLogout() {
     </template>
     <!-- 页脚 -->
     <template v-if="preferences.footer.enable" #footer>
-      <LayoutFooter v-if="preferences.app.copyright">
+      <LayoutFooter>
-        {{ preferences.app.copyright }}
+        <Copyright
+          v-if="preferences.copyright.enable"
+          v-bind="preferences.copyright"
+        />
       </LayoutFooter>
     </template>
   </VbenAdminLayout>

packages/business/widgets/src/preferences/blocks/index.ts

@@ -3,6 +3,7 @@ export { default as Animation } from './general/animation.vue';
 export { default as General } from './general/general.vue';
 export { default as Breadcrumb } from './layout/breadcrumb.vue';
 export { default as Content } from './layout/content.vue';
+export { default as Copyright } from './layout/copyright.vue';
 export { default as Footer } from './layout/footer.vue';
 export { default as Header } from './layout/header.vue';
 export { default as Layout } from './layout/layout.vue';

packages/business/widgets/src/preferences/blocks/layout/copyright.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+const copyrightEnable = defineModel<boolean>('copyrightEnable');
+</script>
+
+<template>
+  <SwitchItem v-model="copyrightEnable">
+    {{ $t('preferences.copyright.enable') }}
+  </SwitchItem>
+</template>

packages/business/widgets/src/preferences/preferences-widget.vue

@@ -19,6 +19,7 @@ import Preferences from './preferences.vue';
     :breadcrumb-show-home="preferences.breadcrumb.showHome"
     :breadcrumb-show-icon="preferences.breadcrumb.showIcon"
     :breadcrumb-style-type="preferences.breadcrumb.styleType"
+    :copyright-enable="preferences.copyright.enable"
     :footer-enable="preferences.footer.enable"
     :footer-fixed="preferences.footer.fixed"
     :header-enable="preferences.header.enable"
@@ -85,6 +86,9 @@ import Preferences from './preferences.vue';
     @update:breadcrumb-style-type="
       (val) => updatePreferences({ breadcrumb: { styleType: val } })
     "
+    @update:copyright-enable="
+      (val) => updatePreferences({ copyright: { enable: val } })
+    "
     @update:footer-enable="
       (val) => updatePreferences({ footer: { enable: val } })
     "

packages/business/widgets/src/preferences/preferences.vue

@@ -40,6 +40,7 @@ import {
   BuiltinTheme,
   ColorMode,
   Content,
+  Copyright,
   Footer,
   General,
   GlobalShortcutKeys,
@@ -106,6 +107,8 @@ const navigationAccordion = defineModel<boolean>('navigationAccordion');
 const footerEnable = defineModel<boolean>('footerEnable');
 const footerFixed = defineModel<boolean>('footerFixed');
 
+const copyrightEnable = defineModel<boolean>('copyrightEnable');
+
 const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
 const shortcutKeysGlobalSearch = defineModel<boolean>(
   'shortcutKeysGlobalSearch',
@@ -321,6 +324,9 @@ async function handleReset() {
                 v-model:footer-fixed="footerFixed"
               />
             </Block>
+            <Block :title="$t('preferences.copyright.title')">
+              <Copyright v-model:copyright-enable="copyrightEnable" />
+            </Block>
           </template>
 
           <template #shortcutKey>

packages/locales/src/langs/en-US.yaml

@@ -244,6 +244,9 @@ preferences:
     title: Footer
     visible: Fixed at the bottom
     fixed: Display Footer
+  copyright:
+    title: Copyright
+    enable: Enable CopyRight
   shortcut-keys:
     title: Shortcut Keys
     global: Global

packages/locales/src/langs/zh-CN.yaml

@@ -175,7 +175,6 @@ preferences:
   language: 语言
   dynamic-title: 动态标题
   ai-assistant: Ai 助手
-
   tabbar:
     title: 标签栏
     enable: 启用标签栏
@@ -244,6 +243,9 @@ preferences:
     title: 底栏
     visible: 显示底栏
     fixed: 固定在底部
+  copyright:
+    title: 版权
+    enable: 启用版权
   shortcut-keys:
     title: 快捷键
     global: 全局