create-bubbles 0.1.20 → 0.1.23

package/template-vp-vue-eslint-vapor/src/hooks/chart/useEcharts.ts

@@ -0,0 +1,65 @@
+import type { EChartsOption } from "echarts";
+
+import type { ShallowRef } from "vue";
+
+import { debounce } from "radashi";
+
+import echarts from "./lib";
+
+type setOptionsType = (options: EChartsOption, clear?: boolean) => void;
+
+export function useECharts(
+  elRef: Ref<HTMLDivElement> | Readonly<ShallowRef<HTMLDivElement | null>>,
+) {
+  let chartInstance: echarts.ECharts | null = null;
+  let resizeObserver: ResizeObserver | undefined;
+
+  const resize = () => {
+    chartInstance?.resize();
+  };
+
+  const initCharts = () => {
+    if (!elRef) return;
+    const el = unref(elRef);
+    if (!el) return;
+
+    resizeObserver = new ResizeObserver(
+      debounce(
+        {
+          delay: 100,
+        },
+        resize,
+      ),
+    );
+    resizeObserver.observe(el);
+
+    chartInstance = echarts.init(el);
+  };
+
+  const setOptions: setOptionsType = (options, clear = true) => {
+    if (!chartInstance) {
+      initCharts();
+      if (!chartInstance) return;
+    }
+    clear && chartInstance?.clear();
+    chartInstance?.setOption(options);
+  };
+
+  const getInstance: () => echarts.ECharts | null = () => {
+    if (!chartInstance) initCharts();
+    return chartInstance;
+  };
+
+  onUnmounted(() => {
+    chartInstance?.dispose();
+    resizeObserver?.disconnect();
+    resizeObserver = undefined;
+  });
+
+  return {
+    setOptions,
+    resize,
+    echarts,
+    getInstance,
+  };
+}

package/template-vp-vue-eslint-vapor/src/layout/default/header/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Avatar, Dropdown } from "antdv-next";
+import { defineComponent, h } from "vue";
+
+import { useUserStoreWithOut } from "@/store/modules/user";
+
+const userStore = useUserStoreWithOut();
+const router = useRouter();
+
+function handleMenuClick({ key }: { key: string }) {
+  if (key === "logout") {
+    userStore.$reset();
+    router.push("/login");
+  }
+}
+
+const dropdownItems = [{ key: "logout", label: "退出登录" }];
+
+const VdomUserDropdown = defineComponent({
+  name: "VdomUserDropdown",
+  setup() {
+    return () =>
+      h(
+        Dropdown,
+        {
+          trigger: ["click"],
+          menu: {
+            items: dropdownItems,
+          },
+          onMenuClick: handleMenuClick,
+        },
+        {
+          default: () =>
+            h("div", { class: "flex-center gap-2 cursor-pointer" }, [
+              h(
+                Avatar,
+                {
+                  size: 32,
+                  src: userStore.avatar,
+                },
+                {
+                  default: () => userStore.name?.charAt(0).toUpperCase(),
+                },
+              ),
+              h("span", { class: "text-sm" }, userStore.name),
+            ]),
+        },
+      );
+  },
+});
+</script>
+
+<template>
+  <div class="flex gap-3 items-center">
+    <VdomUserDropdown />
+  </div>
+</template>

