npm - create-simpleadmin-ui - Versions diffs - 2.0.0 - Mend

create-simpleadmin-ui 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/README.md +53 -0
package/bin/create-simpleadmin-ui.mjs +2 -0
package/package.json +35 -0
package/src/index.mjs +557 -0
package/src/sync-template.mjs +64 -0
package/template/.env.development +4 -0
package/template/.env.production.example +4 -0
package/template/.vscode/extensions.json +3 -0
package/template/README.md +26 -0
package/template/index.html +19 -0
package/template/package.json +30 -0
package/template/public/vite.svg +1 -0
package/template/src/App.vue +3 -0
package/template/src/components/AppBreadcrumb.vue +132 -0
package/template/src/components/AppPage.vue +23 -0
package/template/src/components/ChangePasswordDialog.vue +97 -0
package/template/src/components/ProfileEditDialog.vue +142 -0
package/template/src/components/RichTextEditor.vue +121 -0
package/template/src/components/SidebarMenuItem.vue +56 -0
package/template/src/components/TagsView.vue +172 -0
package/template/src/constants/menuIcons.ts +205 -0
package/template/src/directives/permission.ts +13 -0
package/template/src/env.d.ts +22 -0
package/template/src/layouts/MainLayout.vue +410 -0
package/template/src/main.ts +27 -0
package/template/src/router/index.ts +198 -0
package/template/src/stores/tagsView.ts +161 -0
package/template/src/stores/theme.ts +68 -0
package/template/src/stores/user.ts +191 -0
package/template/src/styles/global.css +314 -0
package/template/src/utils/datetime.ts +34 -0
package/template/src/utils/request.ts +324 -0
package/template/src/utils/requestSign.ts +162 -0
package/template/src/views/error/NotFound.vue +49 -0
package/template/src/views/home/HomeView.vue +1177 -0
package/template/src/views/login/LoginView.vue +576 -0
package/template/src/views/monitor/loginlog/index.vue +366 -0
package/template/src/views/monitor/online/index.vue +298 -0
package/template/src/views/monitor/operlog/index.vue +492 -0
package/template/src/views/system/config/index.vue +407 -0
package/template/src/views/system/dept/index.vue +517 -0
package/template/src/views/system/dict/index.vue +747 -0
package/template/src/views/system/file/index.vue +1031 -0
package/template/src/views/system/menu/index.vue +822 -0
package/template/src/views/system/message/index.vue +422 -0
package/template/src/views/system/notice/index.vue +578 -0
package/template/src/views/system/openApp/index.vue +596 -0
package/template/src/views/system/post/index.vue +495 -0
package/template/src/views/system/role/index.vue +546 -0
package/template/src/views/system/user/index.vue +373 -0
package/template/src/vite-env.d.ts +1 -0
package/template/tsconfig.app.json +30 -0
package/template/tsconfig.json +7 -0
package/template/tsconfig.node.json +24 -0
package/template/vite.config.ts +22 -0

package/template/.env.development ADDED Viewed

@@ -0,0 +1,4 @@
+VITE_API_BASE_URL=/api/v1
+# 须与 SysOpenApp 中对应客户端一致；生产勿把真实密钥提交仓库
+VITE_SIGN_APP_ID=simple-admin-web
+VITE_SIGN_APP_SECRET=SimpleAdmin_Dev_Sign_Secret_Change_Me_32

package/template/.env.production.example ADDED Viewed

@@ -0,0 +1,4 @@
+# 生产构建示例：复制为 .env.production.local 并由 CI 注入真实值，勿提交密钥
+VITE_API_BASE_URL=https://api.example.com/api/v1
+VITE_SIGN_APP_ID=simple-admin-web
+VITE_SIGN_APP_SECRET=REPLACE_WITH_SAME_AS_SysOpenApp_AppSecret

package/template/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/template/README.md ADDED Viewed

