chore: 脚手架

apps/web-antd/src/views/_core/authentication/code-login.vue

@@ -16,7 +16,6 @@ const loading = ref(false);
  * @param values 登录表单数据
  */
 async function handleLogin(values: LoginCodeParams) {
-  // eslint-disable-next-line no-console
   console.log(values);
 }
 </script>

apps/web-antd/src/views/_core/authentication/forget-password.vue

@@ -9,7 +9,6 @@ defineOptions({ name: 'ForgetPassword' });
 const loading = ref(false);
 
 function handleSubmit(value: string) {
-  // eslint-disable-next-line no-console
   console.log('reset email:', value);
 }
 </script>

apps/web-antd/src/views/_core/authentication/login.vue

@@ -1,18 +1,91 @@
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
 import { AuthenticationLogin } from '@vben/common-ui';
 
+import { omit } from 'lodash-es';
+
+import { tenantList, type TenantResp } from '#/api';
+import { captchaImage, type CaptchaResponse } from '#/api/core/captcha';
 import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
+
+const captchaInfo = ref<CaptchaResponse>({
+  captchaEnabled: false,
+  img: '',
+  uuid: '',
+});
+
+async function loadCaptcha() {
+  const resp = await captchaImage();
+  if (resp.captchaEnabled) {
+    resp.img = `data:image/png;base64,${resp.img}`;
+  }
+  captchaInfo.value = resp;
+}
+
+const tenantInfo = ref<TenantResp>({
+  tenantEnabled: false,
+  voList: [],
+});
+
+async function loadTenant() {
+  const resp = await tenantList();
+  tenantInfo.value = resp;
+}
+
+onMounted(() => {
+  loadCaptcha();
+  loadTenant();
+});
+
+interface LoginForm {
+  code?: string;
+  grantType: string;
+  password: string;
+  tenantId: string;
+  username: string;
+}
+
+const loginRef = ref<InstanceType<typeof AuthenticationLogin>>();
+async function handleAccountLogin(values: LoginForm) {
+  try {
+    const requestParam: any = omit(values, ['code']);
+    // 验证码
+    if (captchaInfo.value.captchaEnabled) {
+      requestParam.code = values.code;
+      requestParam.uuid = captchaInfo.value.uuid;
+    }
+    // 登录
+    await authStore.authLogin(requestParam);
+  } catch (error) {
+    console.error(error);
+    // 处理验证码错误
+    if (error instanceof Error) {
+      const message = error.message;
+      if (message.includes('captcha') || message.includes('验证码')) {
+        // 刷新验证码
+        loginRef.value?.resetCaptcha();
+      }
+    }
+  }
+}
 </script>
 
 <template>
   <AuthenticationLogin
+    ref="loginRef"
+    :captcha-base64="captchaInfo.img"
     :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
-    @submit="authStore.authLogin"
+    :tenant-options="tenantInfo.voList"
+    :use-captcha="captchaInfo.captchaEnabled"
+    :use-tenant="tenantInfo.tenantEnabled"
+    password-placeholder="密码"
+    username-placeholder="用户名"
+    @captcha-click="loadCaptcha"
+    @submit="handleAccountLogin"
   />
 </template>

apps/web-antd/src/views/_core/authentication/register.vue

@@ -11,7 +11,6 @@ defineOptions({ name: 'Register' });
 const loading = ref(false);
 
 function handleSubmit(value: LoginAndRegisterParams) {
-  // eslint-disable-next-line no-console
   console.log('register submit:', value);
 }
 </script>

apps/web-antd/src/views/common.tsx

@@ -0,0 +1,18 @@
+import { defineComponent } from 'vue';
+
+import { Fallback } from '@vben/common-ui';
+
+export default defineComponent({
+  name: 'CommonSkeleton',
+  setup() {
+    return () => (
+      <div class="flex h-[600px] w-full items-center justify-center">
+        <Fallback
+          description="等待官方组件中"
+          status="coming-soon"
+          title="Coming Soon"
+        />
+      </div>
+    );
+  },
+});