package/template-vp-vue-eslint-vapor/src/layout/default/index.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import { Menu as AntMenu } from "antdv-next";
+import type { MenuProps } from "antdv-next";
+
+import type { MenuRouteRecordRawType } from "@/router/interface";
+
+import SvgIcon from "@/components/Icon/svg-icon.vue";
+
+import { menuRoutes } from "@/router/modules";
+
+import Header from "./header/index.vue";
+
+const route = useRoute();
+const router = useRouter();
+
+const collapsed = ref(false);
+
+const VaporCompatibleMenu = defineComponent({
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    return () => h(AntMenu, attrs);
+  },
+});
+
+const selectedKeys = computed(() => {
+  const matched = route.matched.map((item) => item.name);
+  return matched.filter(Boolean) as string[];
+});
+
+const openKeys = ref<string[]>([]);
+
+watchEffect(() => {
+  const matched = route.matched.map((item) => item.name).filter(Boolean) as string[];
+  if (matched.length > 1) {
+    openKeys.value = [matched[0]];
+  }
+});
+
+function handleMenuClick({ key }: { key: string }) {
+  router.push({ name: key });
+}
+
+function renderIcon(icon?: string) {
+  if (!icon) return null;
+  const isSvgIcon = icon.startsWith("svg-");
+  if (isSvgIcon) {
+    return h(SvgIcon, {
+      icon: icon.replace("svg-", ""),
+      style: { fontSize: "18px" },
+    });
+  }
+  return null;
+}
+
+function getMenuItems(routes: MenuRouteRecordRawType[]): NonNullable<MenuProps["items"]> {
+  return routes
+    .filter((item) => !item.meta?.hideInMenu)
+    .map((item) => {
+      const hasChildren = item.children && item.children.length > 0;
+      if (hasChildren) {
+        return {
+          key: item.name as string,
+          label: item.meta?.title ?? String(item.name ?? ""),
+          icon: renderIcon(item.meta?.icon),
+          children: getMenuItems(item.children as MenuRouteRecordRawType[]),
+        };
+      }
+      return {
+        key: item.name as string,
+        label: item.meta?.title ?? String(item.name ?? ""),
+        icon: renderIcon(item.meta?.icon),
+      };
+    });
+}
+
+const menuItems = computed(() => getMenuItems(menuRoutes));
+</script>
+
+<template>
+  <ALayout class="h-screen">
+    <ALayoutSider
+      v-model:collapsed="collapsed"
+      :trigger="null"
+      collapsible
+      :width="220"
+      class="layout-sider"
+    >
+      <div class="logo flex-center gap-2 h-[var(--header-height)]">
+        <SvgIcon icon="logo" class="text-2xl" />
+        <span v-show="!collapsed" class="text-lg text-white font-bold"> Vue Template </span>
+      </div>
+      <VaporCompatibleMenu
+        v-model:open-keys="openKeys"
+        :selected-keys="selectedKeys"
+        :items="menuItems"
+        theme="dark"
+        mode="inline"
+        @click="handleMenuClick"
+      />
+    </ALayoutSider>
+
+    <ALayout>
+      <ALayoutHeader class="layout-header px-4 flex items-center justify-between">
+        <div class="flex gap-3 items-center">
+          <AButton type="text" class="flex-center" @click="collapsed = !collapsed">
+            <SvgIcon :icon="collapsed ? 'menu-unfold' : 'menu-fold'" style="font-size: 18px" />
+          </AButton>
+        </div>
+        <Header />
+      </ALayoutHeader>
+
+      <ALayoutContent class="layout-content p-4 overflow-auto">
+        <RouterView />
+      </ALayoutContent>
+    </ALayout>
+  </ALayout>
+</template>
+
+<style lang="scss" scoped>
+.layout-sider {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: auto;
+}
+
+.layout-header {
+  height: var(--header-height);
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0;
+}
+
+.layout-content {
+  min-height: calc(100vh - var(--header-height));
+  background: #f5f5f5;
+}
+</style>

package/template-vp-vue-eslint-vapor/src/main.ts

@@ -0,0 +1,19 @@
+import type { VaporComponent } from 'vue'
+import { createVaporApp, vaporInteropPlugin } from 'vue'
+
+import App from './App.vue'
+import { setupRouter } from './router'
+import { setupStore } from './store'
+
+import 'virtual:svg-icons-register'
+
+import '@/styles/index.scss'
+import 'virtual:uno.css'
+
+// vue-tsc 3.3.8 still types SFC imports as VDOM components in global Vapor mode.
+const app = createVaporApp(App as unknown as VaporComponent)
+app.use(vaporInteropPlugin)
+setupRouter(app)
+setupStore(app)
+
+app.mount('#app')

package/template-vp-vue-eslint-vapor/src/router/guard/index.ts

@@ -0,0 +1,7 @@
+import type { Router } from "vue-router";
+
+import { createPermissionGuard } from "./permissionGuard";
+
+export function setupGuard(router: Router) {
+  createPermissionGuard(router);
+}

package/{template-vue-vite-eslint → template-vp-vue-eslint-vapor}/src/router/guard/permissionGuard.ts

