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

package/template-gx-design-thin/src/assets/public_icon/index.less

@@ -0,0 +1,42 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4439814 */
+  src: url('iconfont.eot?t=1712022371050'); /* IE9 */
+  src: url('iconfont.eot?t=1712022371050#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1712022371050') format('woff'),
+  url('iconfont.ttf?t=1712022371050') format('truetype'),
+  url('iconfont.svg?t=1712022371050#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.gx-github:before {
+  content: "\e85a";
+}
+
+.gx-gitee:before {
+  content: "\e616";
+}
+
+.gx-jianjie:before {
+  content: "\e693";
+}
+
+.gx-chanpinwendang:before {
+  content: "\e637";
+}
+
+.gx-a-kuaisukaishi-weixuanzhong3x1:before {
+  content: "\e601";
+}
+
+.gx-jiazaizhong:before {
+  content: "\e73f";
+}
+

package/template-gx-design-thin/src/assets/public_images/nodata.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" p-id="4596" t="1708482291223" version="1.1" viewBox="0 0 1485 1024"><path fill="#d9d9d9" d="M148.994 689.28h19.968a9.984 9.984 0 0 1 0 19.84h-19.968v20.48a9.984 9.984 0 0 1-9.984 9.728 10.112 10.112 0 0 1-10.368-9.728v-20.48h-19.584a9.984 9.984 0 0 1-9.856-9.984 9.856 9.856 0 0 1 9.856-9.856h20.224v-20.096a9.984 9.984 0 0 1 19.84 0v20.096z m1306.624-79.616v-19.968a9.6 9.6 0 0 0-2.944-7.04 10.24 10.24 0 0 0-7.04-2.816 9.984 9.984 0 0 0-9.856 9.856v19.968h-20.096a8.96 8.96 0 0 0-6.912 3.072 9.344 9.344 0 0 0-2.816 6.912 9.984 9.984 0 0 0 9.728 9.984h20.096V649.6a9.856 9.856 0 0 0 9.856 9.856 9.984 9.984 0 0 0 9.984-9.856v-19.968h20.096a9.984 9.984 0 0 0 0-19.968zM736.386 937.856H238.082a19.328 19.328 0 0 1-13.824-5.888 19.84 19.84 0 0 1 13.824-33.92h89.6a80.128 80.128 0 0 1-10.624-39.68V281.6a80 80 0 0 1 23.168-56.192 79.104 79.104 0 0 1 56.064-23.296h59.264v-20.096a79.488 79.488 0 0 1 23.296-56.192 78.464 78.464 0 0 1 56.192-23.424h475.008a79.36 79.36 0 0 1 79.232 79.36v577.28a78.464 78.464 0 0 1-10.624 39.552h109.44a19.968 19.968 0 0 1 0 39.808H950.786v19.968a78.464 78.464 0 0 1-10.496 39.68h10.496a19.712 19.712 0 0 1 19.84 19.84 19.968 19.968 0 0 1-19.84 19.968H846.722a39.424 39.424 0 0 1-6.016 48.384 40.32 40.32 0 0 1-28.032 11.776 39.296 39.296 0 0 1-28.032-11.776z m72.448-39.808h62.976a39.68 39.68 0 0 0 39.424-40.448V280.448a38.4 38.4 0 0 0-38.4-38.4H395.01a38.4 38.4 0 0 0-38.4 38.4V857.6a39.936 39.936 0 0 0 39.424 39.936h300.544l-9.984-10.24a40.064 40.064 0 0 1-10.368-38.4l-18.688-18.688A138.112 138.112 0 0 1 469.89 809.6a139.648 139.648 0 0 1 6.656-189.312 137.984 137.984 0 0 1 188.928-7.04 139.52 139.52 0 0 1 20.096 188.8l19.072 19.072a39.424 39.424 0 0 1 38.4 10.24z m141.952-99.456h59.776a39.808 39.808 0 0 0 39.68-39.808V182.016a39.68 39.68 0 0 0-39.424-39.808H534.914a39.808 39.808 0 0 0-39.424 39.808v19.84h375.552a79.104 79.104 0 0 1 79.616 79.744v516.992zM253.058 67.584h29.184a14.976 14.976 0 1 1 0 29.824h-29.44v29.696a14.976 14.976 0 1 1-29.824 0V97.408h-29.312a14.848 14.848 0 0 1-10.624-4.224 14.976 14.976 0 0 1 10.624-25.6h29.568V38.4a14.976 14.976 0 1 1 29.824 0zM20.354 917.888a19.968 19.968 0 0 1 19.712-19.84h119.04a19.712 19.712 0 0 1 19.712 19.84 19.968 19.968 0 0 1-19.712 19.968H40.066a19.84 19.84 0 0 1-13.824-5.888 19.456 19.456 0 0 1-5.76-14.08z m624.256-128a99.84 99.84 0 0 0 0-140.8 98.816 98.816 0 0 0-140.032 0 99.84 99.84 0 0 0 0 140.8 98.816 98.816 0 0 0 140.032 0z m-208.768-468.48a19.84 19.84 0 0 1 19.712-19.968h217.6a19.968 19.968 0 0 1 0 39.808h-217.6a20.736 20.736 0 0 1-14.08-5.76 20.224 20.224 0 0 1-5.632-14.08z m0 99.328a19.84 19.84 0 0 1 19.712-19.84h317.312a19.968 19.968 0 0 1 0 39.808H455.682a19.712 19.712 0 0 1-19.84-19.968z m0 99.456a19.84 19.84 0 0 1 19.712-19.84h139.008a19.84 19.84 0 0 1 0 39.68H455.81a19.84 19.84 0 0 1-19.968-19.84zM60.034 400.896a59.648 59.648 0 1 1 59.264-59.648 59.392 59.392 0 0 1-59.264 59.648z m0-29.824a29.824 29.824 0 0 0 0-59.648 29.824 29.824 0 0 0 0 59.648z m1227.392-89.6a59.648 59.648 0 1 1 59.264-59.648 59.264 59.264 0 0 1-59.264 59.776z m0-29.824a29.568 29.568 0 0 0 25.6-14.976 30.208 30.208 0 0 0 0-29.824 29.696 29.696 0 1 0-25.6 44.8z" p-id="4597"/></svg>