apps/web-antd/src/views/demo/demo/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/demo/tree/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/demos/access/button-control.vue

@@ -41,11 +41,9 @@ async function changeAccount(role: string) {
 
   const account = accounts[role];
   resetAllStores();
-  if (account) {
-    await authStore.authLogin(account, async () => {
-      router.go(0);
-    });
-  }
+  await authStore.authLogin(account, async () => {
+    router.go(0);
+  });
 }
 </script>
 

apps/web-antd/src/views/demos/access/index.vue

@@ -41,17 +41,12 @@ async function changeAccount(role: string) {
 
   const account = accounts[role];
   resetAllStores();
-  if (account) {
-    await accessStore.authLogin(account, async () => {
-      router.go(0);
-    });
-  }
+  await accessStore.authLogin(account, async () => {
+    router.go(0);
+  });
 }
 
 async function handleToggleAccessMode() {
-  if (!accounts.super) {
-    return;
-  }
   await toggleAccessMode();
   resetAllStores();
 

apps/web-antd/src/views/monitor/admin/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <iframe
+    class="size-full"
+    src="http://localhost:9090/admin/applications"
+  ></iframe>
+</template>

apps/web-antd/src/views/monitor/cache/components/CommandChart.vue

@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { EChartsOption } from 'echarts';
+
+import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
+
+import { preferences } from '@vben/preferences';
+
+import * as echarts from 'echarts';
+
+export default defineComponent({
+  name: 'CommandChart',
+  props: {
+    data: {
+      default: () => [],
+      type: Array,
+    },
+  },
+  setup(props, { expose }) {
+    expose({});
+
+    const commandHtmlRef = ref<HTMLDivElement>();
+    const echartsInstance = shallowRef<echarts.ECharts | null>(null);
+
+    watch(
+      () => props.data,
+      () => {
+        if (!commandHtmlRef.value) return;
+        setEchartsOption(props.data);
+      },
+      { immediate: true },
+    );
+
+    onMounted(() => {
+      echartsInstance.value = echarts.init(
+        commandHtmlRef.value,
+        preferences.theme.mode,
+      );
+      setEchartsOption(props.data);
+    });
+
+    watch(
+      () => preferences.theme.mode,
+      (mode) => {
+        echartsInstance.value?.dispose();
+        echartsInstance.value = echarts.init(commandHtmlRef.value, mode);
+        setEchartsOption(props.data);
+      },
+    );
+
+    function setEchartsOption(data: any[]) {
+      const option: EChartsOption = {
+        series: [
+          {
+            animationDuration: 1000,
+            animationEasing: 'cubicInOut',
+            center: ['50%', '38%'],
+            data,
+            name: '命令',
+            radius: [15, 95],
+            roseType: 'radius',
+            type: 'pie',
+          },
+        ],
+        tooltip: {
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+          trigger: 'item',
+        },
+      };
+      echartsInstance.value?.setOption(option);
+    }
+
+    return {
+      commandHtmlRef,
+    };
+  },
+});
+</script>
+
+<template>
+  <div ref="commandHtmlRef" class="h-[400px] w-full"></div>
+</template>
+
+<style scoped></style>

apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue

@@ -0,0 +1,102 @@
+<script lang="ts">
+import type { EChartsOption } from 'echarts';
+
+import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
+
+import { preferences } from '@vben/preferences';
+
+import * as echarts from 'echarts';
+
+export default defineComponent({
+  name: 'MemoryChart',
+  props: {
+    data: {
+      default: '0',
+      type: String,
+    },
+  },
+  setup(props, { expose }) {
+    expose({});
+
+    const memoryHtmlRef = ref<HTMLDivElement>();
+    const echartsInstance = shallowRef<echarts.ECharts | null>(null);
+
+    watch(
+      () => props.data,
+      () => {
+        if (!memoryHtmlRef.value) return;
+        setEchartsOption(props.data);
+      },
+      { immediate: true },
+    );
+
+    onMounted(() => {
+      echartsInstance.value = echarts.init(
+        memoryHtmlRef.value,
+        preferences.theme.mode,
+      );
+      setEchartsOption(props.data);
+    });
+
+    watch(
+      () => preferences.theme.mode,
+      (mode) => {
+        echartsInstance.value?.dispose();
+        echartsInstance.value = echarts.init(memoryHtmlRef.value, mode);
+        setEchartsOption(props.data);
+      },
+    );
+
+    function getNearestPowerOfTen(num: number) {
+      let power = 10;
+      while (power <= num) {
+        power *= 10;
+      }
+      return power;
+    }
+
+    function setEchartsOption(value: string) {
+      // x10
+      const formattedValue = Math.floor(Number.parseFloat(value));
+      // 最大值 10以内取10  100以内取100 以此类推
+      const max = getNearestPowerOfTen(formattedValue);
+      const options: EChartsOption = {
+        series: [
+          {
+            animation: true,
+            animationDuration: 1000,
+            data: [
+              {
+                name: '内存消耗',
+                value: Number.parseFloat(value),
+              },
+            ],
+            detail: {
+              formatter: `${value}M`,
+              valueAnimation: true,
+            },
+            max,
+            min: 0,
+            name: '峰值',
+            type: 'gauge',
+          },
+        ],
+        tooltip: {
+          formatter: `{b} <br/>{a} : ${value}M`,
+        },
+      };
+      echartsInstance.value?.setOption(options);
+    }
+
+    return {
+      memoryHtmlRef,
+    };
+  },
+});
+</script>
+
+<template>
+  <div ref="memoryHtmlRef" class="h-[400px] w-full"></div>
+</template>
+
+<style scoped></style>

apps/web-antd/src/views/monitor/cache/components/RedisDescription.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { RedisInfo } from '#/api/monitor/cache';
+
+import type { PropType } from 'vue';
+
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+
+interface IRedisInfo extends RedisInfo {
+  dbSize: string;
+}
+
+defineProps({
+  data: {
+    required: true,
+    type: Object as PropType<IRedisInfo>,
+  },
+});
+</script>
+
+<template>
+  <Descriptions
+    :column="{ xs: 1, sm: 1, md: 3, lg: 4, xl: 4 }"
+    bordered
+    size="small"
+  >
+    <DescriptionsItem label="redis版本">
+      {{ data.redis_version }}
+    </DescriptionsItem>
+    <DescriptionsItem label="redis模式">
+      {{ data.redis_mode === 'standalone' ? '单机模式' : '集群模式' }}
+    </DescriptionsItem>
+    <DescriptionsItem label="tcp端口">
+      {{ data.tcp_port }}
+    </DescriptionsItem>
+    <DescriptionsItem label="客户端数">
+      {{ data.connected_clients }}
+    </DescriptionsItem>
+    <DescriptionsItem label="运行时间">
+      {{ `${data.uptime_in_days}天` }}
+    </DescriptionsItem>
+    <DescriptionsItem label="使用内存">
+      {{ data.used_memory_human }}
+    </DescriptionsItem>
+    <DescriptionsItem label="使用CPU">
+      {{ parseFloat(data.used_cpu_user_children!).toFixed(2) }}
+    </DescriptionsItem>
+    <DescriptionsItem label="内存配置">
+      {{ data.maxmemory_human }}
+    </DescriptionsItem>
+    <DescriptionsItem label="AOF是否开启">
+      {{ data.aof_enabled === '0' ? '否' : '是' }}
+    </DescriptionsItem>
+    <DescriptionsItem label="RDB是否成功">
+      {{ data.rdb_last_bgsave_status }}
+    </DescriptionsItem>
+    <DescriptionsItem label="Key数量">
+      {{ data.dbSize }}
+    </DescriptionsItem>
+    <DescriptionsItem label="网络入口/出口">
+      {{
+        `${data.instantaneous_input_kbps}kps/${data.instantaneous_output_kbps}kps`
+      }}
+    </DescriptionsItem>
+  </Descriptions>
+</template>

apps/web-antd/src/views/monitor/cache/index.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+
+import { Button, Card, Col, Row } from 'ant-design-vue';
+
+import { redisCacheInfo, type RedisInfo } from '#/api/monitor/cache';
+
+import CommandChart from './components/CommandChart.vue';
+import MemoryChart from './components/MemoryChart.vue';
+import RedisDescription from './components/RedisDescription.vue';
+
+const baseSpan = { lg: 12, md: 24, sm: 24, xl: 12, xs: 24 };
+
+const chartData = reactive<{ command: any[]; memory: string }>({
+  command: [],
+  memory: '0',
+});
+
+interface IRedisInfo extends RedisInfo {
+  dbSize: string;
+}
+const redisInfo = ref<IRedisInfo>();
+
+onMounted(async () => {
+  await loadInfo();
+});
+
+async function loadInfo() {
+  try {
+    const ret = await redisCacheInfo();
+
+    // 单位MB 保留两位小数
+    const usedMemory = (
+      Number.parseInt(ret.info.used_memory!) /
+      1024 /
+      1024
+    ).toFixed(2);
+    chartData.memory = usedMemory;
+    // 命令统计
+    chartData.command = ret.commandStats;
+    // redis信息
+    redisInfo.value = { ...ret.info, dbSize: String(ret.dbSize) };
+  } catch (error) {
+    console.warn(error);
+  }
+}
+</script>
+
+<template>
+  <div class="m-[16px]">
+    <Row :gutter="[15, 15]">
+      <Col :span="24">
+        <Card size="small">
+          <template #title>
+            <div class="flex items-center justify-start gap-[6px]">
+              <span class="icon-[logos--redis]"></span>
+              <span>redis信息</span>
+            </div>
+          </template>
+          <template #extra>
+            <Button size="small" @click="loadInfo">
+              <div class="flex">
+                <span class="icon-[charm--refresh]"></span>
+              </div>
+            </Button>
+          </template>
+          <RedisDescription v-if="redisInfo" :data="redisInfo" />
+        </Card>
+      </Col>
+      <Col v-bind="baseSpan">
+        <Card size="small">
+          <template #title>
+            <div class="flex items-center gap-[6px]">
+              <span class="icon-[flat-color-icons--command-line]"></span>
+              <span>命令统计</span>
+            </div>
+          </template>
+          <CommandChart :data="chartData.command" />
+        </Card>
+      </Col>
+      <Col v-bind="baseSpan">
+        <Card size="small">
+          <template #title>
+            <div class="flex items-center justify-start gap-[6px]">
+              <span class="icon-[la--memory]"></span>
+              <span>内存占用</span>
+            </div>
+          </template>
+          <MemoryChart :data="chartData.memory" />
+        </Card>
+      </Col>
+    </Row>
+  </div>
+</template>

apps/web-antd/src/views/monitor/logininfor/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/monitor/online/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/monitor/operlog/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/monitor/snailjob/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <iframe class="size-full" src="http://localhost:8800/snail-job"></iframe>
+</template>

apps/web-antd/src/views/system/client/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/config/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/dept/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/dict/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/menu/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/notice/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/oss/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/post/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/role/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/tenant/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/tenantPackage/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/system/user/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+import { Button } from 'ant-design-vue';
+
+onMounted(() => {
+  console.log('keepAlive测试 -> 挂载了');
+});
+</script>
+
+<template>
+  <div class="m-[8px]">
+    <Button type="primary" v-access:code="['system:user:list']">
+      测试按钮可见
+    </Button>
+  </div>
+</template>

apps/web-antd/src/views/tool/gen/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/category/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/formManage/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/leave/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/model/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/processDefinition/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/processInstance/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/task/allTaskWaiting.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/task/myDocument.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/task/taskCopyList.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/task/taskFinish.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>

apps/web-antd/src/views/workflow/task/taskWaiting.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import CommonSkeleton from '#/views/common';
+</script>
+
+<template>
+  <div>
+    <CommonSkeleton />
+  </div>
+</template>