@gx-design-vue/create-gx-cli 0.1.10 → 0.1.11

package/template-gx-design-thin/src/design/normalize.less

@@ -0,0 +1,391 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    vertical-align: baseline;
+    border: 0;
+    outline: 0;
+  }
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+canvas {
+  display: block;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+  border-bottom: none;
+  /* 1 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  /* 2 */
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  color: inherit;
+  /* 2 */
+  white-space: normal;
+  /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

package/template-gx-design-thin/src/design/root.less

@@ -0,0 +1,3 @@
+:root {
+  --gx-primary-color: transparent;
+}

package/template-gx-design-thin/src/hooks/core/index.ts

@@ -0,0 +1,3 @@
+import useRequest from './useRequest'
+
+export { useRequest }

package/template-gx-design-thin/src/hooks/core/useRequest/index.ts

@@ -0,0 +1,118 @@
+import type { MaybeRef, Ref, UnwrapRef, WatchSource } from 'vue'
+import { computed, isReactive, isRef, reactive, ref, watch } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { useThrottleFn } from '@vueuse/core'
+import { useState } from '@gx-design-vue/pro-hooks'
+import type { CancelOptions, GAxiosOptions } from '@/utils/request/typings'
+
+type DefaultToT<T, R> = R extends undefined ? T : R
+
+function useRequest<T, P = any, R = undefined, >(
+  service: (opt: P, config?: Partial<GAxiosOptions>) => Promise<ResponseResult<T>>,
+  options: {
+    params?: MaybeRef<P>;
+    stopWatchParams?: MaybeRef<boolean>;
+    defaultData?: DefaultToT<T, R>;
+    requestConfig?: Partial<GAxiosOptions>;
+    manual?: boolean;
+    defaultLoading?: boolean;
+    ready?: Ref<boolean>;
+    onBefore?: (params: P) => void;
+    onSuccess?: (res: T) => void;
+    onAfterMutateData?: (data: T) => Promise<DefaultToT<T, R>> | DefaultToT<T, R>;
+    debounceInterval?: number;
+    refreshDeps?: WatchSource[];
+    refreshDepsAction?: () => Promise<any>;
+  } = {}
+) {
+  const [ loading, setLoading ] = useState(!!options.defaultLoading)
+
+  const data: Ref<UnwrapRef<DefaultToT<T, R>>> = ref(options?.defaultData)
+
+  const state = reactive<{ params: MaybeRef<P> }>({
+    params: (isRef(options.params) ? options.params?.value : options.params) || {} as P
+  })
+
+  const requestCancel: Partial<CancelOptions> = {
+    cancel: null,
+    cancelAll: null
+  }
+
+  const ready = computed(() =>
+    !isRef(options?.ready) || options?.ready?.value === undefined ? true : options?.ready?.value)
+
+  const stopWatchParams = computed(() =>
+    isRef(options?.stopWatchParams) ? options?.stopWatchParams?.value : options?.stopWatchParams)
+
+  const mergeParams = (opt?: P) => Object.assign(
+    state.params,
+    {
+      ...(opt || {}), ...((isRef(options.params)
+        ? options.params?.value as P
+        : options.params) || {})
+    }
+  ) as UnwrapRef<P>
+
+  const query = async (opt?: P) => {
+    setLoading(true)
+    state.params = mergeParams()
+    options.onBefore && options.onBefore?.(unref(state.params) as P)
+    const requestConfig: Partial<GAxiosOptions> = {
+      ...(options.requestConfig || {
+        cancelCallBackHook: (cancelOptions) => {
+          Object.assign(requestCancel, cancelOptions)
+        }
+      })
+    }
+    const response: ResponseResult<T> = await service(mergeParams(opt) as P, requestConfig)
+    if (response) {
+      data.value = options?.onAfterMutateData
+        ? await options?.onAfterMutateData?.(cloneDeep(response.data))
+        : cloneDeep(response.data) as any
+
+      options.onSuccess && options.onSuccess?.(response.data)
+    }
+
+    setLoading(false)
+  }
+
+  const run = useThrottleFn<(opt?: P) => Promise<void>>(query, options.debounceInterval || 50)
+
+  const refresh = () => run()
+
+  if (!options.manual)
+    run()
+
+  if (options.refreshDeps?.length) {
+    watch(options.refreshDeps, () => {
+      if (options.refreshDepsAction) {
+        options?.refreshDepsAction()
+      } else {
+        run()
+      }
+    }, {
+      deep: true
+    })
+  }
+
+  if ((isReactive(options.params) || isRef(options.params))) {
+    watch(() => isRef(options.params) ? options.params?.value : options.params, () => {
+      if (!stopWatchParams.value)
+        query()
+    }, { deep: true })
+  }
+
+  watch(() => ready.value, val => val && run())
+
+  return {
+    run,
+    refresh,
+    data,
+    loading,
+    params: computed(() => state.params),
+    cancel: requestCancel.cancel,
+    cancelAll: requestCancel.cancelAll
+  }
+}
+
+export default useRequest

package/template-gx-design-thin/src/hooks/event/index.ts

@@ -0,0 +1,3 @@
+import useClipboard from './useClipboard'
+
+export { useClipboard }

package/template-gx-design-thin/src/hooks/event/useClipboard.ts

@@ -0,0 +1,15 @@
+import { watchEffect } from 'vue'
+import { useClipboard as useClipboardVue } from '@vueuse/core'
+import { message } from 'ant-design-vue'
+
+export default function useClipboard(msg?: string) {
+  const { text, copy, copied } = useClipboardVue()
+
+  watchEffect(() => {
+    if (copied.value && msg && text.value) {
+      message.success(msg)
+    }
+  })
+
+  return { copy, copied, text }
+}

package/template-gx-design-thin/src/hooks/web/index.ts

@@ -0,0 +1,5 @@
+import useThemeStyle from './useThemeStyle'
+
+export {
+  useThemeStyle
+}

package/template-gx-design-thin/src/hooks/web/useThemeStyle.ts

@@ -0,0 +1,16 @@
+import type { ProAliasToken } from '@gx-design-vue/pro-provider'
+import { useProConfigContext } from '@gx-design-vue/pro-provider'
+
+export default function (options: Record<keyof CSSObject, keyof ProAliasToken>) {
+  const { token } = useProConfigContext()
+
+  const styleRef = reactive({})
+
+  watchEffect(() => {
+    for (const key in options) {
+      styleRef[key] = token.value[options[key]]
+    }
+  })
+
+  return styleRef
+}

package/template-gx-design-thin/src/layout/BasicLayout.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { isFunction, isString, merge } from '@gx-design-vue/pro-utils'
+import type { BaseLayoutDesignToken, ThemeConfig } from '@gx-design-vue/pro-provider'
+import type { AppRouteModule, BasicLayoutProps } from '@gx-design-vue/pro-layout'
+import {
+  GProLayout,
+  SettingDrawer,
+  clearMenuItem,
+  getMatchedList,
+  getMenuData,
+  getMenuFirstLastChildPath,
+  hanlePathKey,
+} from '@gx-design-vue/pro-layout'
+import RightContent from '@/components/GlobalLayout/RightContent'
+import ProContent from './ContentView.vue'
+
+const { global } = useStore()
+
+const router = useRouter()
+
+const reloadStatus = ref(true)
+
+const routeData: AppRouteModule[] = router.getRoutes() as any
+
+const menuState = reactive<Pick<BasicLayoutProps, 'menuData' | 'levelMenuData'>>({
+  menuData: [],
+  levelMenuData: []
+})
+
+const baseState: Partial<BasicLayoutProps> = reactive({
+  selectedKeys: [],
+  openKeys: [],
+  collapsed: false
+})
+
+const matchedMenu = computed(() => getMatchedList(
+  menuState.levelMenuData as AppRouteModule[] || [],
+  hanlePathKey(router.currentRoute.value as AppRouteModule)
+))
+
+const breadcrumbRouters = computed(() => {
+  return matchedMenu.value.map((menuItem: AppRouteModule) => {
+    const path = getMenuFirstLastChildPath(menuItem.meta?.hideChildrenInMenu ? [] : menuItem.children || [])
+    return {
+      path: path ? isString(menuItem.redirect) ? menuItem.redirect as string : isFunction(menuItem.redirect)
+        ? (menuItem.redirect as any)?.() as string
+        : '' || menuItem.path : '',
+      breadcrumbName: menuItem.meta?.title || ''
+    }
+  })
+})
+
+const handleMenuData = () => {
+  const menuInfos = getMenuData(clearMenuItem(routeData))
+  if (router.currentRoute?.value?.meta?.hideMenu) {
+    menuState.menuData = []
+    menuState.levelMenuData = []
+  } else {
+    menuState.menuData = menuInfos.menuData
+    menuState.levelMenuData = menuInfos.levelMenuData
+  }
+}
+
+watch(
+  () => router.currentRoute.value,
+  (val) => {
+    if (val)
+      handleMenuData()
+  },
+  { deep: true, immediate: true }
+)
+
+watchEffect(() => {
+  if (router.currentRoute.value) {
+    baseState.selectedKeys = matchedMenu.value.map(item => item.path)
+    baseState.openKeys = matchedMenu.value.filter(item => item.path !== router.currentRoute.value.path)
+      .map(item => item.path)
+  }
+})
+
+const handleReload = () => {
+  reloadStatus.value = false
+  setTimeout(() => {
+    reloadStatus.value = true
+  }, 200)
+}
+
+const changeTabs = (_routers: any) => {
+  // console.log(_routers)
+}
+
+const changeTheme = (newVal: ThemeConfig) => {
+  global.globalLayout = merge(global.globalLayout, { ...newVal })
+}
+
+const changeLayoutTheme = (newVal: BaseLayoutDesignToken) => {
+  global.globalLayout.token = merge(global.globalLayout.token, { ...newVal })
+}
+</script>
+
+<template>
+  <GProLayout
+    v-model:collapsed="baseState.collapsed"
+    v-model:selectedKeys="baseState.selectedKeys"
+    v-model:openKeys="baseState.openKeys"
+    v-bind="global.globalLayout as BasicLayoutProps"
+    :breadcrumb="{ routes: breadcrumbRouters }"
+    :menu-data="menuState.menuData as AppRouteModule[]"
+    @changeTabs="changeTabs"
+    @reloadPage="handleReload"
+    @menuHeaderClick="() => router.push('/')"
+  >
+    <template v-if="global.globalLayout.layout === 'wide'" #menuExtraRender>
+      <div class="text-center"> 额外元素</div>
+    </template>
+    <template #rightContentRender>
+      <RightContent />
+    </template>
+    <ProContent :animate="global.globalLayout.animate" :reloadStatus="reloadStatus" />
+    <SettingDrawer :settings="global.globalLayout" @change="changeTheme" @changeLayout="changeLayoutTheme" weakmode show-progress />
+  </GProLayout>
+</template>

package/template-gx-design-thin/src/layout/BlankLayout.vue

@@ -0,0 +1,5 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <component :is="Component" />
+  </router-view>
+</template>