create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/components/meWangEditor/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="me-wang-editor">
+    <Toolbar v-if="showEditor" class="wang-toolbar" :editor="editorRef" :default-config="config.toolbar" :mode="mode" />
+    <Editor
+      v-if="showEditor"
+      :model-value="modelValue"
+      :default-content="defaultContent"
+      :default-html="defaultHtml"
+      :default-config="config.editor"
+      :mode="mode"
+      style="overflow-y: hidden"
+      @update:model-value="emit('update:modelValue', $event)"
+      @on-created="handleCreated"
+      @on-change="emit('onChange', $event)"
+      @on-destroyed="emit('onDestroyed', $event)"
+      @on-max-length="emit('onMaxLength', $event)"
+      @on-focus="emit('onFocus', $event)"
+      @on-blur="emit('onBlur', $event)"
+      @custom-alert="(...args:[string,string]) => emit('customAlert', ...args)"
+      @custom-paste="(...args:[IDomEditor,ClipboardEvent]) => emit('customPaste', ...args)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="MeWangEditor">
+import { useGlobalStore } from '@/store';
+import { i18nChangeLanguage, IDomEditor, IEditorConfig, IToolbarConfig, SlateDescendant } from '@wangeditor/editor';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import '@wangeditor/editor/dist/css/style.css'; // 引入 css
+import { onBeforeUnmount, PropType, shallowRef } from 'vue';
+import './meWangEditor.scss';
+defineProps({
+  mode: {
+    type: String as PropType<'simple' | 'default'>,
+    default: 'default',
+  },
+  config: {
+    type: Object as PropType<{ toolbar?: Partial<IToolbarConfig>; editor?: Partial<IEditorConfig> }>,
+    default: () => ({}),
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+
+  /** 编辑器默认内容 */
+  defaultContent: {
+    type: Array as PropType<SlateDescendant[]>,
+    default: () => [],
+  },
+  defaultHtml: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits<{
+  (e: 'update:modelValue', valueHtml: string): void;
+  (e: 'onCreated', editor: IDomEditor): void;
+  (e: 'onChange', editor: IDomEditor): void;
+  (e: 'onDestroyed', editor: IDomEditor): void;
+  (e: 'onMaxLength', editor: IDomEditor): void;
+  (e: 'onFocus', editor: IDomEditor): void;
+  (e: 'onBlur', editor: IDomEditor): void;
+  (e: 'customAlert', s: string, t: string): void;
+  (e: 'customPaste', editor: IDomEditor, event: ClipboardEvent): void;
+}>();
+const { i18n } = storeToRefs(useGlobalStore());
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef<IDomEditor | undefined>();
+defineExpose({ editorRef });
+//切换语言
+const showEditor = ref(true);
+i18nChangeLanguage(i18n.value.locale.value);
+watch(
+  () => i18n.value.locale.value,
+  async (locale) => {
+    // 切换语言 - 'en' 或者 'zh-CN'
+    showEditor.value = false;
+    await nextTick();
+    i18nChangeLanguage(locale);
+    showEditor.value = true;
+  },
+);
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  editorRef.value && editorRef.value.destroy();
+});
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value && editorRef.value.destroy();
+  editorRef.value = editor; // 记录 editor 实例，重要！
+  emit('onCreated', editor);
+};
+</script>
+<style lang="scss" scoped>
+.me-wang-editor {
+  border: 1px solid var(--el-border-color);
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  .wang-toolbar {
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  :deep(.w-e-scroll) {
+    &::-webkit-scrollbar {
+      z-index: 1;
+      border-radius: 4px;
+      width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(144, 147, 153, 0.3);
+      width: 100%;
+      opacity: 0.3;
+      border-radius: 4px;
+    }
+    overflow-y: overlay !important;
+  }
+}
+:global(.dark .me-wang-editor .w-e-scroll::-webkit-scrollbar-thumb) {
+  background-color: rgba(163, 166, 173, 0.3);
+}
+</style>

package/template/meadmin/view/admin/src/components/meWangEditor/meWangEditor.scss

@@ -0,0 +1,24 @@
+:root,
+:host {
+  // textarea - css vars
+  --w-e-textarea-bg-color: var(--el-bg-color);
+  --w-e-textarea-color: var(--el-text-color-primary);
+  --w-e-textarea-border-color: var(--el-border-color);
+  --w-e-textarea-slight-border-color: var(--el-border-color);
+  --w-e-textarea-slight-color: var(--el-text-color-placeholder);
+  --w-e-textarea-slight-bg-color: var(--el-bg-color-page);
+  --w-e-textarea-selected-border-color: var(--el-color-primary-light-5); // 选中的元素，如选中了分割线
+  --w-e-textarea-handler-bg-color: var(--el-color-primary); // 工具，如图片拖拽按钮
+
+  // toolbar - css vars
+  --w-e-toolbar-color: var(--el-text-color-regular);
+  --w-e-toolbar-bg-color: var(--el-bg-color);
+  --w-e-toolbar-active-color: var(--el-text-color-primary);
+  --w-e-toolbar-active-bg-color: var(--el-fill-color);
+  --w-e-toolbar-disabled-color: var(--el-text-color-disabled);
+  --w-e-toolbar-border-color: var(--el-border-color);
+
+  // modal - css vars
+  --w-e-modal-button-bg-color: var(--el-color-info-light-9);
+  --w-e-modal-button-border-color: var(--el-color-info-light-5);
+}

package/template/meadmin/view/admin/src/components/page.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="page page-100 page-padding">
+    <el-card v-if="$slots.searchForm" class="seach-header">
+      <slot name="searchForm"></slot>
+    </el-card>
+    <el-card class="content-body" body-style="height:100%">
+      <slot></slot>
+    </el-card>
+    <slot name="extend"></slot>
+  </div>
+</template>
+<style lang="scss" scoped>
+.page {
+  .seach-header {
+    flex-shrink: 0;
+  }
+  .content-body {
+    flex: 1;
+  }
+  .content-body:nth-child(n + 2) {
+    margin-top: 10px;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/components/service/meImageViewer.ts

@@ -0,0 +1,23 @@
+import { ElImageViewer } from 'element-plus';
+import { createVNode, render } from 'vue';
+//函数组件只能以服务的方式调用
+export function createImageViewer(props: ComponentProps<typeof ElImageViewer>) {
+  const vnode = createVNode(
+    ElImageViewer,
+    Object.assign(
+      {
+        // 解决 element plus 2.8.0 及以上版本，不能关闭 image-viewer 的问题
+        teleported: true,
+        onClose: function () {
+          render(null, document.body);
+          if (typeof props.onClose === 'function') {
+            props.onClose.call(this);
+          }
+        },
+      },
+      props,
+    ),
+  );
+  render(vnode, document.body);
+  return vnode;
+}

package/template/meadmin/view/admin/src/config/index.ts

@@ -0,0 +1,11 @@
+import MenuModeEnum from '@/dict/menuModeEnum';
+import * as localeConfig from './locale';
+import loginConfig from './login';
+import themeConfig from './theme';
+const settingKey = 'me-config';
+const settingConfig = {
+  version: '1.0.4', //版本当版本改变时会清空localStorage和sessionStorage
+  openKeepAlive: true, // 是否开启KeepAlive缓存
+  menuMode: MenuModeEnum.API, // 菜单模式
+};
+export { localeConfig, loginConfig, settingConfig, settingKey, themeConfig };

package/template/meadmin/view/admin/src/config/locale.ts

@@ -0,0 +1,245 @@
+import { I18nOptions } from 'vue-i18n';
+
+export const loadMessageConfig = {
+  // 导入语言包配置
+  timeOut: 10000, // 导入语言包超时时间ms(对于单次导入而不是整体导入)0代表不超时
+  errorWarning: false, // 导入失败的警告（生产环境会被屏蔽）
+  componentLoad: true, // 组件语言包导入 不需要多语言或只使用全局语言包时设置为false以提升性能
+};
+
+// 语言列表 和elment-plus对应 locale字段值不要改变，否则会导致element-plus组件无法翻译为对应语言
+export const localeList = [
+  {
+    text: '简体中文',
+    locale: 'zh-cn',
+  },
+  {
+    text: '美国英语',
+    locale: 'en',
+  },
+  // {
+  //     text: '阿塞拜疆语',
+  //     locale: 'az',
+  // },
+  // {
+  //     text: '德语',
+  //     locale: 'de',
+  // },
+  // {
+  //     text: '葡萄牙语',
+  //     locale: 'pt',
+  // },
+  // {
+  //     text: '西班牙语',
+  //     locale: 'es',
+  // },
+  // {
+  //     text: '丹麦语',
+  //     locale: 'da',
+  // },
+  // {
+  //     text: '法语',
+  //     locale: 'fr',
+  // },
+  // {
+  //     text: '挪威语',
+  //     locale: 'nb-NO',
+  // },
+  // {
+  //     text: '繁体中文',
+  //     locale: 'zh-tw',
+  // },
+  // {
+  //     text: '意大利语',
+  //     locale: 'it',
+  // },
+  // {
+  //     text: '韩语',
+  //     locale: 'ko',
+  // },
+  // {
+  //     text: '日语',
+  //     locale: 'ja',
+  // },
+  // {
+  //     text: '荷兰语',
+  //     locale: 'nl',
+  // },
+  // {
+  //     text: '越南语',
+  //     locale: 'vi',
+  // },
+  // {
+  //     text: '俄语',
+  //     locale: 'ru',
+  // },
+  // {
+  //     text: '土耳其语',
+  //     locale: 'tr',
+  // },
+  // {
+  //     text: '巴西葡萄牙语',
+  //     locale: 'pt-br',
+  // },
+  // {
+  //     text: '波斯语',
+  //     locale: 'fa',
+  // },
+  // {
+  //     text: '泰语',
+  //     locale: 'th',
+  // },
+  // {
+  //     text: '印度尼西亚语',
+  //     locale: 'id',
+  // },
+  // {
+  //     text: '保加利亚语',
+  //     locale: 'bg',
+  // },
+  // {
+  //     text: '普什图语',
+  //     locale: 'pa',
+  // },
+  // {
+  //     text: '波兰语',
+  //     locale: 'pl',
+  // },
+  // {
+  //     text: '芬兰语',
+  //     locale: 'fi',
+  // },
+  // {
+  //     text: '瑞典语',
+  //     locale: 'sv',
+  // },
+  // {
+  //     text: '希腊语',
+  //     locale: 'el',
+  // },
+  // {
+  //     text: '斯洛伐克语',
+  //     locale: 'sk',
+  // },
+  // {
+  //     text: '加泰罗尼亚语',
+  //     locale: 'ca',
+  // },
+  // {
+  //     text: '捷克语',
+  //     locale: 'cs',
+  // },
+  // {
+  //     text: '乌克兰语',
+  //     locale: 'uk',
+  // },
+  // {
+  //     text: '土库曼语',
+  //     locale: 'tk',
+  // },
+  // {
+  //     text: '泰米尔语',
+  //     locale: 'ta',
+  // },
+  // {
+  //     text: '拉脱维亚语',
+  //     locale: 'lv',
+  // },
+  // {
+  //     text: '南非荷兰语',
+  //     locale: 'af',
+  // },
+  // {
+  //     text: '爱沙尼亚语',
+  //     locale: 'et',
+  // },
+  // {
+  //     text: '斯洛文尼亚语',
+  //     locale: 'sl',
+  // },
+  // {
+  //     text: '阿拉伯语',
+  //     locale: 'ar',
+  // },
+  // {
+  //     text: '希伯来语',
+  //     locale: 'he',
+  // },
+  // {
+  //     text: '立陶宛语',
+  //     locale: 'lt',
+  // },
+  // {
+  //     text: '蒙古语',
+  //     locale: 'mn',
+  // },
+  // {
+  //     text: '哈萨克语',
+  //     locale: 'kk',
+  // },
+  // {
+  //     text: '匈牙利语',
+  //     locale: 'hu',
+  // },
+  // {
+  //     text: '罗马尼亚语',
+  //     locale: 'ro',
+  // },
+  // {
+  //     text: '库尔德语',
+  //     locale: 'ku',
+  // },
+  // {
+  //     text: '维吾尔语',
+  //     locale: 'ug-cn',
+  // },
+  // {
+  //     text: '高棉语',
+  //     locale: 'km',
+  // },
+  // {
+  //     text: '塞尔维亚语',
+  //     locale: 'sr',
+  // },
+  // {
+  //     text: '巴斯克语',
+  //     locale: 'eu',
+  // },
+  // {
+  //     text: '吉尔吉斯语',
+  //     locale: 'ky',
+  // },
+  // {
+  //     text: '亚美尼亚语',
+  //     locale: 'hy-am',
+  // },
+  // {
+  //     text: '克罗地亚语',
+  //     locale: 'hr',
+  // },
+  // {
+  //     text: '世界语',
+  //     locale: 'eo',
+  // },
+  // {
+  //     text: '孟加拉语',
+  //     locale: 'bn',
+  // },
+];
+
+/**
+ * VueI18n初始参数
+ * 强制把legacy设置为了false
+ * globalInjection设置为了true
+ * 文档参考: https://vue-i18n.intlify.dev/api/general.html#i18noptions
+ */
+const localeSetting: I18nOptions = {
+  // Locale
+  locale: localeList[0].locale,
+  // Default locale
+  fallbackLocale: localeList[0].locale,
+  missingWarn: false, // 当本地化失败时，压制输出的警告
+  fallbackWarn: false, // 抑制回落警告
+  fallbackFormat: true, // 跳过为你的"base"语言编写模板;key是您的模板
+};
+export { localeSetting };

package/template/meadmin/view/admin/src/config/login.ts

@@ -0,0 +1,5 @@
+export default {
+  tokenName: 'auth-token', // cookie中存储的token key
+  tokenExpires: 7, // token 过期时间
+  tokenDomain: typeof window === 'undefined' ? '' : window.location.hostname, // token 存储cookie域名
+};

package/template/meadmin/view/admin/src/config/theme.ts

@@ -0,0 +1,19 @@
+import { SizeEnum } from '@/dict/configEnum';
+export default {
+  primaryColor: '#409eff', // 主题颜色
+  menuType: 'sidebar' as 'top' | 'sidebar', //菜单模式，顶部模式/侧边栏模式
+  menuBg: '#1d1e1f', // 菜单背景颜色
+  menuWidth: '200px', // 菜单展开宽度
+  menuCollapse: true, // 菜单是否折叠
+  size: SizeEnum.DEFAULT, // 默认大小
+  fixedHeader: true, // 固定header
+  topBar: true, // 是否显示顶栏
+  breadcrumb: true, // 面包屑
+  showDark: true, // 开启暗黑模式切换
+  showSize: true, // 开启大小切换
+  tagBar: true, // 标签栏
+  tagBarMenu: true, // 标签栏快捷菜单
+  tagBarRefresh: true, // 标签栏刷新按钮
+  showSetting: true, // 展示设置按钮
+  showSearchMenu: true, //菜单搜索
+};

package/template/meadmin/view/admin/src/dict/configEnum.ts

@@ -0,0 +1,5 @@
+export enum SizeEnum {
+  LARGE = 'large',
+  DEFAULT = 'default',
+  SMALL = 'small',
+}

package/template/meadmin/view/admin/src/dict/eventEnmu.ts

@@ -0,0 +1,14 @@
+const enum EventEnum {
+  START = 'start', // vue准备启动
+  READY = 'ready', // vue启动完成渲染之前触发
+  BEFORE_ROUTE_CHANGE = 'beforeRouteChange', // 路由变更前
+  AFTER_ROUTE_CHANGE = 'afterRouteChange', // 路由变更后
+  BEFORE_LOGIN = 'beforeLogin', // 登录前
+  AFTER_LOGIN = 'afterLogin', // 登录成功后
+  BEFORE_LOGOUT = 'beforeLogout', // 退出前
+  AFTER_LOGOUT = 'aftreLogout', // 退出成功后
+  BEFORE_LOCAL_CHANGE = 'beforeLocalChange', // 全局语言变更前
+  RESIZE = 'resize', // window变化时触发
+  INIT_DYNAMIC_VIEWS_MODULES = 'initDynamicViewsModules', //初始化动态路由页面视图
+}
+export default EventEnum;

package/template/meadmin/view/admin/src/dict/menuModeEnum.ts

@@ -0,0 +1,5 @@
+export const enum MenuModeEnum {
+  STATIC = 'static',
+  API = 'api',
+}
+export default MenuModeEnum;

package/template/meadmin/view/admin/src/dict/pageEnum.ts

@@ -0,0 +1,6 @@
+export const enum PageEnum {
+  // basic login path
+  LOGIN = '/login',
+  // basic home path
+  HOME = '/',
+}

package/template/meadmin/view/admin/src/directives/clickOutside.ts

@@ -0,0 +1,2 @@
+import { ClickOutside } from 'element-plus';
+export default ClickOutside;

package/template/meadmin/view/admin/src/entry-client.ts

@@ -0,0 +1,8 @@
+import { createApp } from './main';
+(async () => {
+  const { app, router } = await createApp();
+  // wait until router is ready before mounting to ensure hydration match
+  router.isReady().then(() => {
+    app.mount('#app');
+  });
+})();

package/template/meadmin/view/admin/src/entry-server.ts

@@ -0,0 +1,69 @@
+import { basename } from 'node:path';
+import serialize from 'serialize-javascript';
+import { renderToString } from 'vue/server-renderer';
+import { createApp } from './main';
+
+export async function render(url: string, manifest: Record<string, string[]>) {
+  const { app, router, pinia } = await createApp();
+  // set the router to the desired URL before rendering (需要把base,替换为/)
+  await router.push(url === router.options.history.base ? '/' : url.replace(router.options.history.base + '/', '/'));
+  await router.isReady();
+  // passing SSR context object which will be available via useSSRContext()
+  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // itself on ctx.modules. After the render, ctx.modules would contain all the
+  // components that have been instantiated during this render call.
+  const ctx = {} as Record<string, any>;
+  const html = await renderToString(app, ctx);
+
+  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
+  // which we can then use to determine what files need to be preloaded for this
+  // request.
+  const __pinia = serialize(pinia.state.value);
+  const preloadLinks = `<script>window.__pinia=${__pinia};</script>\n` + renderPreloadLinks(ctx.modules, manifest);
+  return [html, preloadLinks];
+}
+
+function renderPreloadLinks(modules: string[], manifest: Record<string, string[]>) {
+  let links = '';
+  const seen = new Set();
+  modules.forEach((id) => {
+    const files = manifest[id];
+    if (files) {
+      files.forEach((file) => {
+        if (!seen.has(file)) {
+          seen.add(file);
+          const filename = basename(file);
+          if (manifest[filename]) {
+            for (const depFile of manifest[filename]) {
+              links += renderPreloadLink(depFile);
+              seen.add(depFile);
+            }
+          }
+          links += renderPreloadLink(file);
+        }
+      });
+    }
+  });
+  return links;
+}
+
+function renderPreloadLink(file: string) {
+  if (file.endsWith('.js')) {
+    return `<link rel="modulepreload" crossorigin href="${file}">`;
+  } else if (file.endsWith('.css')) {
+    return `<link rel="stylesheet" href="${file}">`;
+  } else if (file.endsWith('.woff')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
+  } else if (file.endsWith('.woff2')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
+  } else if (file.endsWith('.gif')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`;
+  } else if (file.endsWith('.jpg') || file.endsWith('.jpeg')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`;
+  } else if (file.endsWith('.png')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/png">`;
+  } else {
+    // TODO
+    return '';
+  }
+}

package/template/meadmin/view/admin/src/env.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/template/meadmin/view/admin/src/event/index.ts

@@ -0,0 +1,30 @@
+/**
+ * 事件总线
+ */
+import EventEnum from '@/dict/eventEnmu';
+import Mitt from '@/utils/mitt';
+import { DynamicViewsModules } from '@/utils/permission';
+import { App } from 'vue';
+import { Composer } from 'vue-i18n';
+import { NavigationFailure, RouteLocationNormalized } from 'vue-router';
+interface Events {
+  // 事件总线
+  [EventEnum.START]: App;
+  [EventEnum.READY]: App;
+  [EventEnum.BEFORE_ROUTE_CHANGE]: {
+    to: RouteLocationNormalized;
+    from: RouteLocationNormalized;
+  }; // 路由变更前
+  [EventEnum.AFTER_ROUTE_CHANGE]: {
+    to: RouteLocationNormalized;
+    from: RouteLocationNormalized;
+    failure: NavigationFailure | undefined;
+  }; // 路由变更后
+  [EventEnum.BEFORE_LOCAL_CHANGE]: {
+    locale: string;
+    i18n: Composer<Record<string, any>, Record<string, any>, Record<string, any>, any>;
+  }; // 全局语言变更前
+  [EventEnum.INIT_DYNAMIC_VIEWS_MODULES]: DynamicViewsModules;
+}
+const mitter = Mitt<Events & Omit<{ [key in EventEnum]: undefined }, keyof Events>>(); // inferred as Emitter<Events>
+export { EventEnum as event, mitter };

package/template/meadmin/view/admin/src/event/module.ts

@@ -0,0 +1 @@
+import './modules/core';

package/template/meadmin/view/admin/src/event/modules/core.ts

@@ -0,0 +1,27 @@
+import { settingConfig, settingKey } from '@/config';
+import { installIcon } from '@/icons';
+import { installI18n } from '@/locales/i18n';
+import { installRoute } from '@/router';
+import { installStore } from '@/store';
+import { permission } from '@/utils/permission';
+import nProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+import { event, mitter } from '../index';
+mitter.once(event.START, async (app) => {
+  if (localStorage.getItem(`${settingKey}-version`) !== settingConfig.version) {
+    localStorage.clear();
+    sessionStorage.clear();
+    localStorage.setItem(`${settingKey}-version`, settingConfig.version);
+  }
+  installIcon(app);
+  await installStore(app);
+  await installI18n(app);
+  installRoute(app);
+
+  window.addEventListener('resize', () => mitter.emit(event.RESIZE));
+  app.config.globalProperties.$permission = permission;
+  // 进度条配置
+  nProgress.configure({
+    showSpinner: false,
+  });
+});