feat(ui): 优化控制台响应式布局与视觉体验

- 统一页面标题、圆角、字体和响应式断点，调整暗色主题及图表配色
- 新增表格列标签插件，在窄屏下将表格转换为卡片布局，优化实例、订单、工单等列表展示
- 支持移动端点击订单行进入详情，并完善订单凭据的打印布局
- 在财务中心展示本月及累计消费，补充充值关闭时的提示
- 优化工单详情布局，将附件上传入口整合至富文本编辑器工具栏
- 调整实例操作按钮、SSH 密钥操作及安全菜单图标
- 为多个页面显式导入 definePageMeta，完善页面元数据声明

app/assets/styles/pages.DytekQXu.css

@@ -5,7 +5,7 @@
   --welcome-tile-bg: #fff;
   background: #f7faff;
   border-color: #cbdcf0;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   position: relative;
 }
 .welcome-head[data-v-b43b228e] {
@@ -100,7 +100,7 @@
   min-width: 38px;
   min-height: 38px;
   color: var(--p-text-muted-color);
-  border-radius: 5px;
+  border-radius: var(--radius-md);
   transition:
     border-color 0.2s,
     color 0.2s;
@@ -135,7 +135,7 @@
   letter-spacing: inherit;
   vertical-align: baseline;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   align-items: center;
   gap: 8px;
   margin-left: 6px;
@@ -194,13 +194,21 @@
   font-size: 0.9375rem;
 }
 .app-dark .welcome-card[data-v-b43b228e] {
-  --welcome-line: #263b56;
-  --welcome-tile-bg: #101e31;
-  background: #12233b;
-  border-color: #304766;
+  --welcome-line: var(--p-content-border-color);
+  --welcome-tile-bg: var(--p-content-background);
+  background: color-mix(
+    in srgb,
+    var(--p-primary-color) 7%,
+    var(--p-content-background)
+  );
+  border-color: color-mix(
+    in srgb,
+    var(--p-primary-color) 22%,
+    var(--p-content-border-color)
+  );
 }
-/* 视口条件 (width<=1023px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
-@media (width<=1023px) {
+/* 视口条件 (width<1024px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
+@media (width<1024px) {
   .tiles[data-v-b43b228e] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -211,8 +219,8 @@
     border-top: 1px solid var(--welcome-line);
   }
 }
-/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
-@media (width<=767px) {
+/* 视口条件 (width<768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
+@media (width<768px) {
   .welcome-head[data-v-b43b228e] {
     align-items: flex-start;
     gap: 12px;
@@ -236,8 +244,8 @@
     gap: 5px;
   }
 }
-/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
-@media (width<=639px) {
+/* 视口条件 (width<640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
+@media (width<640px) {
   .welcome-title[data-v-b43b228e] {
     font-size: 1.5rem;
   }
@@ -269,3 +277,48 @@
     font-size: 1rem;
   }
 }
+@media (width<640px) {
+  .welcome-head[data-v-b43b228e] {
+    gap: 8px;
+    min-height: 0;
+    padding: 16px;
+  }
+  .welcome-heading[data-v-b43b228e] {
+    min-height: 0;
+  }
+  .welcome-title[data-v-b43b228e] {
+    font-size: 1.25rem;
+  }
+  .welcome-message[data-v-b43b228e] {
+    min-height: 0;
+    font-size: 0.9375rem;
+  }
+  .welcome-meta[data-v-b43b228e] {
+    flex-flow: wrap;
+    gap: 4px 14px;
+    font-size: 0.875rem;
+  }
+  .welcome-icon[data-v-b43b228e] {
+    flex-basis: 24px;
+  }
+  .welcome-icon[data-v-b43b228e],
+  .welcome-icon .iconify[data-v-b43b228e] {
+    width: 24px;
+    height: 24px;
+  }
+  .welcome-settings[data-v-b43b228e] {
+    top: 12px;
+    right: 12px;
+  }
+  .tile[data-v-b43b228e] {
+    min-height: 0;
+    padding: 12px 16px;
+  }
+  .tile-label[data-v-b43b228e] {
+    font-size: 0.875rem;
+  }
+  .tile-value[data-v-b43b228e] {
+    margin-top: 2px;
+    font-size: 1rem;
+  }
+}