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

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

app/plugins/04-table-labels.client.js

@@ -0,0 +1,36 @@
+/** 窄屏把表格行堆叠成卡片时，用列标题给每个单元格补 data-label，供 CSS 显示字段名。 */
+import { defineNuxtPlugin } from "#app";
+
+function labelTable(table) {
+  const names = [...table.querySelectorAll(":scope > thead > tr > th")].map(
+    (th) =>
+      th.querySelector(".p-datatable-column-title")?.textContent.trim() ?? "",
+  );
+  for (const row of table.querySelectorAll(":scope > tbody > tr")) {
+    [...row.children].forEach((cell, index) => {
+      const name = names[index] ?? "";
+      if (cell.dataset.label !== name) cell.dataset.label = name;
+    });
+  }
+}
+
+export default defineNuxtPlugin({
+  name: "table-cell-labels",
+  setup() {
+    let queued = false;
+    const run = () => {
+      queued = false;
+      document.querySelectorAll("table.p-datatable-table").forEach(labelTable);
+    };
+    const schedule = () => {
+      if (queued) return;
+      queued = true;
+      requestAnimationFrame(run);
+    };
+    new MutationObserver(schedule).observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+    schedule();
+  },
+});