create-simpleadmin-ui 2.0.0

package/template/src/components/TagsView.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Close } from '@element-plus/icons-vue'
+import { useTagsViewStore, type TagView } from '@/stores/tagsView'
+
+const route = useRoute()
+const router = useRouter()
+const tagsStore = useTagsViewStore()
+
+function syncTag() {
+  tagsStore.addView(route)
+}
+
+onMounted(syncTag)
+watch(() => route.fullPath, syncTag)
+
+function isActive(tag: TagView) {
+  return tag.path === route.path
+}
+
+function openTag(tag: TagView) {
+  if (tag.path !== route.path) {
+    router.push(tag.fullPath || tag.path)
+  }
+}
+
+function onClose(e: Event, tag: TagView) {
+  e.stopPropagation()
+  if (tag.affix) return
+  const wasActive = isActive(tag)
+  const next = tagsStore.closeView(tag.path)
+  if (wasActive && next) {
+    router.push(next)
+  }
+}
+
+function onContext(cmd: string, tag: TagView) {
+  if (cmd === 'close' && !tag.affix) {
+    onClose(new Event('click'), tag)
+  } else if (cmd === 'others') {
+    tagsStore.closeOthers(tag.path)
+    if (route.path !== tag.path) {
+      router.push(tag.fullPath || tag.path)
+    }
+  } else if (cmd === 'all') {
+    const next = tagsStore.closeAll()
+    if (route.path !== next) {
+      router.push(next)
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="tags-view">
+    <el-scrollbar class="tags-view__scroll">
+      <div class="tags-view__list">
+        <el-dropdown
+          v-for="tag in tagsStore.visited"
+          :key="tag.path"
+          trigger="contextmenu"
+          @command="(cmd: string) => onContext(cmd, tag)"
+        >
+          <button
+            type="button"
+            class="tags-view__item"
+            :class="{ 'is-active': isActive(tag) }"
+            @click="openTag(tag)"
+          >
+            <span class="tags-view__title">{{ tag.title }}</span>
+            <span
+              v-if="!tag.affix"
+              class="tags-view__close"
+              title="关闭"
+              @click="onClose($event, tag)"
+            >
+              <el-icon :size="12"><Close /></el-icon>
+            </span>
+          </button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-if="!tag.affix" command="close">关闭</el-dropdown-item>
+              <el-dropdown-item command="others">关闭其他</el-dropdown-item>
+              <el-dropdown-item command="all">关闭全部</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.tags-view {
+  flex-shrink: 0;
+  background: var(--sa-panel);
+  border-bottom: 1px solid var(--sa-border);
+  padding: 0 12px;
+}
+
+.tags-view__scroll {
+  white-space: nowrap;
+  height: 40px;
+  :deep(.el-scrollbar__wrap) {
+    overflow-y: hidden;
+  }
+  :deep(.el-scrollbar__view) {
+    height: 100%;
+  }
+}
+
+.tags-view__list {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 4px 0;
+}
+
+.tags-view__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 180px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--sa-border);
+  border-radius: 8px;
+  background: var(--sa-toolbar-bg);
+  color: var(--sa-ink-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
+  outline: none;
+
+  &:hover {
+    border-color: color-mix(in srgb, var(--sa-accent) 45%, var(--sa-border));
+    color: var(--sa-accent);
+  }
+
+  &.is-active {
+    color: var(--sa-accent);
+    border-color: color-mix(in srgb, var(--sa-accent) 55%, var(--sa-border));
+    background: var(--sa-accent-soft);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sa-accent) 12%, transparent);
+  }
+}
+
+.tags-view__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tags-view__close {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  color: var(--sa-ink-muted);
+  transition: background 0.15s, color 0.15s;
+
+  &:hover {
+    background: color-mix(in srgb, var(--el-color-danger) 18%, transparent);
+    color: var(--el-color-danger);
+  }
+}
+</style>

package/template/src/constants/menuIcons.ts

