initial commit

src/setup/ant-design-vue/index.ts

@@ -0,0 +1,14 @@
+// Load on demand
+
+import type { App } from 'vue';
+
+import { Form, Input, Button } from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+
+import './spin';
+
+export function setupAntd(app: App<Element>) {
+  app.component(Button.Group.name, Button.Group);
+  app.use(Form);
+  app.use(Input);
+}

src/setup/ant-design-vue/spin.less

@@ -0,0 +1,14 @@
+@import (reference) '../../design/index.less';
+
+.app-svg-loading {
+  position: relative;
+  width: auto;
+
+  &__tip {
+    display: block;
+    margin-top: 4px;
+    font-size: 13px;
+    color: #303133;
+    text-align: center;
+  }
+}

src/setup/ant-design-vue/spin.tsx

@@ -0,0 +1,13 @@
+import { Spin } from 'ant-design-vue';
+import svgImg from '/@/assets/images/loading.svg';
+
+import './spin.less';
+Spin.setDefaultIndicator({
+  indicator: () => {
+    return (
+      <div class="app-svg-loading">
+        <img src={svgImg} alt="" height="32" width="32" class="g-loading" />
+      </div>
+    );
+  },
+});

src/setup/directives/index.ts

@@ -0,0 +1,5 @@
+import type { App } from 'vue';
+import { setupPermissionDirective } from './permission';
+export function setupDirectives(app: App) {
+  setupPermissionDirective(app);
+}

src/setup/directives/permission.ts

@@ -0,0 +1,30 @@
+import { appStore } from './../../store/modules/app';
+import type { App } from 'vue';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { PermissionModeEnum } from '/@/enums/appEnum';
+const { hasPermission } = usePermission();
+
+function isAuth(el: Element, binding: any) {
+  const value = binding.value;
+  if (!value) return;
+  if (!hasPermission(value)) {
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+  }
+}
+function isBackMode() {
+  return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
+}
+export function setupPermissionDirective(app: App) {
+  app.directive('auth', {
+    mounted(el: Element, binding) {
+      if (isBackMode()) return;
+      isAuth(el, binding);
+    },
+    updated(el: Element, binding) {
+      if (!isBackMode()) return;
+      isAuth(el, binding);
+    },
+  });
+}

src/setup/theme/index.ts

@@ -0,0 +1,13 @@
+function toggleClass(flag: boolean, clsName: string) {
+  const body = document.body;
+  let { className } = body;
+  className = className.replace(clsName, '');
+  document.body.className = flag ? `${className} ${clsName} ` : className;
+}
+export const updateColorWeak = (colorWeak: boolean) => {
+  toggleClass(colorWeak, 'color-weak');
+};
+
+export const updateGrayMode = (gray: boolean) => {
+  toggleClass(gray, 'gray-mode');
+};