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

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

app/pages/orders/index.vue

@@ -217,6 +217,17 @@ var Se = {
         function Y(e) {
           return C(e, w.value) || `/bills`;
         }
+        function openMobileOrder({ originalEvent, data }) {
+          if (!window.matchMedia(`(width < 640px)`).matches) return;
+          const target = originalEvent.target;
+          if (
+            target.closest(`a, button, input, [role="checkbox"]`) ||
+            target.closest(`td`)?.cellIndex === 0
+          )
+            return;
+          const destination = C(data.id, w.value);
+          if (destination) navigateTo(destination);
+        }
         let X = computed(() =>
             N.value.filter(
               (e) => String(e.status) === `Unpaid` && e.type !== `on_demand`,
@@ -639,6 +650,7 @@ var Se = {
                     first: (unref(K) - 1) * unref(q),
                     dataKey: `id`,
                     rowSelectable: Be,
+                    onRowClick: openMobileOrder,
                     metaKeySelection: !1,
                   },
                   {
@@ -670,7 +682,7 @@ var Se = {
                         {
                           header: `下单时间`,
                           style: {
-                            "min-width": `170px`,
+                            "white-space": `nowrap`,
                           },
                         },
                         {
@@ -692,7 +704,7 @@ var Se = {
                         {
                           header: `ID`,
                           style: {
-                            width: `120px`,
+                            "white-space": `nowrap`,
                           },
                         },
                         {
@@ -747,6 +759,7 @@ var Se = {
                         {
                           header: `商品`,
                           style: {
+                            width: `100%`,
                             "min-width": `220px`,
                           },
                         },
@@ -777,7 +790,7 @@ var Se = {
                         {
                           header: `支付方式`,
                           style: {
-                            "min-width": `130px`,
+                            "white-space": `nowrap`,
                           },
                         },
                         {
@@ -797,7 +810,7 @@ var Se = {
                         {
                           header: `状态`,
                           style: {
-                            width: `110px`,
+                            "white-space": `nowrap`,
                           },
                         },
                         {
@@ -824,8 +837,10 @@ var Se = {
                         y,
                         {
                           header: `总价`,
+                          headerClass: `amount-heading`,
+                          bodyClass: `amount-cell`,
                           style: {
-                            width: `120px`,
+                            "white-space": `nowrap`,
                           },
                         },
                         {
@@ -844,8 +859,10 @@ var Se = {
                         y,
                         {
                           header: ``,
+                          bodyClass: `action-cell`,
                           style: {
-                            width: `115px`,
+                            width: `1%`,
+                            "white-space": `nowrap`,
                           },
                         },
                         {