refactor: 优化网关、网络和协议页面的展示效果

- 移除表格中的编号列
- 添加表单折叠功能
- 更新 spinner 组件样式，改成打字机效果

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: '编号',
+  //   title: '编号',
-    field: 'id',
+  //   field: 'id',
-  },
+  // },
   {
     title: '网关名称',
     field: 'name',

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: {

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: '编号',
+  //   title: '编号',
-    field: 'id',
+  //   field: 'id',
-  },
+  // },
   {
     title: '组件名称',
     field: 'name',

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>

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: '编号',
+  //   title: '编号',
-    field: 'id',
+  //   field: 'id',
-  },
+  // },
   {
     title: '协议名称',
     field: 'name',

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: {

packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue

@@ -72,11 +72,16 @@ function onTransitionEnd() {
     "
     @transitionend="onTransitionEnd"
   >
-    <div
+<!--    <div-->
-      :class="{ paused: !renderSpinner }"
+<!--      :class="{ paused: !renderSpinner }"-->
-      v-if="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-['']"
+<!--      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>-->
+    <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>