create-bubbles 0.1.20 → 0.1.22

package/template-vue-vp-eslint/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-vue-vp-eslint/src/layout/default/header/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+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: '退出登录' },
+]
+</script>
+
+<template>
+  <div class="flex gap-3 items-center">
+    <ADropdown :menu="{ items: dropdownItems, onClick: handleMenuClick }">
+      <div class="flex-center gap-2 cursor-pointer">
+        <AAvatar :size="32" :src="userStore.avatar">
+          {{ userStore.name?.charAt(0).toUpperCase() }}
+        </AAvatar>
+        <span class="text-sm">{{ userStore.name }}</span>
+      </div>
+    </ADropdown>
+  </div>
+</template>

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

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+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 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[]) {
+  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 ?? item.name,
+          icon: renderIcon(item.meta?.icon),
+          children: getMenuItems(item.children as MenuRouteRecordRawType[]),
+        }
+      }
+      return {
+        key: item.name as string,
+        label: item.meta?.title ?? 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>
+      <AMenu
+        v-model:selected-keys="selectedKeys"
+        v-model:open-keys="openKeys"
+        :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-vue-vp-eslint/src/main.ts

@@ -0,0 +1,16 @@
+import { createApp } 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";
+
+const app = createApp(App);
+setupRouter(app);
+setupStore(app);
+
+app.mount("#app");

package/template-vue-vp-eslint/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-vue-vp-eslint}/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-vue-vp-eslint/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-vue-vp-eslint/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-vue-vp-eslint/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-vue-vp-eslint/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-vue-vp-eslint/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-vue-vp-eslint/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-vue-vp-eslint/src/styles/variables.scss

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

package/template-vue-vp-eslint/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-vue-vp-eslint/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,
+};