From 8d0b69cd4c8799ac9d7d1d5fd7d31f188a88297a Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Thu, 11 Sep 2025 14:55:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E7=BD=91?=
 =?UTF-8?q?=E5=85=B3=E3=80=81=E7=BD=91=E7=BB=9C=E5=92=8C=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除表格中的编号列
- 添加表单折叠功能
- 更新 spinner 组件样式，改成打字机效果
---
 .../src/views/operations/gateway/data.ts      |   8 +-
 .../src/views/operations/gateway/index.vue    |   1 +
 .../src/views/operations/network/data.ts      |   8 +-
 .../src/views/operations/network/index.vue    |   2 +-
 .../src/views/operations/protocol/data.ts     |   8 +-
 .../src/views/operations/protocol/index.vue   |   1 +
 .../src/components/spinner/spinner.vue        | 404 +++++++++++++++++-
 7 files changed, 414 insertions(+), 18 deletions(-)

diff --git a/apps/web-antd/src/views/operations/gateway/data.ts b/apps/web-antd/src/views/operations/gateway/data.ts
index b008078..64be4bd 100644
--- a/apps/web-antd/src/views/operations/gateway/data.ts
+++ b/apps/web-antd/src/views/operations/gateway/data.ts
@@ -125,10 +125,10 @@ export const querySchema: FormSchemaGetter = () => [
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
-  {
-    title: '编号',
-    field: 'id',
-  },
+  // {
+  //   title: '编号',
+  //   field: 'id',
+  // },
   {
     title: '网关名称',
     field: 'name',
diff --git a/apps/web-antd/src/views/operations/gateway/index.vue b/apps/web-antd/src/views/operations/gateway/index.vue
index ffee24f..cceed56 100644
--- a/apps/web-antd/src/views/operations/gateway/index.vue
+++ b/apps/web-antd/src/views/operations/gateway/index.vue
@@ -28,6 +28,7 @@ import {
 import gatewayDrawer from './gateway-drawer.vue';
 
 const formOptions: VbenFormProps = {
+  collapsed: true,
   commonConfig: {
     labelWidth: 80,
     componentProps: {
diff --git a/apps/web-antd/src/views/operations/network/data.ts b/apps/web-antd/src/views/operations/network/data.ts
index 58db0cf..23c4332 100644
--- a/apps/web-antd/src/views/operations/network/data.ts
+++ b/apps/web-antd/src/views/operations/network/data.ts
@@ -241,10 +241,10 @@ export const querySchema: FormSchemaGetter = () => [
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
-  {
-    title: '编号',
-    field: 'id',
-  },
+  // {
+  //   title: '编号',
+  //   field: 'id',
+  // },
   {
     title: '组件名称',
     field: 'name',
diff --git a/apps/web-antd/src/views/operations/network/index.vue b/apps/web-antd/src/views/operations/network/index.vue
index 6046684..d932cee 100644
--- a/apps/web-antd/src/views/operations/network/index.vue
+++ b/apps/web-antd/src/views/operations/network/index.vue
@@ -22,6 +22,7 @@ import { columns, querySchema } from './data';
 import networkDrawer from './network-drawer.vue';
 
 const formOptions: VbenFormProps = {
+  collapsed: true,
   commonConfig: {
     labelWidth: 80,
     componentProps: {
@@ -122,7 +123,6 @@ function handleDownloadExcel() {
     },
   );
 }
-
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/operations/protocol/data.ts b/apps/web-antd/src/views/operations/protocol/data.ts
index e73156f..dcdb51e 100644
--- a/apps/web-antd/src/views/operations/protocol/data.ts
+++ b/apps/web-antd/src/views/operations/protocol/data.ts
@@ -44,10 +44,10 @@ export const querySchema: FormSchemaGetter = () => [
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
-  {
-    title: '编号',
-    field: 'id',
-  },
+  // {
+  //   title: '编号',
+  //   field: 'id',
+  // },
   {
     title: '协议名称',
     field: 'name',
diff --git a/apps/web-antd/src/views/operations/protocol/index.vue b/apps/web-antd/src/views/operations/protocol/index.vue
index de5bffd..f54cbb9 100644
--- a/apps/web-antd/src/views/operations/protocol/index.vue
+++ b/apps/web-antd/src/views/operations/protocol/index.vue
@@ -21,6 +21,7 @@ import { columns, protocolTypeOptions, querySchema } from './data';
 import protocolDrawer from './protocol-drawer.vue';
 
 const formOptions: VbenFormProps = {
+  collapsed: true,
   commonConfig: {
     labelWidth: 80,
     componentProps: {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
index cde3901..17440df 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -72,11 +72,16 @@ function onTransitionEnd() {
     "
     @transitionend="onTransitionEnd"
   >
-    <div
-      :class="{ paused: !renderSpinner }"
-      v-if="renderSpinner"
-      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
-    ></div>
+<!--    <div-->
+<!--      :class="{ paused: !renderSpinner }"-->
+<!--      v-if="renderSpinner"-->
+<!--      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"-->
+<!--    ></div>-->
+    <div class="typewriter">
+      <div class="slide"><i></i></div>
+      <div class="paper"></div>
+      <div class="keyboard"></div>
+    </div>
   </div>
 </template>
 
@@ -135,3 +140,392 @@ function onTransitionEnd() {
   }
 }
 </style>
+<style>
+@keyframes bounce05 {
+  85%,
+  92%,
+  100% {
+    transform: translateY(0);
+  }
+
+  89% {
+    transform: translateY(-4px);
+  }
+
+  95% {
+    transform: translateY(2px);
+  }
+}
+
+@keyframes slide05 {
+  5% {
+    transform: translateX(14px);
+  }
+
+  15%,
+  30% {
+    transform: translateX(6px);
+  }
+
+  40%,
+  55% {
+    transform: translateX(0);
+  }
+
+  65%,
+  70% {
+    transform: translateX(-4px);
+  }
+
+  80%,
+  89% {
+    transform: translateX(-12px);
+  }
+
+  100% {
+    transform: translateX(14px);
+  }
+}
+
+@keyframes paper05 {
+  5% {
+    transform: translateY(46px);
+  }
+
+  20%,
+  30% {
+    transform: translateY(34px);
+  }
+
+  40%,
+  55% {
+    transform: translateY(22px);
+  }
+
+  65%,
+  70% {
+    transform: translateY(10px);
+  }
+
+  80%,
+  85% {
+    transform: translateY(0);
+  }
+
+  92%,
+  100% {
+    transform: translateY(46px);
+  }
+}
+
+@keyframes keyboard05 {
+  5%,
+  12%,
+  21%,
+  30%,
+  39%,
+  48%,
+  57%,
+  66%,
+  75%,
+  84% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 0 0 var(--key),
+      45px 0 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+
+  9% {
+    box-shadow:
+      15px 2px 0 var(--key),
+      30px 0 0 var(--key),
+      45px 0 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+
+  18% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 0 0 var(--key),
+      45px 0 0 var(--key),
+      60px 2px 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+
+  27% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 0 0 var(--key),
+      45px 0 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 12px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+
+  36% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 0 0 var(--key),
+      45px 0 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 12px 0 var(--key),
+      60px 12px 0 var(--key),
+      68px 12px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+
+  45% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 0 0 var(--key),
+      45px 0 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 2px 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+
+  54% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 2px 0 var(--key),
+      45px 0 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+
+  63% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 0 0 var(--key),
+      45px 0 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 12px 0 var(--key);
+  }
+
+  72% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 0 0 var(--key),
+      45px 2px 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 10px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+
+  81% {
+    box-shadow:
+      15px 0 0 var(--key),
+      30px 0 0 var(--key),
+      45px 0 0 var(--key),
+      60px 0 0 var(--key),
+      75px 0 0 var(--key),
+      90px 0 0 var(--key),
+      22px 10px 0 var(--key),
+      37px 12px 0 var(--key),
+      52px 10px 0 var(--key),
+      60px 10px 0 var(--key),
+      68px 10px 0 var(--key),
+      83px 10px 0 var(--key);
+  }
+}
+
+body {
+  margin: 0;
+}
+/* ... */
+.typewriter {
+  --blue: #5c86ff;
+  --blue-dark: #275efe;
+  --key: #fff;
+  --paper: #eef0fd;
+  --text: #d3d4ec;
+  --tool: #fbc56c;
+  --duration: 3s;
+
+  position: relative;
+  animation: bounce05 var(--duration) linear infinite;
+}
+
+.typewriter .slide {
+  width: 92px;
+  height: 20px;
+  margin-left: 14px;
+  background: linear-gradient(var(--blue), var(--blue-dark));
+  border-radius: 3px;
+  transform: translateX(14px);
+  animation: slide05 var(--duration) ease infinite;
+}
+
+.typewriter .slide::before,
+.typewriter .slide::after,
+.typewriter .slide i::before {
+  position: absolute;
+  content: '';
+  background: var(--tool);
+}
+
+.typewriter .slide::before {
+  top: 6px;
+  left: 100%;
+  width: 2px;
+  height: 8px;
+}
+
+.typewriter .slide::after {
+  top: 3px;
+  left: 94px;
+  width: 6px;
+  height: 14px;
+  border-radius: 3px;
+}
+
+.typewriter .slide i {
+  position: absolute;
+  top: 4px;
+  right: 100%;
+  display: block;
+  width: 6px;
+  height: 4px;
+  background: var(--tool);
+}
+
+.typewriter .slide i::before {
+  top: -2px;
+  right: 100%;
+  width: 4px;
+  height: 14px;
+  border-radius: 2px;
+}
+
+.typewriter .paper {
+  position: absolute;
+  top: -26px;
+  left: 24px;
+  width: 40px;
+  height: 46px;
+  background: var(--paper);
+  border-radius: 5px;
+  transform: translateY(46px);
+  animation: paper05 var(--duration) linear infinite;
+}
+
+.typewriter .paper::before {
+  position: absolute;
+  top: 7px;
+  right: 6px;
+  left: 6px;
+  height: 4px;
+  content: '';
+  background: var(--text);
+  border-radius: 2px;
+  box-shadow:
+    0 12px 0 var(--text),
+    0 24px 0 var(--text),
+    0 36px 0 var(--text);
+  transform: scaleY(0.8);
+}
+
+.typewriter .keyboard {
+  position: relative;
+  z-index: 1;
+  width: 120px;
+  height: 56px;
+  margin-top: -10px;
+}
+
+.typewriter .keyboard::before,
+.typewriter .keyboard::after {
+  position: absolute;
+  content: '';
+}
+
+.typewriter .keyboard::before {
+  inset: 0;
+  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
+  border-radius: 7px;
+  transform: perspective(10px) rotateX(2deg);
+  transform-origin: 50% 100%;
+}
+
+.typewriter .keyboard::after {
+  top: 25px;
+  left: 2px;
+  width: 11px;
+  height: 4px;
+  border-radius: 2px;
+  box-shadow:
+    15px 0 0 var(--key),
+    30px 0 0 var(--key),
+    45px 0 0 var(--key),
+    60px 0 0 var(--key),
+    75px 0 0 var(--key),
+    90px 0 0 var(--key),
+    22px 10px 0 var(--key),
+    37px 10px 0 var(--key),
+    52px 10px 0 var(--key),
+    60px 10px 0 var(--key),
+    68px 10px 0 var(--key),
+    83px 10px 0 var(--key);
+  animation: keyboard05 var(--duration) linear infinite;
+}
+</style>