@@ -0,0 +1,26 @@
+# SimpleAdmin 前端（Vue3）
+完整说明（启动、签名、生产、配置）见 **[Api README](../Temp.SimpleAdmin.Api/README.md)**。
+## 本仓库直接运行
+```bash
+npm install && npm run dev    # http://localhost:5173
+npm run build                 # dist/；生产 env 由 CI 注入
+```
+环境变量：`VITE_API_BASE_URL`、`VITE_SIGN_APP_ID`、`VITE_SIGN_APP_SECRET`（须与 `SysOpenApp` 一致）。
+## 对外交互式创建
+使用同级 CLI 包 [`create-simpleadmin-ui`](../create-simpleadmin-ui)：
+```bash
+npm create simpleadmin-ui@latest
+```
+本地试跑（无需发布）：
+```bash
+cd ../create-simpleadmin-ui && npm install && npm start
+```

package/template/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SimpleAdmin</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/package.json ADDED Viewed

@@ -0,0 +1,30 @@
+{
+  "name": "temp-simpleadmin-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^1.20.0",
+    "element-plus": "^2.14.5",
+    "marked": "^18.0.11",
+    "pinia": "^4.0.3",
+    "vue": "^3.5.12",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.17.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "sass": "^1.77.8",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
+    "vue-tsc": "^2.1.8"
+  }
+}

package/template/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/src/App.vue ADDED Viewed

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