@@ -3,11 +3,11 @@ import type { Router } from 'vue-router'
 import NProgress from 'nprogress'
 
 export function createPermissionGuard(router: Router) {
-  router.beforeEach((_to, _from, next) => {
+  router.beforeEach(() => {
     NProgress.start()
-    next()
   })
-  router.afterEach((_to, _from) => {
+
+  router.afterEach(() => {
     NProgress.done()
   })
 }

package/template-vp-vue-eslint-vapor/src/router/index.ts

@@ -0,0 +1,18 @@
+import type { App } from "vue";
+
+import { createRouter, createWebHistory } from "vue-router";
+
+import { setupGuard } from "./guard";
+import { routes } from "./modules";
+
+export const router = createRouter({
+  history: createWebHistory(import.meta.env.PUBLIC_PATH),
+  routes,
+  strict: true,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+});
+
+export function setupRouter(app: App) {
+  setupGuard(router);
+  app.use(router);
+}

package/template-vp-vue-eslint-vapor/src/router/interface.ts

@@ -0,0 +1,9 @@
+import type { RouteRecordRaw } from "vue-router";
+
+export type MenuRouteRecordRawType = RouteRecordRaw & {
+  meta?: {
+    title?: string;
+    icon?: string;
+    hideInMenu?: boolean;
+  };
+};

package/template-vp-vue-eslint-vapor/src/router/modules/index.ts

@@ -0,0 +1,33 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+import type { MenuRouteRecordRawType } from '../interface'
+
+export const menuRoutes: MenuRouteRecordRawType[] = [
+  {
+    path: '/home',
+    name: 'Home',
+    meta: { title: '首页概览', icon: 'svg-home' },
+    component: () => import('@/views/home/index.vue'),
+  },
+]
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'layout',
+    component: () => import('@/layout/default/index.vue'),
+    children: [
+      {
+        path: '/',
+        redirect: '/home',
+      },
+      ...menuRoutes,
+    ],
+  },
+  {
+    path: '/login',
+    name: 'login',
+    meta: { title: '登录' },
+    component: () => import('@/views/login/index.vue'),
+  },
+]

package/template-vp-vue-eslint-vapor/src/store/index.ts

@@ -0,0 +1,11 @@
+import type { App } from "vue";
+
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+export const store = createPinia();
+store.use(piniaPluginPersistedstate);
+
+export function setupStore(app: App) {
+  app.use(store);
+}

package/template-vp-vue-eslint-vapor/src/store/modules/user.ts

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+import { store } from "..";
+
+export const useUserStore = defineStore("user", {
+  state: () => {
+    return {
+      name: "admin",
+      token: "admin",
+      avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
+    };
+  },
+});
+
+export function useUserStoreWithOut() {
+  return useUserStore(store);
+}

package/template-vp-vue-eslint-vapor/src/styles/index.scss

@@ -0,0 +1,29 @@
+@use "./font.scss";
+@use "./variables.scss";
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  font-family: "SourceHanSansCN";
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+//弹窗的标题样式
+.dialog-title {
+  border-left: 3px solid #22b5ffff;
+  padding-left: 10px;
+  height: 16px;
+  color: #ffffffb8;
+  font: 700;
+  font-size: 16px;
+  line-height: 16px;
+}

package/template-vp-vue-eslint-vapor/src/styles/variables.scss

@@ -0,0 +1,3 @@
+:root {
+  --header-height: 80px;
+}

package/template-vp-vue-eslint-vapor/src/types/vite-env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+// vite-plugin-svg-icons 类型声明
+declare module "virtual:svg-icons-register" {
+  const register: () => void;
+  export default register;
+}

package/template-vp-vue-eslint-vapor/src/utils/env.ts

@@ -0,0 +1,11 @@
+/**
+ * 通过一个文件导出所有的环境变量这样方便统一修改
+ * @returns
+ */
+export const envVariables = {
+  PORT: import.meta.env.VITE_PORT,
+  PATH: import.meta.env.VITE_PATH,
+  APP_NAME: import.meta.env.VITE_APP_NAME,
+  /** 后端接口前缀 */
+  API_AFFIX: import.meta.env.VITE_API_AFFIX,
+};