first commit

config/index.ts

@@ -0,0 +1,19 @@
+import { configUnocss } from './plugins';
+import { configAutoImport, configComponents, configIcons } from './unplugin';
+import viteCompression from 'vite-plugin-compression';
+import progress from 'vite-plugin-progress';
+import defineOptions from 'unplugin-vue-define-options/vite';
+
+export * from './utils';
+
+export const pluginsConfig = [
+  configUnocss(),
+  configAutoImport(),
+  configComponents(),
+  configIcons(),
+  viteCompression(),
+  progress(),
+  defineOptions({
+    include: [/\.vue$/, /\.vue\?vue/],
+  }),
+];

config/plugins/index.ts

@@ -0,0 +1 @@
+export * from './unocss';

config/plugins/unocss.ts

@@ -0,0 +1,61 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-03-05 18:14:16
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-03-05 19:23:48
+ * @Description:
+ */
+import Unocss from 'unocss/vite';
+import {
+  presetUno,
+  presetIcons,
+  presetAttributify,
+  transformerDirectives,
+  transformerCompileClass,
+  transformerVariantGroup,
+  transformerAttributifyJsx,
+} from 'unocss';
+import presetRemToPx from '@unocss/preset-rem-to-px';
+
+export const configUnocss = () =>
+  Unocss({
+    presets: [presetUno(), presetIcons(), presetAttributify(), presetRemToPx()],
+    transformers: [
+      transformerDirectives(),
+      transformerCompileClass(),
+      transformerVariantGroup(),
+      transformerAttributifyJsx(),
+    ],
+    shortcuts: [
+      // 垂直水平居中
+      ['flex-center', 'flex justify-center items-center'],
+    ],
+    rules: [
+      [/^mgl-(\d+)$/, ([, d]) => ({ 'margin-left': `${d}px !important` })],
+      [/^mgr-(\d+)$/, ([, d]) => ({ 'margin-right': `${d}px !important` })],
+      [/^mgt-(\d+)$/, ([, d]) => ({ 'margin-top': `${d}px !important` })],
+      [/^mgb-(\d+)$/, ([, d]) => ({ 'margin-bottom': `${d}px !important` })],
+      [/^pd-(\d+)$/, ([, d]) => ({ padding: `${d}px !important` })],
+      [/^flex-(\d+)$/, ([, d]) => ({ flex: `${d} !important` })],
+      [/^w(\d+)$/, ([, d]) => ({ width: `${d}% !important` })],
+      [/^w-(\d+)$/, ([, d]) => ({ width: `${d}px !important` })],
+      [/^h-(\d+)$/, ([, d]) => ({ height: `${d}px !important` })],
+      [/^ft-(\d+)$/, ([, d]) => ({ 'font-size': `${d}px !important` })],
+      [
+        'box-container',
+        {
+          'border-radius': '2px',
+          padding: '20px',
+          margin: '8px',
+          'background-color': '#fff',
+        },
+      ],
+      [
+        'justify-between',
+        {
+          'justify-content': 'space-between',
+        },
+      ],
+      ['align-center', { 'text-align': 'center' }],
+    ],
+  });

config/unplugin/auto-import.ts

@@ -0,0 +1,41 @@
+/**
+ * 自动引入API
+ * */
+import AutoImport from 'unplugin-auto-import/vite';
+
+import { ArcoResolver } from 'unplugin-vue-components/resolvers';
+import IconsResolver from 'unplugin-icons/resolver';
+
+import { layoutsResolver } from '../utils';
+
+export function configAutoImport() {
+  return AutoImport({
+    imports: [
+      'vue',
+      'vue-router',
+      'pinia',
+      '@vueuse/core',
+      {
+        dayjs: [['default', 'dayjs']],
+        'lodash-es': ['cloneDeep', 'omit', 'pick'],
+        '@/hooks': ['useModal'],
+      },
+    ],
+    resolvers: [
+      ArcoResolver({
+        resolveIcons: {
+          enable: true,
+        },
+      }),
+      IconsResolver({
+        enabledCollections: [],
+      }),
+      layoutsResolver(),
+    ],
+    eslintrc: {
+      enabled: true,
+      filepath: './config/unplugin/.eslintrc-auto-import.json',
+    },
+    dts: './config/unplugin/auto-imports.d.ts',
+  });
+}

config/unplugin/component.ts