package/template/src/components/AppBreadcrumb.vue ADDED Viewed

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useUserStore, type SidebarRouter } from '@/stores/user'
+import { ArrowRight } from '@element-plus/icons-vue'
+interface Crumb {
+  title: string
+  path?: string
+}
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+/**
+ * 拼接菜单绝对路径。
+ */
+function joinPath(parent: string | undefined, path: string): string {
+  if (!path) return parent || '/'
+  if (path.startsWith('/')) return path
+  const base = (parent || '').replace(/\/$/, '')
+  if (!base || base === '/') return `/${path}`
+  return `${base}/${path}`.replace(/\/{2,}/g, '/')
+}
+/**
+ * 在菜单树中查找通往目标 path 的标题链。
+ */
+function findMenuTrail(
+  nodes: SidebarRouter[],
+  target: string,
+  parentPath = '',
+  trail: Crumb[] = [],
+): Crumb[] | null {
+  for (const node of nodes) {
+    const abs = joinPath(parentPath, node.path)
+    const title = node.meta?.title || node.name
+    const nextTrail = [...trail, { title, path: node.component ? abs : undefined }]
+    if (abs === target && node.component) {
+      return nextTrail
+    }
+    const kids = (node.children || []).filter((c) => !c.meta?.hidden)
+    if (kids.length) {
+      const found = findMenuTrail(kids, target, abs, nextTrail)
+      if (found) return found
+    }
+  }
+  return null
+}
+const crumbs = computed<Crumb[]>(() => {
+  if (route.path === '/index' || route.path === '/') {
+    return [{ title: '首页', path: '/index' }]
+  }
+  const fromMenu = findMenuTrail(userStore.menus || [], route.path)
+  if (fromMenu?.length) {
+    return [{ title: '首页', path: '/index' }, ...fromMenu]
+  }
+  const title = (route.meta?.title as string) || '页面'
+  return [
+    { title: '首页', path: '/index' },
+    { title },
+  ]
+})
+function onCrumbClick(item: Crumb) {
+  if (item.path && item.path !== route.path) {
+    router.push(item.path)
+  }
+}
+</script>
+<template>
+  <nav class="sa-breadcrumb" aria-label="面包屑">
+    <template v-for="(item, i) in crumbs" :key="`${item.title}-${i}`">
+      <el-icon v-if="i > 0" class="sa-breadcrumb__sep"><ArrowRight /></el-icon>
+      <button
+        v-if="item.path && i < crumbs.length - 1"
+        type="button"
+        class="sa-breadcrumb__link"
+        @click="onCrumbClick(item)"
+      >
+        {{ item.title }}
+      </button>
+      <span v-else class="sa-breadcrumb__current">{{ item.title }}</span>
+    </template>
+  </nav>
+</template>
+<style scoped lang="scss">
+.sa-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 4px;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 1.3;
+}
+.sa-breadcrumb__sep {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+  flex-shrink: 0;
+}
+.sa-breadcrumb__link {
+  border: none;
+  background: transparent;
+  padding: 0 2px;
+  cursor: pointer;
+  color: var(--sa-ink-secondary);
+  font: inherit;
+  font-weight: 500;
+  border-radius: 4px;
+  transition: color 0.15s;
+  &:hover {
+    color: var(--sa-accent);
+  }
+}
+.sa-breadcrumb__current {
+  padding: 0 2px;
+  color: var(--sa-ink);
+  font-weight: 650;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/template/src/components/AppPage.vue ADDED Viewed

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+<template>
+  <div class="sa-page">
+    <div class="sa-page__head">
+      <div>
+        <h1 class="sa-page__title">{{ title }}</h1>
+        <p v-if="description" class="sa-page__desc">{{ description }}</p>
+      </div>
+      <div v-if="$slots.actions" class="sa-page__actions">
+        <slot name="actions" />
+      </div>
+    </div>
+    <div class="sa-panel">
+      <slot />
+    </div>
+  </div>
+</template>

package/template/src/components/ChangePasswordDialog.vue ADDED Viewed

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { put } from '@/utils/request'
+import { useUserStore } from '@/stores/user'
+import { resetDynamicRoutes } from '@/router'
+import { useRouter } from 'vue-router'
+const props = defineProps<{
+  modelValue: boolean
+}>()
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+const router = useRouter()
+const userStore = useUserStore()
+const submitting = ref(false)
+const form = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) {
+      form.oldPassword = ''
+      form.newPassword = ''
+      form.confirmPassword = ''
+    }
+  },
+)
+function close() {
+  emit('update:modelValue', false)
+}
+async function submit() {
+  if (!form.oldPassword || !form.newPassword) {
+    ElMessage.warning('请填写原密码与新密码')
+    return
+  }
+  if (form.newPassword.length < 6) {
+    ElMessage.warning('新密码至少 6 位')
+    return
+  }
+  if (form.newPassword !== form.confirmPassword) {
+    ElMessage.warning('两次输入的新密码不一致')
+    return
+  }
+  submitting.value = true
+  try {
+    await put('/auth/password', {
+      oldPassword: form.oldPassword,
+      newPassword: form.newPassword,
+    })
+    ElMessage.success('密码已修改，请重新登录')
+    close()
+    userStore.logoutLocal()
+    resetDynamicRoutes()
+    router.push('/login')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="修改密码"
+    width="420px"
+    append-to-body
+    align-center
+    destroy-on-close
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <el-form label-width="88px" @submit.prevent>
+      <el-form-item label="原密码">
+        <el-input v-model="form.oldPassword" type="password" show-password autocomplete="current-password" />
+      </el-form-item>
+      <el-form-item label="新密码">
+        <el-input v-model="form.newPassword" type="password" show-password autocomplete="new-password" />
+      </el-form-item>
+      <el-form-item label="确认密码">
+        <el-input v-model="form.confirmPassword" type="password" show-password autocomplete="new-password" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="submit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>

package/template/src/components/ProfileEditDialog.vue ADDED Viewed

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { get, put } from '@/utils/request'
+import { useUserStore, type AuthUserInfo } from '@/stores/user'
+const props = defineProps<{
+  modelValue: boolean
+}>()
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+interface ProfileForm {
+  userId: number
+  userName: string
+  nickName: string
+  realName: string
+  email: string
+  phone: string
+  sex: number
+  avatar: string
+}
+const userStore = useUserStore()
+const loading = ref(false)
+const submitting = ref(false)
+const form = reactive<ProfileForm>({
+  userId: 0,
+  userName: '',
+  nickName: '',
+  realName: '',
+  email: '',
+  phone: '',
+  sex: 0,
+  avatar: '',
+})
+watch(
+  () => props.modelValue,
+  async (open) => {
+    if (!open) return
+    loading.value = true
+    try {
+      const data = await get<{
+        userId: number
+        userName: string
+        nickName: string
+        realName?: string
+        email?: string
+        phone?: string
+        sex: number
+        avatar?: string
+      }>('/auth/profile')
+      form.userId = data.userId
+      form.userName = data.userName
+      form.nickName = data.nickName || ''
+      form.realName = data.realName || ''
+      form.email = data.email || ''
+      form.phone = data.phone || ''
+      form.sex = data.sex ?? 0
+      form.avatar = data.avatar || ''
+    } finally {
+      loading.value = false
+    }
+  },
+)
+function close() {
+  emit('update:modelValue', false)
+}
+async function submit() {
+  if (!form.nickName.trim()) {
+    ElMessage.warning('请填写昵称')
+    return
+  }
+  submitting.value = true
+  try {
+    const info = await put<AuthUserInfo>('/auth/profile', {
+      nickName: form.nickName.trim(),
+      realName: form.realName.trim() || null,
+      email: form.email.trim() || null,
+      phone: form.phone.trim() || null,
+      sex: form.sex,
+      avatar: form.avatar.trim() || null,
+    })
+    userStore.userInfo = info
+    ElMessage.success('个人资料已保存')
+    close()
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="修改个人信息"
+    width="480px"
+    append-to-body
+    align-center
+    destroy-on-close
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div v-loading="loading">
+      <el-form label-width="88px" @submit.prevent>
+        <el-form-item label="登录账号">
+          <el-input :model-value="form.userName" disabled />
+        </el-form-item>
+        <el-form-item label="昵称" required>
+          <el-input v-model="form.nickName" maxlength="64" show-word-limit placeholder="显示名称" />
+        </el-form-item>
+        <el-form-item label="真实姓名">
+          <el-input v-model="form.realName" maxlength="64" placeholder="可选" />
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-radio-group v-model="form.sex">
+            <el-radio :value="0">未知</el-radio>
+            <el-radio :value="1">男</el-radio>
+            <el-radio :value="2">女</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input v-model="form.phone" maxlength="20" placeholder="可选" />
+        </el-form-item>
+        <el-form-item label="邮箱">
+          <el-input v-model="form.email" maxlength="128" placeholder="可选" />
+        </el-form-item>
+        <el-form-item label="头像地址">
+          <el-input v-model="form.avatar" maxlength="256" placeholder="图片 URL，可选" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>

package/template/src/components/RichTextEditor.vue ADDED Viewed

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { onBeforeUnmount, shallowRef, watch } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
+import '@wangeditor/editor/dist/css/style.css'
+/**
+ * 富文本编辑器：基于 wangEditor，v-model 绑定 HTML 字符串。
+ */
+const props = withDefaults(
+  defineProps<{
+    /** HTML 内容 */
+    modelValue?: string
+    /** 占位文案 */
+    placeholder?: string
+    /** 编辑区高度（像素） */
+    height?: number
+    /** 是否只读 */
+    readonly?: boolean
+  }>(),
+  {
+    modelValue: '',
+    placeholder: '请输入内容…',
+    height: 320,
+    readonly: false,
+  },
+)
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+const editorRef = shallowRef<IDomEditor>()
+const toolbarConfig: Partial<IToolbarConfig> = {
+  excludeKeys: ['fullScreen', 'group-video', 'insertVideo', 'uploadVideo'],
+}
+const editorConfig: Partial<IEditorConfig> = {
+  placeholder: props.placeholder,
+  readOnly: props.readonly,
+  MENU_CONF: {
+    // 小图转 base64，避免依赖需鉴权的文件下载地址
+    uploadImage: {
+      base64LimitSize: 2 * 1024 * 1024,
+    },
+  },
+}
+function handleCreated(editor: IDomEditor) {
+  editorRef.value = editor
+}
+watch(
+  () => props.readonly,
+  (v) => {
+    const editor = editorRef.value
+    if (!editor) return
+    if (v) editor.disable()
+    else editor.enable()
+  },
+)
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (!editor) return
+  editor.destroy()
+})
+</script>
+<template>
+  <div class="rich-text" :class="{ 'is-readonly': readonly }">
+    <Toolbar
+      v-if="!readonly"
+      class="rich-text__toolbar"
+      :editor="editorRef"
+      :default-config="toolbarConfig"
+      mode="default"
+    />
+    <Editor
+      class="rich-text__body"
+      :style="{ height: `${height}px` }"
+      :model-value="modelValue"
+      :default-config="editorConfig"
+      mode="default"
+      @on-created="handleCreated"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </div>
+</template>
+<style scoped lang="scss">
+.rich-text {
+  width: 100%;
+  border: 1px solid var(--sa-border, #e2e8f0);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+}
+.rich-text__toolbar {
+  border-bottom: 1px solid var(--sa-border, #e2e8f0);
+}
+.rich-text__body {
+  overflow-y: auto;
+}
+.rich-text.is-readonly .rich-text__body {
+  background: var(--sa-toolbar-bg, #f8fafc);
+}
+:deep(.w-e-text-container) {
+  background: transparent !important;
+}
+:deep(.w-e-toolbar) {
+  background: var(--sa-toolbar-bg, #f8fafc) !important;
+  border: none !important;
+}
+</style>

package/template/src/components/SidebarMenuItem.vue ADDED Viewed

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { resolveMenuIcon } from '@/constants/menuIcons'
+import type { SidebarRouter } from '@/stores/user'
+defineProps<{
+  item: SidebarRouter
+  /** 父级已拼接的绝对路径前缀，顶级传空 */
+  parentPath?: string
+}>()
+/**
+ * 拼接侧栏菜单绝对路径。
+ * @param parent 父路径
+ * @param path 当前节点 path
+ */
+function joinPath(parent: string | undefined, path: string): string {
+  if (!path) return parent || '/'
+  if (path.startsWith('/')) return path
+  const base = (parent || '').replace(/\/$/, '')
+  if (!base || base === '/') return `/${path}`
+  return `${base}/${path}`.replace(/\/{2,}/g, '/')
+}
+function visibleChildren(item: SidebarRouter): SidebarRouter[] {
+  return (item.children || []).filter((c) => !c.meta?.hidden)
+}
+function isDirectory(item: SidebarRouter): boolean {
+  const kids = visibleChildren(item)
+  return kids.length > 0 && !item.component
+}
+</script>
+<template>
+  <el-sub-menu v-if="isDirectory(item)" :index="joinPath(parentPath, item.path)">
+    <template #title>
+      <el-icon>
+        <component :is="resolveMenuIcon(item.meta?.icon, 'Folder')" />
+      </el-icon>
+      <span>{{ item.meta?.title || item.name }}</span>
+    </template>
+    <SidebarMenuItem
+      v-for="child in visibleChildren(item)"
+      :key="joinPath(joinPath(parentPath, item.path), child.path) + child.name"
+      :item="child"
+      :parent-path="joinPath(parentPath, item.path)"
+    />
+  </el-sub-menu>
+  <el-menu-item v-else :index="joinPath(parentPath, item.path)">
+    <el-icon>
+      <component :is="resolveMenuIcon(item.meta?.icon, 'Document')" />
+    </el-icon>
+    <span>{{ item.meta?.title || item.name }}</span>
+  </el-menu-item>
+</template>