refactor(projects): 登录模块由query变更为动态路由params

src/views/component/button/index.vue

@@ -2,8 +2,8 @@
   <div>
     <n-card title="按钮" class="h-full shadow-sm rounded-16px">
       <n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
-        <n-grid-item v-for="item in buttonExample" :key="item.id" class="h-180px">
-          <n-card :title="item.label" class="h-full">
+        <n-grid-item v-for="item in buttonExample" :key="item.id">
+          <n-card :title="item.label" class="min-h-180px">
             <p v-if="item.desc" class="pb-16px">{{ item.desc }}</p>
             <n-space>
               <n-button

src/views/system/login/index.vue

@@ -9,10 +9,8 @@
           <n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
         </header>
         <main class="pt-24px">
-          <div v-for="item in modules" v-show="module === item.key" :key="item.key">
-            <h3 class="text-18px text-primary font-medium">{{ item.label }}</h3>
-            <component :is="item.component" />
-          </div>
+          <h3 class="text-18px text-primary font-medium">{{ activeModule.label }}</h3>
+          <component :is="activeModule.component" />
         </main>
       </div>
     </n-card>
@@ -34,7 +32,7 @@ import { useThemeStore } from '@/store';
 
 interface Props {
   /** 登录模块分类 */
-  module?: LoginModuleType;
+  module: LoginModuleType;
 }
 
 interface LoginModule {
@@ -43,9 +41,7 @@ interface LoginModule {
   component: Component;
 }
 
-withDefaults(defineProps<Props>(), {
-  module: 'pwd-login'
-});
+const props = defineProps<Props>();
 
 const theme = useThemeStore();
 const title = useAppTitle();
@@ -58,6 +54,15 @@ const modules: LoginModule[] = [
   { key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat }
 ];
 
+const activeModule = computed(() => {
+  const active: LoginModule = { ...modules[0] };
+  const findItem = modules.find(item => item.key === props.module);
+  if (findItem) {
+    Object.assign(active, findItem);
+  }
+  return active;
+});
+
 const bgColor = computed(() => {
   const COLOR_WHITE = '#ffffff';
   const ratio = theme.darkMode ? 0.6 : 0.3;