package/template-gx-design-thin/src/common/global.ts

@@ -0,0 +1,4 @@
+export default {
+  videoAllowType: [ 'mp4', 'webm', 'ogg' ],
+  audioAllowType: [ 'mp3' ],
+}

package/template-gx-design-thin/src/components/GDesign/Result/index.tsx

@@ -0,0 +1,144 @@
+import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import Result403 from '@/assets/error_images/403.png'
+import Result404 from '@/assets/error_images/404.png'
+import ResultCloud from '@/assets/error_images/cloud.png'
+
+import './style.less'
+
+export interface SubInfo {
+  headline: string
+  info: string
+  exceptionImage: string
+}
+
+interface ResultSubInfo {
+  404: SubInfo
+  403: SubInfo
+}
+
+interface ResultState {
+  jumpTime: number
+  oops: string
+  headline: string
+  info: string
+  btn: string
+  timer: number | any
+  exceptionImage: any
+}
+
+const resultSubInfo: ResultSubInfo = {
+  '404': {
+    headline: '当前页面不存在...',
+    info: '请检查您输入的网址是否正确，或点击下面的按钮返回首页。',
+    exceptionImage: Result404
+  },
+  '403': {
+    headline: '您没有操作角色...',
+    info: '当前帐号没有操作角色,请联系管理员。',
+    exceptionImage: Result403
+  }
+}
+
+export default defineComponent({
+  props: {
+    status: {
+      type: String,
+      required: true,
+      default: '404'
+    }
+  },
+  setup(props) {
+    const store = useStore()
+    const router = useRouter()
+
+    const routers = computed(() => store.routes.routes)
+
+    const backRouter = computed(() => (routers.value?.length ? '/' : '/user/login'))
+
+    const state = reactive<ResultState>({
+      jumpTime: 5,
+      oops: '抱歉!',
+      headline: '您没有操作角色...',
+      info: '当前帐号没有操作角色,请联系管理员。',
+      btn: `${routers.value?.length ? '返回首页' : '返回登录页'}`,
+      timer: 0,
+      exceptionImage: Result404
+    })
+
+    const handleBackRouter = () => {
+      router.push({ path: backRouter.value })
+      if (routers.value?.length) {
+        store.tabsRouter.delOthersVisitedRoutes({ path: '/' })
+      } else {
+        store.user.resetPermissions()
+      }
+      clearInterval(state.timer)
+    }
+
+    const timeChange = () => {
+      state.timer = setInterval(() => {
+        if (state.jumpTime) {
+          state.jumpTime--
+        } else {
+          handleBackRouter()
+        }
+      }, 1000)
+    }
+
+    onMounted(() => {
+      timeChange()
+    })
+
+    onBeforeUnmount(() => {
+      clearInterval(state.timer)
+    })
+
+    watch(
+      () => props.status,
+      (val: string) => {
+        Object.keys(resultSubInfo).map((item: string) => {
+          if (item === val) {
+            Object.keys(resultSubInfo[item]).map((el: any) => {
+              state[el] = resultSubInfo[item][el]
+              return el
+            })
+          }
+          return item
+        })
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    )
+
+    return () => (
+      <div class="error-container">
+        <div class="error-content">
+          <a-row gutter={20}>
+            <a-col lg={12} md={12} sm={24} xl={12} xs={24}>
+              <div class="pic-error">
+                <img class="pic-error-parent" src={state.exceptionImage} />
+                <img class={[ 'pic-error-child', 'left' ]} src={ResultCloud} />
+              </div>
+            </a-col>
+            <a-col lg={12} md={12} sm={24} xl={12} xs={24}>
+              <div class="bullshit">
+                <div class="bullshit-oops">{state.oops}</div>
+                <div class="bullshit-headline">{state.headline}</div>
+                <div class="bullshit-info">{state.info}</div>
+                <a class="bullshit-return-home" onClick={() => handleBackRouter()}>
+                  {state.jumpTime}
+                  s
+                  &nbsp;
+                  {state.btn}
+                </a>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+    )
+  }
+})

package/template-gx-design-thin/src/components/GDesign/Result/style.less

@@ -0,0 +1,140 @@
+.error-container {
+  position: relative;
+  height: 100vh;
+
+  .error-content {
+    position: absolute;
+    top: 55%;
+    left: 50%;
+    width: 40vw;
+    height: 400px;
+    transform: translate(-50%, -50%);
+
+    .pic-error {
+      position: relative;
+      float: left;
+      width: 100%;
+      overflow: hidden;
+
+      .pic-error-parent {
+        width: 100%;
+      }
+
+      .pic-error-child {
+        position: absolute;
+
+        &.left {
+          top: 17px;
+          left: 220px;
+          width: 80px;
+          opacity: 0;
+          animation-name: cloudLeft;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-delay: 1s;
+          animation-fill-mode: forwards;
+        }
+
+        @keyframes cloudLeft {
+          0% {
+            top: 17px;
+            left: 220px;
+            opacity: 0;
+          }
+
+          20% {
+            top: 33px;
+            left: 188px;
+            opacity: 1;
+          }
+
+          80% {
+            top: 81px;
+            left: 92px;
+            opacity: 1;
+          }
+
+          100% {
+            top: 97px;
+            left: 60px;
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    .bullshit {
+      position: relative;
+      float: left;
+      width: 300px;
+      padding: 30px 0;
+      overflow: hidden;
+
+      .bullshit-oops {
+        margin-bottom: 20px;
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+
+      .bullshit-headline {
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #222;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+
+      .bullshit-info {
+        margin-bottom: 30px;
+        font-size: 13px;
+        line-height: 21px;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+      }
+
+      .bullshit-return-home {
+        display: block;
+        float: left;
+        width: 110px;
+        height: 36px;
+        font-size: 14px;
+        line-height: 36px;
+        color: #fff;
+        text-align: center;
+        cursor: pointer;
+        background: var(--gx-primary-color);
+        border-radius: 100px;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+    }
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/template-gx-design-thin/src/components/GDesign/utils/index.ts

@@ -0,0 +1,7 @@
+import devWarning from 'ant-design-vue/es/vc-util/devWarning'
+
+export { noteOnce, warning } from 'ant-design-vue/es/vc-util/warning'
+
+export {
+  devWarning
+}

package/template-gx-design-thin/src/components/GlobalLayout/Confirm/index.ts

@@ -0,0 +1,21 @@
+import { createVNode } from 'vue'
+import type { ModalFuncProps } from 'ant-design-vue'
+import { Modal } from 'ant-design-vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+
+export function globalConfirm({
+  className,
+  title,
+  content,
+  onOk
+}: ModalFuncProps & { className?: string }) {
+  Modal.confirm({
+    width: 480,
+    icon: createVNode(ExclamationCircleOutlined),
+    closable: true,
+    title: title || '二次确认',
+    content,
+    wrapClassName: `${className || ''}`,
+    onOk
+  })
+}

package/template-gx-design-thin/src/components/GlobalLayout/Empty/index.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { isBoolean } from '@gx-design-vue/pro-utils'
+
+withDefaults(defineProps<{
+  text?: string | boolean;
+  width?: number;
+}>(), {
+  text: '暂无数据',
+  width: 120
+})
+</script>
+
+<template>
+  <div class="flex-center flex-col">
+    <img :style="{ width: `${width}px` }" src="/src/assets/public_images/nodata.svg" alt="">
+    <span class="relative left-[-5px]" v-if="text">{{ isBoolean(text) ? '暂无数据' : text }}</span>
+  </div>
+</template>

package/template-gx-design-thin/src/components/GlobalLayout/RightContent/index.tsx

@@ -0,0 +1,126 @@
+import { defineComponent } from 'vue'
+import { Avatar, Dropdown, Menu, MenuItem } from 'ant-design-vue'
+import { LogoutOutlined, QuestionCircleOutlined, UserOutlined } from '@ant-design/icons-vue'
+import { useDebounceFn } from '@vueuse/core'
+import ResizeObserver from 'ant-design-vue/es/vc-resize-observer'
+import { useState } from '@gx-design-vue/pro-hooks'
+import { getPrefixCls } from '@gx-design-vue/pro-utils'
+import { useProLayoutContext } from '@gx-design-vue/pro-layout'
+import { typeViteEnv } from '@/utils/env'
+import { useStyle } from './style'
+
+export default defineComponent({
+  name: 'GlobalRightContent',
+  setup(_) {
+    const store = useStore()
+    const router = useRouter()
+    const { theme, layout } = useProLayoutContext()
+
+    const prefixCls = getPrefixCls({
+      suffixCls: 'global-header',
+      isPor: true
+    })
+
+    const [ logoutLoading, changeLoading ] = useState(false)
+    const { wrapSSR, hashId } = useStyle(prefixCls)
+
+    const layoutSide = computed(() => layout.value === 'side' || layout.value === 'simple')
+    const hTheme = computed(() => (layoutSide.value && 'light') || theme.value)
+
+    const [ rightSize, setRightSize ] = useState<number | string>('auto')
+
+    /** 减少一下渲染的次数 */
+    const setRightSizeDebounceFn = useDebounceFn(async (width: number) => {
+      setRightSize(width)
+    }, 160)
+
+    const handleLogout = () => {
+      changeLoading(true)
+      store.user.userLogut().then((_) => {}).finally(() => {
+        router.push({ path: '/user' })
+        changeLoading(false)
+      })
+    }
+
+    return () => {
+      return wrapSSR(
+        <div
+          class={`${prefixCls}-right-content ${hTheme.value} ${hashId.value}`.trim()}
+          style={{
+            minWidth: rightSize.value,
+            height: '100%'
+          }}
+        >
+          <div
+            style={{
+              height: '100%'
+            }}
+          >
+            <ResizeObserver
+              key="resize-observer"
+              onResize={({ width }) => {
+                setRightSizeDebounceFn(width)
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  height: '100%',
+                  justifyContent: 'flex-end'
+                }}
+              >
+                <div class={`${prefixCls}-header-actions ${hashId.value}`.trim()}>
+                  <div class={`${prefixCls}-header-actions-item ${hashId.value}`.trim()}>
+                    <div class="flex leading-26px">
+                      <QuestionCircleOutlined onClick={() => window.open(typeViteEnv('VITE_HOME_PAGE_DOC'))} />
+                    </div>
+                  </div>
+                  <div class={`${prefixCls}-header-actions-item ${hashId.value}`.trim()}>
+                    <div class="flex leading-26px" onClick={() => window.open(typeViteEnv('VITE_GITHUB_PAGE'))}>
+                      <i class="iconfont gx-github !text-18px text-hex-main" />
+                    </div>
+                  </div>
+                  <div class={`${prefixCls}-header-actions-item ${hashId.value}`.trim()}>
+                    <div class="flex leading-26px" onClick={() => window.open(typeViteEnv('VITE_GITEE_PAGE'))}>
+                      <i class="iconfont gx-gitee text-hex-C71D23" />
+                    </div>
+                  </div>
+                  <div class={`${prefixCls}-header-actions-avatar ${hashId.value}`.trim()}>
+                    <Dropdown
+                      overlay={(
+                        <Menu>
+                          <MenuItem
+                            key="logout"
+                            icon={<LogoutOutlined />}
+                            onClick={() => handleLogout()}
+                            disabled={logoutLoading.value}
+                          >
+                            退出登录
+                          </MenuItem>
+                        </Menu>
+                      )}
+                    >
+                      <div>
+                        <Avatar
+                          size={28}
+                          icon={<UserOutlined />}
+                          src={store.user.userInfo.avatar}
+                        />
+                        <div style={{ marginInlineStart: '8px' }}>
+                          <span class="anticon">
+                            {store.user.userInfo.nickName}
+                          </span>
+                        </div>
+                      </div>
+                    </Dropdown>
+                  </div>
+                </div>
+              </div>
+            </ResizeObserver>
+          </div>
+        </div>
+      )
+    }
+  }
+})

package/template-gx-design-thin/src/components/GlobalLayout/RightContent/style.ts

@@ -0,0 +1,77 @@
+import type { CSSObject } from 'ant-design-vue'
+import type { GenerateStyle } from 'ant-design-vue/es/theme/internal'
+import type { ProAliasToken } from '@gx-design-vue/pro-provider'
+import { mergeToken, setAlpha, useStyle as useProStyle } from '@gx-design-vue/pro-provider'
+
+const genStyle: GenerateStyle<ProAliasToken> = (token): CSSObject => {
+  return {
+    [`${token.componentCls}`]: {
+      [`${token.componentCls}-right-content.dark`]: {
+        [`${token.componentCls}-header-actions-item`]: {
+          '.iconfont,.anticon': {
+            color: token.colorWhite
+          }
+        },
+        [`${token.componentCls}-header-actions-avatar`]: {
+          '> div': {
+            color: token.colorWhite
+          }
+        },
+      },
+      '&-header-actions': {
+        display: 'flex',
+        height: '100%',
+        '&-item': {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingBlock: 0,
+          paddingInline: 2,
+          color: token.colorTextTertiary,
+          fontSize: '16px',
+          cursor: 'pointer',
+          borderRadius: token.borderRadius,
+
+          '> *': {
+            paddingInline: 6,
+            paddingBlock: 6,
+            borderRadius: token.borderRadius,
+            '&:hover': {
+              backgroundColor: setAlpha(token.colorTextBase, 0.03)
+            }
+          }
+        },
+        '&-avatar': {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingInlineStart: token.padding,
+          paddingInlineEnd: token.padding,
+          cursor: 'pointer',
+          color: token.colorTextTertiary,
+          '> div': {
+            height: '44px',
+            color: token.colorTextTertiary,
+            paddingInline: 8,
+            paddingBlock: 8,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            lineHeight: '44px',
+            borderRadius: token.borderRadius,
+            '&:hover': {
+              backgroundColor: setAlpha(token.colorTextBase, 0.03)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+export function useStyle(componentCls: string) {
+  return useProStyle('RightContent', (token) => {
+    const formTable = mergeToken<ProAliasToken>(token)
+    return [ genStyle(formTable) ]
+  }, componentCls)
+}

package/template-gx-design-thin/src/components/GlobalLayout/Spin/index.tsx

@@ -0,0 +1,30 @@
+import { defineComponent, h } from 'vue'
+import { spinProps } from 'ant-design-vue/es/spin'
+import { Spin } from 'ant-design-vue'
+import { useProAppContext } from '@gx-design-vue/pro-app'
+
+export default defineComponent({
+  name: 'GSpin',
+  inheritAttrs: true,
+  props: {
+    iconStyle: Object as VuePropType<CSSProperties>,
+    ...spinProps()
+  },
+  setup(props, { slots, attrs }) {
+    const { indicator } = useProAppContext()
+
+    return () => {
+      const indicatorRender = indicator?.value ? h(indicator?.value as any, {
+        style: props.iconStyle
+      }) : undefined
+      return (
+        <Spin
+          class={attrs?.class}
+          {...props}
+          indicator={props.indicator || indicatorRender}
+          v-slots={slots}
+        />
+      )
+    }
+  }
+})

package/template-gx-design-thin/src/components/PageLoading/index.tsx

@@ -0,0 +1,51 @@
+import { defineComponent, reactive } from 'vue'
+import type { SpinProps } from 'ant-design-vue'
+import { Spin } from 'ant-design-vue'
+import { useProAppContext } from '@gx-design-vue/pro-app'
+
+export default defineComponent({
+  name: 'GPageLoading',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    tip: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String as VuePropType<SpinProps['size']>,
+      default: 'large'
+    }
+  },
+  setup(props) {
+    const { indicator } = useProAppContext()
+
+    const style = reactive<CSSProperties>({
+      textAlign: 'center',
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 0
+    })
+    const spinStyle = reactive({
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      transform: 'translate(-50%, -50%)'
+    })
+
+    return () => (
+      <>
+        {props.loading ? (
+          <div style={style} class="gx-admin-page-loading">
+            <Spin size={props.size} style={spinStyle} tip={props.tip} indicator={indicator?.value} />
+          </div>
+        ) : null}
+      </>
+    )
+  }
+})

package/template-gx-design-thin/src/components/index.ts

@@ -0,0 +1,6 @@
+// gx-admin-组件
+import PageLoading from './PageLoading'
+
+export {
+  PageLoading,
+}