@@ -0,0 +1,205 @@
+import type { Component } from 'vue'
+import * as ElementPlusIcons from '@element-plus/icons-vue'
+
+/**
+ * 菜单/侧栏常用 Element Plus 图标（组件名）。
+ */
+export const MENU_ICON_OPTIONS: string[] = [
+  'HomeFilled',
+  'House',
+  'Setting',
+  'Monitor',
+  'User',
+  'UserFilled',
+  'Avatar',
+  'Menu',
+  'Grid',
+  'List',
+  'Document',
+  'Folder',
+  'FolderOpened',
+  'Files',
+  'Bell',
+  'Notification',
+  'Message',
+  'ChatDotRound',
+  'Key',
+  'Lock',
+  'Unlock',
+  'Search',
+  'Edit',
+  'EditPen',
+  'Delete',
+  'Plus',
+  'Minus',
+  'Check',
+  'Close',
+  'View',
+  'Hide',
+  'Download',
+  'Upload',
+  'Picture',
+  'Camera',
+  'Location',
+  'OfficeBuilding',
+  'School',
+  'Briefcase',
+  'Postcard',
+  'Collection',
+  'CollectionTag',
+  'Tickets',
+  'Ticket',
+  'Calendar',
+  'Clock',
+  'Timer',
+  'AlarmClock',
+  'Connection',
+  'Link',
+  'Share',
+  'Promotion',
+  'Flag',
+  'Star',
+  'StarFilled',
+  'Medal',
+  'Trophy',
+  'DataAnalysis',
+  'DataBoard',
+  'DataLine',
+  'TrendCharts',
+  'PieChart',
+  'Histogram',
+  'Odometer',
+  'Cpu',
+  'Platform',
+  'Cellphone',
+  'Iphone',
+  'Headset',
+  'Microphone',
+  'VideoCamera',
+  'Film',
+  'Reading',
+  'Notebook',
+  'Memo',
+  'Management',
+  'Operation',
+  'Tools',
+  'SetUp',
+  'Switch',
+  'SwitchButton',
+  'Refresh',
+  'Filter',
+  'Sort',
+  'Rank',
+  'Guide',
+  'Compass',
+  'MapLocation',
+  'Place',
+  'Van',
+  'Ship',
+  'Shop',
+  'ShoppingCart',
+  'Goods',
+  'Wallet',
+  'Money',
+  'CreditCard',
+  'Coin',
+  'Present',
+  'Box',
+  'TakeawayBox',
+  'CoffeeCup',
+  'Food',
+  'Bowl',
+  'KnifeFork',
+  'Sunny',
+  'Moon',
+  'Cloudy',
+  'Umbrella',
+  'WindPower',
+  'Lightning',
+  'FirstAidKit',
+  'Help',
+  'InfoFilled',
+  'Warning',
+  'WarnTriangleFilled',
+  'QuestionFilled',
+  'CircleCheck',
+  'SuccessFilled',
+  'Failed',
+  'Remove',
+  'CircleClose',
+]
+
+/** 旧版/别名图标 → Element Plus 组件名 */
+const ICON_ALIAS: Record<string, string> = {
+  home: 'HomeFilled',
+  system: 'Setting',
+  monitor: 'Monitor',
+  user: 'User',
+  peoples: 'Avatar',
+  'tree-table': 'Menu',
+  tree: 'OfficeBuilding',
+  post: 'Postcard',
+  dict: 'CollectionTag',
+  edit: 'Tools',
+  megaphone: 'Notification',
+  message: 'Message',
+  file: 'FolderOpened',
+  form: 'Document',
+  logininfor: 'Key',
+}
+
+const iconComponentMap = new Map<string, Component>()
+for (const name of MENU_ICON_OPTIONS) {
+  const comp = (ElementPlusIcons as Record<string, Component>)[name]
+  if (comp) iconComponentMap.set(name, comp)
+}
+for (const target of Object.values(ICON_ALIAS)) {
+  if (iconComponentMap.has(target)) continue
+  const comp = (ElementPlusIcons as Record<string, Component>)[target]
+  if (comp) iconComponentMap.set(target, comp)
+}
+
+/**
+ * 合并当前已选图标，避免历史数据不在预置列表中时无法回显。
+ * @param current 当前图标名
+ */
+export function resolveMenuIconOptions(current?: string | null): string[] {
+  const name = (current || '').trim()
+  if (!name || MENU_ICON_OPTIONS.includes(name)) return MENU_ICON_OPTIONS
+  return [name, ...MENU_ICON_OPTIONS]
+}
+
+/**
+ * 将菜单 Icon 字段解析为 Element Plus 图标组件名。
+ * @param icon 数据库或路由 meta 中的图标
+ * @param fallback 找不到时的兜底图标
+ */
+export function resolveMenuIconName(icon?: string | null, fallback = 'Menu'): string {
+  const raw = (icon || '').trim()
+  if (!raw) return fallback
+  if (ICON_ALIAS[raw]) return ICON_ALIAS[raw]
+  if (/^[A-Z]/.test(raw)) return raw
+  const lower = raw.toLowerCase()
+  if (ICON_ALIAS[lower]) return ICON_ALIAS[lower]
+  const pascal = raw
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('')
+  return pascal || fallback
+}
+
+/**
+ * 解析为 Vue 图标组件（按需映射，无需全局注册全部 icons）。
+ * @param icon 菜单图标名
+ * @param fallback 兜底图标名
+ */
+export function resolveMenuIcon(icon?: string | null, fallback = 'Menu'): Component {
+  const name = resolveMenuIconName(icon, fallback)
+  return (
+    iconComponentMap.get(name) ||
+    (ElementPlusIcons as Record<string, Component>)[name] ||
+    (ElementPlusIcons as Record<string, Component>)[fallback] ||
+    ElementPlusIcons.Menu
+  )
+}

package/template/src/directives/permission.ts

@@ -0,0 +1,13 @@
+import type { Directive } from 'vue'
+import { useUserStore } from '@/stores/user'
+
+/** 按钮级权限指令：v-permission="'system:user:add'" */
+export const permission: Directive<HTMLElement, string> = {
+  mounted(el, binding) {
+    const store = useUserStore()
+    const code = binding.value
+    if (!store.hasPermission(code)) {
+      el.parentNode?.removeChild(el)
+    }
+  },
+}

package/template/src/env.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}
+
+/** wangEditor Vue3 封装：package exports 未正确暴露类型，在此补声明 */
+declare module '@wangeditor/editor-for-vue' {
+  import type { DefineComponent } from 'vue'
+  export const Editor: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export const Toolbar: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+}