refactor: 悦码项目重构

apps/designer/src/App.vue

@@ -0,0 +1,51 @@
+<template>
+  <ElConfigProvider :locale="zhCn">
+    <Suspense>
+      <XMask
+        :title="title"
+        :logo="logo || _logo"
+        :menus="menus"
+        :disabled="disabled"
+        :pure="pure"
+        :actions="actions"
+        @action-click="onActionClick"
+        :theme="themeSwitchable"></XMask>
+    </Suspense>
+  </ElConfigProvider>
+</template>
+<script setup lang="ts">
+import { Suspense } from 'vue';
+import { ElConfigProvider, ElMessage } from 'element-plus';
+import {
+  XMask,
+  useMask,
+  Bell,
+  Lock,
+  SwitchButton,
+  type ActionBarItems,
+  type ActionProps
+} from '@vtj/web';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import _logo from './assets/logo.svg';
+const { disabled, title, menus, logo, themeSwitchable, pure } = useMask();
+
+const actions: ActionBarItems = [
+  {
+    name: 'message',
+    icon: Bell,
+    badge: 1
+  },
+  {
+    name: 'lock',
+    icon: Lock
+  },
+  {
+    name: 'logout',
+    icon: SwitchButton
+  }
+];
+
+const onActionClick = (action: ActionProps) => {
+  ElMessage.success(`click: ${action.name}`);
+};
+</script>

apps/designer/src/assets/logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711803009570" class="icon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1500" width="320" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M557.85 1023l-122-35.4c-12.8-3.6-20-17-16.4-29.8L692.45 17.4c3.6-12.8 17-20 29.8-16.4l122 35.4c12.8 3.6 20 17 16.4 29.8L587.65 1006.6c-3.8 12.8-17 20.2-29.8 16.4z m-228-224.4l87-92.8c9.2-9.8 8.6-25.4-1.6-34.4L234.05 512l181.2-159.4c10.2-9 11-24.6 1.6-34.4l-87-92.8c-9-9.6-24.2-10.2-34-1L7.65 494.4c-10.2 9.4-10.2 25.6 0 35l288.2 270.2c9.8 9.2 25 8.8 34-1z m654.4 1.2l288.2-270.2c10.2-9.4 10.2-25.6 0-35L984.25 224.2c-9.6-9-24.8-8.6-34 1L863.25 318c-9.2 9.8-8.6 25.4 1.6 34.4L1046.05 512l-181.2 159.4c-10.2 9-11 24.6-1.6 34.4l87 92.8c9 9.8 24.2 10.2 34 1.2z" fill="#0157fe" p-id="1501"></path></svg>

apps/designer/src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

apps/designer/src/env.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    [key: string]: any;
+  }
+}
+
+declare module global {
+  interface Window {}
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $uploader: any;
+    $reqeust: any;
+    $apis: any;
+    $libs: any;
+  }
+}
+
+export {};

apps/designer/src/main.ts

@@ -0,0 +1,48 @@
+import {
+  createProvider,
+  LocalService,
+  createModules,
+  NodeEnv,
+  autoUpdate,
+  notify,
+  loading,
+  createAdapter,
+  createServiceRequest
+} from '@vtj/web';
+import { createApp } from 'vue';
+import router from './router';
+import App from './App.vue';
+import { name, description } from '../package.json';
+import './style/index.scss';
+
+const app = createApp(App);
+const adapter = createAdapter({ loading, notify });
+const service = new LocalService(createServiceRequest(notify));
+
+// const modules = createModules();
+// console.log('modules', modules);
+const { provider, onReady } = createProvider({
+  nodeEnv: process.env.NODE_ENV as NodeEnv,
+  modules: createModules(),
+  service,
+  adapter,
+  router,
+  dependencies: {
+    Vue: () => import('vue'),
+    VueRouter: () => import('vue-router')
+  },
+  project: {
+    id: name,
+    name: description
+  }
+});
+
+onReady(async () => {
+  app.use(router);
+  app.use(provider);
+  app.mount('#low-code-designer');
+});
+
+if (process.env.NODE_ENV === 'production') {
+  autoUpdate();
+}

apps/designer/src/router/index.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/unauthorized',
+      name: 'Unauthorized',
+      component: () => import('@/views/unauthorized.vue')
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('@/views/not-found.vue')
+    }
+  ]
+});
+
+export default router;

apps/designer/src/style/index.scss

@@ -0,0 +1,11 @@
+@use '@vtj/web/src/index.scss';
+
+html,
+body,
+#app {
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  height: 100%;
+  overflow: hidden;
+}

apps/designer/src/views/not-found.vue

@@ -0,0 +1,10 @@
+<template>
+  <XContainer class="not-found" fit justify="center">
+    <ElEmpty description="找不到页面【404】"></ElEmpty>
+  </XContainer>
+</template>
+<script lang="ts" setup>
+  import { XContainer } from '@vtj/web';
+  import { ElEmpty } from 'element-plus';
+</script>
+<style lang="scss" scoped></style>

apps/designer/src/views/unauthorized.vue

@@ -0,0 +1,10 @@
+<template>
+  <XContainer class="unauthorized" fit justify="center">
+    <ElEmpty description="无权限访问该页面"></ElEmpty>
+  </XContainer>
+</template>
+<script lang="ts" setup>
+import { XContainer } from '@vtj/ui';
+import { ElEmpty } from 'element-plus';
+</script>
+<style lang="scss" scoped></style>