feat: 站点个性化设置

packages/ui/certd-client/src/layout/components/menu/index.tsx

@@ -101,6 +101,11 @@ export default defineComponent({
         return slots;
       }
       for (const sub of children) {
+        if (sub.meta?.show != null) {
+          if (sub.meta.show === false || (typeof sub.meta.show === "function" && !sub.meta.show())) {
+            continue;
+          }
+        }
         const title: any = () => {
           if (sub?.meta?.icon) {
             // @ts-ignore

packages/ui/certd-client/src/layout/layout-framework.vue

@@ -2,8 +2,8 @@
   <a-layout class="fs-framework">
     <a-layout-sider v-model:collapsed="asideCollapsed" :trigger="null" collapsible>
       <div class="header-logo">
-        <img src="/static/images/logo/logo.svg" />
-        <span v-if="!asideCollapsed" class="title">Certd</span>
+        <img :src="siteInfo.logo" />
+        <span v-if="!asideCollapsed" class="title">{{ siteInfo.title }}</span>
       </div>
       <div class="aside-menu">
         <fs-menu :scroll="true" :menus="asideMenus" :expand-selected="!asideCollapsed" />
@@ -61,7 +61,18 @@
       <a-layout-footer class="fs-framework-footer">
         <div>
           <span>Powered by</span>
-          <a href="https://certd.handsfree.work"> handsfree.work </a>
+          <a> handsfree.work </a>
+          <template v-if="siteInfo.icpNo">
+            <a-divider type="vertical" />
+            <span>
+              <a href="https://beian.miit.gov.cn/" target="_blank">{{ siteInfo.icpNo }}</a>
+            </span>
+          </template>
+
+          <template v-if="siteInfo.licenseTo">
+            <a-divider type="vertical" />
+            <a :href="siteInfo.licenseToUrl || ''">{{ siteInfo.licenseTo }}</a>
+          </template>
         </div>
         <div>v{{ version }}</div>
 
@@ -71,11 +82,10 @@
   </a-layout>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { computed, onErrorCaptured, ref } from "vue";
 import FsMenu from "./components/menu/index.jsx";
 import FsLocale from "./components/locale/index.vue";
-import FsSourceLink from "./components/source-link/index.vue";
 import FsUserInfo from "./components/user-info/index.vue";
 import FsTabs from "./components/tabs/index.vue";
 import { useResourceStore } from "../store/modules/resource";
@@ -83,69 +93,46 @@ import { usePageStore } from "/@/store/modules/page";
 import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
 import FsThemeSet from "/@/layout/components/theme/index.vue";
 import { env } from "../utils/util.env";
-import FsThemeModeSet from "./components/theme/mode-set.vue";
 import VipButton from "/@/components/vip-button/index.vue";
 import TutorialButton from "/@/components/tutorial/index.vue";
 import { useUserStore } from "/@/store/modules/user";
-export default {
-  name: "LayoutFramework",
-  // eslint-disable-next-line vue/no-unused-components
-  components: {
-    TutorialButton,
-    FsThemeSet,
-    MenuFoldOutlined,
-    MenuUnfoldOutlined,
-    FsMenu,
-    FsLocale,
-    FsSourceLink,
-    FsUserInfo,
-    FsTabs,
-    FsThemeModeSet,
-    VipButton
-  },
-  setup() {
-    const resourceStore = useResourceStore();
-    const frameworkMenus = computed(() => {
-      return resourceStore.getFrameworkMenus;
-    });
-    const headerMenus = computed(() => {
-      return resourceStore.getHeaderMenus;
-    });
-    const asideMenus = computed(() => {
-      return resourceStore.getAsideMenus;
-    });
+import { useSettingStore } from "/@/store/modules/settings";
 
-    const pageStore = usePageStore();
-    const keepAlive = pageStore.keepAlive;
+const resourceStore = useResourceStore();
+const frameworkMenus = computed(() => {
+  return resourceStore.getFrameworkMenus;
+});
+const headerMenus = computed(() => {
+  return resourceStore.getHeaderMenus;
+});
+const asideMenus = computed(() => {
+  return resourceStore.getAsideMenus;
+});
 
-    const asideCollapsed = ref(false);
-    function asideCollapsedToggle() {
-      asideCollapsed.value = !asideCollapsed.value;
-    }
-    onErrorCaptured((e) => {
-      console.error("ErrorCaptured:", e);
-      // notification.error({ message: e.message });
-      //阻止错误向上传递
-      return false;
-    });
-    const version = ref(import.meta.env.VITE_APP_VERSION);
+const pageStore = usePageStore();
+const keepAlive = pageStore.keepAlive;
 
-    const envRef = ref(env);
+const asideCollapsed = ref(false);
+function asideCollapsedToggle() {
+  asideCollapsed.value = !asideCollapsed.value;
+}
+onErrorCaptured((e) => {
+  console.error("ErrorCaptured:", e);
+  // notification.error({ message: e.message });
+  //阻止错误向上传递
+  return false;
+});
+const version = ref(import.meta.env.VITE_APP_VERSION);
 
-    const userStore = useUserStore();
-    return {
-      userStore,
-      version,
-      frameworkMenus,
-      headerMenus,
-      asideMenus,
-      keepAlive,
-      asideCollapsed,
-      asideCollapsedToggle,
-      envRef
-    };
-  }
-};
+const envRef = ref(env);
+
+const userStore = useUserStore();
+
+const settingStore = useSettingStore();
+
+const siteInfo = computed(() => {
+  return settingStore.siteInfo;
+});
 </script>
 <style lang="less">
 @import "../style/theme/index.less";

packages/ui/certd-client/src/layout/layout-outside.vue

@@ -1,13 +1,13 @@
 <template>
   <div id="userLayout" :class="['user-layout-wrapper']">
     <div class="login-container flex-center">
-      <div class="user-layout-content">
+      <div class="user-layout-content flex-center flex-col">
         <div class="top flex flex-col items-center justify-center">
           <div class="header flex flex-row items-center">
-            <img src="/static/images/logo/rect-black.svg" class="logo" alt="logo" />
+            <img :src="logoRef" class="logo" alt="logo" />
             <span class="title"></span>
           </div>
-          <div class="desc"></div>
+          <div class="desc">{{ sloganRef }}</div>
         </div>
 
         <router-view />
@@ -25,8 +25,13 @@
             <span>
               <a :href="envRef.COPYRIGHT_URL" target="_blank">{{ envRef.COPYRIGHT_NAME }}</a>
             </span>
-            <span v-if="envRef.ICP_NO">
-              <a href="https://beian.miit.gov.cn/" target="_blank">{{ envRef.ICP_NO }}</a>
+            <span v-if="siteInfo.icpNo">
+              <a-divider type="vertical" />
+              <a href="https://beian.miit.gov.cn/" target="_blank">{{ siteInfo.icpNo }}</a>
+            </span>
+            <span v-if="siteInfo.licenseTo">
+              <a-divider type="vertical" />
+              <a :href="siteInfo.licenseToUrl" target="_blank">{{ siteInfo.licenseTo }}</a>
             </span>
           </div>
         </div>
@@ -34,19 +39,16 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { env } from "/@/utils/util.env";
-import { ref } from "vue";
+import { computed, ref, Ref } from "vue";
+import { SiteInfo, useSettingStore } from "/@/store/modules/settings";
 
-export default {
-  name: "LayoutOutside",
-  setup() {
-    const envRef = ref(env);
-    return {
-      envRef
-    };
-  }
-};
+const envRef = ref(env);
+const settingStore = useSettingStore();
+const siteInfo: Ref<SiteInfo> = computed(() => {
+  return settingStore.siteInfo;
+});
 </script>
 
 <style lang="less" scoped>
@@ -70,24 +72,6 @@ export default {
     //padding: 50px 0 84px;
     position: relative;
 
-    .user-layout-lang {
-      width: 100%;
-      height: 40px;
-      line-height: 44px;
-      text-align: right;
-
-      .select-lang-trigger {
-        cursor: pointer;
-        padding: 12px;
-        margin-right: 24px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 18px;
-        vertical-align: middle;
-      }
-    }
-
     .user-layout-content {
       padding: 32px 0 24px;
 
@@ -98,8 +82,8 @@ export default {
         align-items: center;
         justify-content: center;
         .header {
-          height: 44px;
-          line-height: 44px;
+          height: 70px;
+          line-height: 70px;
 
           .badge {
             position: absolute;
@@ -112,9 +96,8 @@ export default {
           }
 
           .logo {
-            height: 80px;
+            height: 100%;
             vertical-align: top;
-            margin-right: 16px;
             border-style: none;
           }