@@ -0,0 +1,57 @@
+/**
+ * 自动引入组件
+ * */
+import { kebabCase } from 'unplugin-vue-components';
+import Components from 'unplugin-vue-components/vite';
+
+import { ArcoResolver } from 'unplugin-vue-components/resolvers';
+import IconsResolver from 'unplugin-icons/resolver';
+
+import { getSep, getPath, setResolve, layoutsResolver } from '../utils';
+
+export function configComponents() {
+  return Components({
+    dirs: ['src/components'],
+    extensions: ['vue'],
+    resolvers: [
+      ArcoResolver({
+        resolveIcons: {
+          enable: true,
+        },
+        sideEffect: true,
+      }),
+      IconsResolver({
+        prefix: false,
+        customCollections: ['i'],
+        enabledCollections: [],
+      }),
+      layoutsResolver(),
+      {
+        type: 'component',
+        resolve: (name) => {
+          const [prefix, folder] = kebabCase(name).split('-');
+
+          // 命名导出组件
+          if (prefix === 'eos') {
+            return {
+              name: name.slice(3),
+              from: getPath(`${getSep('src')}/components`, { folder }),
+            };
+          }
+          // 默认导出组件
+          if (prefix === 'eo') {
+            return setResolve(name);
+          }
+          if (prefix === 'base') {
+            return {
+              name: name.slice(4),
+              from: `${getSep('src')}/components/_base`,
+            };
+          }
+        },
+      },
+    ],
+    directoryAsNamespace: true,
+    dts: './config/unplugin/components.d.ts',
+  });
+}

config/unplugin/icons.ts

@@ -0,0 +1,14 @@
+/**
+ * 自动引入 svg 图标
+ * */
+import Icons from 'unplugin-icons/vite';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+
+export function configIcons() {
+  return Icons({
+    compiler: 'vue3',
+    customCollections: {
+      i: FileSystemIconLoader('./src/assets', (svg) => svg.replace(/^<svg /, '<svg class="eo-i" ')),
+    },
+  });
+}

config/unplugin/index.ts

@@ -0,0 +1,3 @@
+export * from './auto-import';
+export * from './component';
+export * from './icons';

config/utils.ts

@@ -0,0 +1,73 @@
+import { sep } from 'node:path';
+import { fileURLToPath, URL } from 'node:url';
+import { accessSync, readdirSync } from 'node:fs';
+
+export const resolve = (src: string) => fileURLToPath(new URL(`../${src}`, import.meta.url));
+
+export const getSep = (src: string) => resolve(src).split(sep).join('/');
+
+interface AccessType {
+  name: string;
+  dir: string;
+  extensions: string[];
+}
+const access = ({ name, dir, extensions }: AccessType) => {
+  const paths = ['/Index', '/index', `/${name}`].reduce(
+    (t: string[], o: string) => [...t, ...extensions.map((r) => `${o}.${r}`)],
+    [],
+  );
+
+  for (const path of paths) {
+    try {
+      accessSync(`${getSep('src')}/${dir}/${name}${path}`);
+      return path;
+    } catch {}
+  }
+  return undefined;
+};
+
+// 解决 nodejs 大小写不敏感不能正确读取路径，vite 的自动导入组件不能热更新
+interface PathParams {
+  folder: string;
+}
+export const getPath = (parentPath: string, { folder }: PathParams) => {
+  try {
+    const files = readdirSync(parentPath);
+    for (const file of files) {
+      if (file.toLowerCase() === folder) {
+        return `${parentPath}/${file}`;
+      }
+    }
+  } catch {}
+  throw new Error(`${parentPath}/${folder} is exist?`);
+};
+
+export const setResolve = (name: string, { prefix = 'Eo', dir = 'components' } = {}) => {
+  const partialName = name.slice(prefix.length);
+  const path = access({ name: partialName, dir, extensions: ['vue', 'js'] }) || '.vue';
+  return `${getSep('src')}/${dir}/${partialName}${path}`;
+};
+
+// resolver
+export const layoutsResolver = () => (name: string) => {
+  if (name.startsWith('Layout')) {
+    return setResolve(name, { prefix: 'Layout', dir: 'layouts' });
+  }
+};
+
+// 本地服务器配置
+export const setServerConfig =
+  ({ env }: { env: Record<string, string> }) =>
+  (opts = {}): Record<string, any> => {
+    return {
+      port: Number(env.APP_PORT),
+      proxy: {
+        [env.EO_API_URL]: {
+          target: env.API_PROXY,
+          changeOrigin: true,
+          rewrite: (path: string) => path.replace(env.EO_API_URL, ''),
+        },
+      },
+      ...opts,
+    };
+  };