2026-09-18 18:03:45 +08:00
19 changed files with 454 additions and 102 deletions
@@ -1,6 +1,6 @@
 pipeline {
  agent {
-    label "${env.JOB_BASE_NAME?.endsWith('-dev') ? 'java-dev' : 'java-test'}"
+    label "${env.JOB_BASE_NAME?.endsWith('-prod') ? 'java-builder' : (env.JOB_BASE_NAME?.endsWith('-dev') ? 'java-dev' : 'java-test')}"
  }

  environment {
@@ -10,6 +10,7 @@ pipeline {
    REGISTRY_CREDENTIALS = 'gitea-registry-token'
    NODE_BASE_IMAGE = '172.31.198.7:10082/java-project/node:22-alpine'
    NGINX_BASE_IMAGE = '172.31.198.7:10082/java-project/nginx:1.27-alpine'
+    PRODUCTION_IMAGE_REPOSITORY = 'git.buggoglobal.com/html/client-web'
  }

  options {
@@ -22,6 +23,17 @@ pipeline {
      steps {
        script {
          env.IS_DEVELOPMENT = env.JOB_BASE_NAME?.endsWith('-dev') ? 'true' : 'false'
+          env.IS_PRODUCTION = env.JOB_BASE_NAME?.endsWith('-prod') ? 'true' : 'false'
+          if (env.IS_PRODUCTION == 'true') {
+            sh '''
+              set -eu
+              git fetch --no-tags origin +refs/heads/main:refs/remotes/origin/main
+              test "$(git rev-parse HEAD)" = "$(git rev-parse origin/main)" || {
+                echo "生产部署只允许 origin/main 当前提交；请先合并代码到 main" >&2
+                exit 1
+              }
+            '''
+          }
          env.SOURCE_TAG = sh(script: 'git rev-parse --short=12 HEAD', returnStdout: true).trim()
        }
        sh 'git log -1 --oneline'
@@ -29,7 +41,7 @@ pipeline {
    }

    stage('构建并部署测试前端') {
-      when { expression { env.IS_DEVELOPMENT != 'true' } }
+      when { expression { env.IS_DEVELOPMENT != 'true' && env.IS_PRODUCTION != 'true' } }
      steps {
        withCredentials([usernamePassword(credentialsId: env.REGISTRY_CREDENTIALS, usernameVariable: 'REGISTRY_USER', passwordVariable: 'REGISTRY_PASSWORD')]) {
          sh '''
@@ -50,6 +62,61 @@ pipeline {
      }
    }

+    stage('构建并发布生产镜像') {
+      when { expression { env.IS_PRODUCTION == 'true' } }
+      steps {
+        withCredentials([usernamePassword(credentialsId: env.REGISTRY_CREDENTIALS, usernameVariable: 'REGISTRY_USER', passwordVariable: 'REGISTRY_PASSWORD')]) {
+          sh '''
+            set -eu
+            export DOCKER_CONFIG="${WORKSPACE}@tmp/docker-auth"
+            rm -rf "$DOCKER_CONFIG"
+            mkdir -p "$DOCKER_CONFIG"
+            cleanup_registry() {
+              docker logout git.buggoglobal.com >/dev/null 2>&1 || true
+              rm -rf "$DOCKER_CONFIG"
+            }
+            trap cleanup_registry EXIT HUP INT TERM
+            printf %s "$REGISTRY_PASSWORD" | docker login -u "$REGISTRY_USER" --password-stdin git.buggoglobal.com
+            image="$PRODUCTION_IMAGE_REPOSITORY:$SOURCE_TAG"
+            docker build \
+              --build-arg NODE_IMAGE="$NODE_BASE_IMAGE" \
+              --build-arg NGINX_IMAGE="$NGINX_BASE_IMAGE" \
+              --build-arg VITE_ADMIN_WEB_ORIGIN=https://admin.buggoglobal.com \
+              -t "$image" .
+            docker push "$image"
+          '''
+        }
+      }
+    }
+
+    stage('确认部署生产前端') {
+      when { expression { env.IS_PRODUCTION == 'true' } }
+      steps {
+        input message: "确认将 main 提交 ${env.SOURCE_TAG} 部署到 app.buggoglobal.com？", ok: '确认部署'
+      }
+    }
+
+    stage('部署生产前端') {
+      when { expression { env.IS_PRODUCTION == 'true' } }
+      steps {
+        lock(resource: 'firstleg-production-client-web-deploy', inversePrecedence: true) {
+          withCredentials([
+            usernamePassword(credentialsId: 'gitea-production-pull-token', usernameVariable: 'REGISTRY_USER', passwordVariable: 'REGISTRY_PASSWORD'),
+            sshUserPrivateKey(credentialsId: 'firstleg-production-ssh', keyFileVariable: 'TARGET_SSH_KEY', usernameVariable: 'TARGET_SSH_USER'),
+            string(credentialsId: 'firstleg-production-host', variable: 'TARGET_SSH_HOST'),
+            file(credentialsId: 'firstleg-production-known-hosts', variable: 'TARGET_SSH_KNOWN_HOSTS')
+          ]) {
+            withEnv([
+              'TARGET_DEPLOY_DIR=/data/firstleg/deploy/frontend',
+              'TARGET_SSH_TARGET=' + env.TARGET_SSH_USER + '@' + env.TARGET_SSH_HOST
+            ]) {
+              sh "sh scripts/deploy-production.sh client-web '${env.PRODUCTION_IMAGE_REPOSITORY}' '${env.SOURCE_TAG}' docker-compose.production.yml"
+            }
+          }
+        }
+      }
+    }
+
    stage('构建并部署开发前端') {
      when { expression { env.IS_DEVELOPMENT == 'true' } }
      steps {
@@ -82,7 +149,7 @@ pipeline {
    }

    stage('部署检查') {
-      when { expression { env.IS_DEVELOPMENT != 'true' } }
+      when { expression { env.IS_DEVELOPMENT != 'true' && env.IS_PRODUCTION != 'true' } }
      steps {
        sh '''
          set -eu
@@ -96,7 +163,9 @@ pipeline {
  post {
    failure {
      sh '''
-        if [ "${IS_DEVELOPMENT:-false}" = "true" ]; then
+        if [ "${IS_PRODUCTION:-false}" = "true" ]; then
+          echo "生产部署失败，请查看上方远程部署日志"
+        elif [ "${IS_DEVELOPMENT:-false}" = "true" ]; then
          docker logs --tail=100 client-web-development || true
        else
          docker compose -f docker-compose.test.yml logs --tail=100 || true
@@ -0,0 +1,19 @@
+name: firstleg-prod-client-web
+
+services:
+  client-web:
+    image: ${IMAGE_REPOSITORY:?IMAGE_REPOSITORY is required}:${IMAGE_TAG:?IMAGE_TAG is required}
+    container_name: firstleg-prod-client-web
+    restart: unless-stopped
+    ports:
+      - "127.0.0.1:${HOST_PORT:-9002}:80"
+    environment:
+      API_UPSTREAM: "http://gateway:9000"
+      OVERSEAS_API_UPSTREAM: "http://gateway-overseas:9300"
+    networks:
+      - infra-network
+
+networks:
+  infra-network:
+    external: true
+    name: firstleg-prod-infra-network
@@ -0,0 +1,93 @@
+#!/usr/bin/env sh
+set -eu
+
+if [ "$#" -ne 4 ]; then
+  echo "用法: $0 <服务名> <镜像仓库> <镜像标签> <Compose 文件>" >&2
+  exit 2
+fi
+
+SERVICE="$1"
+IMAGE_REPOSITORY="$2"
+IMAGE_TAG="$3"
+COMPOSE_FILE="$4"
+IMAGE="$IMAGE_REPOSITORY:$IMAGE_TAG"
+REGISTRY_HOST="${IMAGE_REPOSITORY%%/*}"
+SSH_TARGET="${TARGET_SSH_TARGET:?TARGET_SSH_TARGET 未设置}"
+SSH_KEY="${TARGET_SSH_KEY:?TARGET_SSH_KEY 未设置}"
+SSH_KNOWN_HOSTS="${TARGET_SSH_KNOWN_HOSTS:?TARGET_SSH_KNOWN_HOSTS 未设置}"
+REMOTE_DIR="${TARGET_DEPLOY_DIR:?TARGET_DEPLOY_DIR 未设置}"
+: "${REGISTRY_USER:?REGISTRY_USER 未设置}"
+: "${REGISTRY_PASSWORD:?REGISTRY_PASSWORD 未设置}"
+
+run_ssh() {
+  ssh -i "$SSH_KEY" -o BatchMode=yes -o StrictHostKeyChecking=yes \
+    -o UserKnownHostsFile="$SSH_KNOWN_HOSTS" -o ConnectTimeout=10 "$SSH_TARGET" "$@"
+}
+
+run_scp() {
+  scp -i "$SSH_KEY" -o BatchMode=yes -o StrictHostKeyChecking=yes \
+    -o UserKnownHostsFile="$SSH_KNOWN_HOSTS" -o ConnectTimeout=10 "$@"
+}
+
+run_ssh install -d -m 750 "$REMOTE_DIR"
+REMOTE_COMPOSE="$REMOTE_DIR/docker-compose.$SERVICE.yml"
+run_scp "$COMPOSE_FILE" "$SSH_TARGET:$REMOTE_COMPOSE.tmp"
+run_ssh sh -s -- "$REMOTE_COMPOSE.tmp" "$REMOTE_COMPOSE" <<'REMOTE_PREPARE'
+set -eu
+compose_tmp="$1"
+compose_target="$2"
+chmod 644 "$compose_tmp"
+mv -f "$compose_tmp" "$compose_target"
+REMOTE_PREPARE
+
+printf '%s' "$REGISTRY_PASSWORD" | run_ssh docker login -u "$REGISTRY_USER" --password-stdin "$REGISTRY_HOST"
+trap 'run_ssh docker logout "$REGISTRY_HOST" >/dev/null 2>&1 || true' EXIT HUP INT TERM
+run_ssh docker pull "$IMAGE"
+
+run_ssh sh -s -- "$REMOTE_DIR" "$SERVICE" "$IMAGE_REPOSITORY" "$IMAGE_TAG" <<'REMOTE_DEPLOY'
+set -eu
+remote_dir="$1"
+service="$2"
+image_repository="$3"
+image_tag="$4"
+compose_file="docker-compose.$service.yml"
+project_name="firstleg-prod-$service"
+cd "$remote_dir"
+export IMAGE_REPOSITORY="$image_repository" IMAGE_TAG="$image_tag"
+
+compose() {
+  docker compose --project-name "$project_name" -f "$compose_file" "$@"
+}
+
+container_id="$(compose ps --all --quiet "$service" | head -n 1)"
+previous_image=""
+if [ -n "$container_id" ]; then
+  previous_image="$(docker inspect --format '{{.Config.Image}}' "$container_id")"
+fi
+
+if compose up -d --no-deps --pull never "$service" && \
+   compose exec -T "$service" wget -qO- http://127.0.0.1/healthz >/dev/null; then
+  echo "生产前端部署成功: $image_repository:$image_tag"
+  compose ps "$service"
+  exit 0
+fi
+
+echo "生产前端健康检查失败，准备回滚" >&2
+compose logs --tail=100 "$service" >&2 || true
+case "$previous_image" in
+  "$image_repository:"*) ;;
+  '') echo "首次部署无旧镜像可回滚" >&2; exit 1 ;;
+  *) echo "旧镜像不属于当前应用，拒绝回滚: $previous_image" >&2; exit 1 ;;
+esac
+previous_tag="${previous_image#"$image_repository:"}"
+if [ "$previous_tag" = "$image_tag" ]; then
+  echo "旧镜像与新镜像一致，无法回滚" >&2
+  exit 1
+fi
+docker pull "$previous_image"
+export IMAGE_TAG="$previous_tag"
+compose up -d --no-deps --pull never "$service"
+compose exec -T "$service" wget -qO- http://127.0.0.1/healthz >/dev/null || true
+echo "已回滚至: $previous_image" >&2
+exit 1
+REMOTE_DEPLOY
@@ -91,6 +91,7 @@ export const FIRST_LEG_ORDER_STATUSES = [
  { code: 'LOADING', label: '装柜中' },
  { code: 'LOADED', label: '装柜完成' },
  { code: 'DELIVERED', label: '派送完成' },
+  { code: 'COMPLETED', label: '已完成' },
 ] as const

 export type FirstLegOrderStatus = (typeof FIRST_LEG_ORDER_STATUSES)[number]['code']
@@ -44,6 +44,7 @@ export function createPaginationItems(page: number, pageCount: number): Paginati
 <script setup lang="ts">
 import { computed, useSlots, watch } from 'vue'
 import { ChevronLeft, ChevronRight } from '@lucide/vue'
+import { splitTableActions, runTableAction, type TableAction } from './tableActions'

 defineOptions({ inheritAttrs: false })

@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<{
  emptyText?: string
  total?: number
  pageSizes?: number[]
+  rowActions?: (row: object) => TableAction[]
 }>(), {
  loading: false,
  emptyText: '暂无数据',
@@ -140,8 +142,15 @@ function setPage(value: number) {
 </script>

 <template>
-  <div class="data-table">
-    <el-table v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :aria-busy="loading">
+  <div class="data-table" :class="$attrs.class">
+    <header v-if="$slots.toolbar || $slots['toolbar-actions']" class="data-table__toolbar">
+      <div class="data-table__toolbar-heading"><slot name="toolbar" /></div>
+      <div class="data-table__toolbar-actions"><slot name="toolbar-actions" /></div>
+    </header>
+    <slot name="before-table" />
+    <slot v-if="$slots.error" name="error" />
+    <template v-else>
+    <el-table v-bind="{ ...$attrs, class: undefined }" v-loading="loading" :data="data" :empty-text="emptyText" :aria-busy="loading">
      <el-table-column
        v-for="(column, index) in columns"
        :key="columnRenderKey(column, index)"
@@ -152,7 +161,26 @@ function setPage(value: number) {
        <template v-if="hasSlot(column.headerSlotName)" #header="scope">
          <slot :name="column.headerSlotName" v-bind="scope" />
        </template>
-        <template v-if="hasSlot(column.slotName)" #default="scope">
+        <template v-if="column.slotName === 'actions' && rowActions" #default="{ row }">
+          <div class="data-table__row-actions">
+            <el-button v-for="action in splitTableActions(rowActions(row)).visible" :key="action.key"
+              :disabled="action.disabled" :loading="action.loading" @click="runTableAction(action)">
+              {{ action.label }}
+            </el-button>
+            <el-dropdown v-if="splitTableActions(rowActions(row)).overflow.length" trigger="click">
+              <el-button class="data-table__more" aria-label="更多操作" title="更多操作">…</el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-for="action in splitTableActions(rowActions(row)).overflow" :key="action.key"
+                    :disabled="action.disabled || action.loading" @click="runTableAction(action)">
+                    {{ action.label }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </template>
+        <template v-else-if="hasSlot(column.slotName)" #default="scope">
          <slot :name="column.slotName" v-bind="scope" />
        </template>
      </el-table-column>
@@ -192,15 +220,30 @@ function setPage(value: number) {
        </nav>
      </div>
    </footer>
+    </template>
  </div>
 </template>

 <style scoped>
 .data-table { min-width: 0; }
+.data-table__toolbar { display: flex; min-height: 48px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--client-gap); padding: var(--client-toolbar-padding); border-bottom: 1px solid var(--client-border); }
+.data-table__toolbar-heading, .data-table__toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--client-gap); }
+.data-table__toolbar-heading { color: var(--client-muted); font-size: 12px; }
+.data-table__toolbar-heading :slotted(strong) { color: var(--client-text); font-size: 14px; }
+.data-table__toolbar-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.data-table__row-actions { display: flex; align-items: center; gap: var(--client-gap); white-space: nowrap; }
+.data-table__row-actions :deep(.el-button) { height: var(--client-row-action-height); padding: 0 8px; margin: 0; }
+.data-table :deep(.data-table__system-cell .data-table__row-actions .el-button + .el-button), .data-table :deep(.data-table__system-cell .data-table__row-actions .el-button + .el-dropdown) { margin-left: 0; }
+.data-table__more { min-width: 28px; }
+:global(.client-ui .data-table .el-table) { color: var(--client-text); font-size: var(--client-font-size); --el-table-border-color: var(--client-border); --el-table-header-bg-color: var(--client-header-bg); --el-table-row-hover-bg-color: var(--client-hover-bg); }
+:global(.client-ui .data-table th.el-table__cell) { height: var(--client-table-header-height); padding: 0; color: var(--client-muted); font-weight: 600; }
+:global(.client-ui .data-table td.el-table__cell) { height: var(--client-table-row-height); padding: 0; }
+:global(.client-ui .data-table .el-table .cell) { padding: 0 12px; line-height: 20px; }
+:global(.client-ui .data-table .el-table__row:nth-child(even)) { --el-table-tr-bg-color: #fcfcfd; }
 .data-table :deep(.data-table__single-line-cell .cell) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .data-table :deep(.data-table__system-cell .cell) { white-space: nowrap; }
 .data-table :deep(.data-table__system-cell .el-button + .el-button), .data-table :deep(.data-table__system-cell .el-button + .el-dropdown) { margin-left: 8px; }
-.data-table__pagination { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
+.data-table__pagination { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: var(--client-pagination-padding); border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
 .data-table__pagination-left { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; }
 .data-table__pagination-controls, .data-table__page-size, .data-table__page-buttons { display: flex; align-items: center; gap: 8px; }
 .data-table__pagination-controls { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
@@ -23,12 +23,14 @@ export interface QueryField {
 }

 const props = withDefaults(defineProps<{
+  layout?: 'inline' | 'grid'
  ariaLabel: string
  fields: QueryField[]
  searchText?: string
  resetText?: string
  searchOnReset?: boolean
 }>(), {
+  layout: 'inline',
  searchText: '查询',
  resetText: '重置',
  searchOnReset: true,
@@ -77,6 +79,7 @@ defineExpose({ search, reset })
  <section
    v-bind="$attrs"
    class="query-toolbar"
+    :class="{ 'query-toolbar--grid': layout === 'grid' }"
    :aria-label="ariaLabel"
  >
    <div class="query-toolbar__filters">
@@ -133,5 +136,11 @@ defineExpose({ search, reset })
 .query-toolbar__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { width: 260px; max-width: 100%; min-width: 0; }
 .query-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
 .query-toolbar__actions :deep(.el-button + .el-button) { margin-left: 0; }
+.query-toolbar--grid { display: block; padding: var(--client-query-padding); border: 1px solid var(--client-border); border-radius: var(--client-radius); }
+.query-toolbar--grid .query-toolbar__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
+.query-toolbar--grid .query-toolbar__field { min-width: 0; }
+.query-toolbar--grid .query-toolbar__field :deep(.el-input), .query-toolbar--grid .query-toolbar__field :deep(.el-select), .query-toolbar--grid .query-toolbar__field :deep(.el-date-editor) { flex: 1; width: 100%; min-width: 0; }
+.query-toolbar--grid .query-toolbar__actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--client-border); }
+@media (max-width: 1200px) { .query-toolbar--grid .query-toolbar__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .query-toolbar { align-items: stretch; flex-direction: column; } .query-toolbar__filters { width: 100%; flex-direction: column; } .query-toolbar__field { display: grid; gap: 6px; } .query-toolbar__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { width: 100%; } .query-toolbar__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; } .query-toolbar__actions :deep(.el-button) { min-height: 40px; margin-left: 0; } }
 </style>
@@ -0,0 +1,28 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { splitTableActions, runTableAction } from './tableActions.ts'
+
+test('shows up to three permitted actions and folds only when there are more', () => {
+  const actions = Array.from({ length: 5 }, (_, index) => ({ key: String(index), label: String(index), run() {} }))
+  for (const count of [0, 1, 2, 3]) {
+    const result = splitTableActions(actions.slice(0, count))
+    assert.equal(result.visible.length, count)
+    assert.equal(result.overflow.length, 0)
+  }
+  for (const count of [4, 5]) {
+    const result = splitTableActions(actions.slice(0, count))
+    assert.deepEqual(result.visible, actions.slice(0, 2))
+    assert.deepEqual(result.overflow, actions.slice(2, count))
+  }
+})
+
+test('disabled and loading actions cannot execute or disappear from the layout', () => {
+  let count = 0
+  const action = { key: 'edit', label: '编辑', run() { count++ } }
+  runTableAction({ ...action, disabled: true })
+  runTableAction({ ...action, loading: true })
+  assert.equal(count, 0)
+  runTableAction(action)
+  assert.equal(count, 1)
+  assert.equal(splitTableActions([{ ...action, disabled: true }]).visible.length, 1)
+})
@@ -0,0 +1,18 @@
+export interface TableAction {
+  key: string
+  label: string
+  disabled?: boolean
+  loading?: boolean
+  run: () => unknown
+}
+
+// Callers supply only permitted actions; disabled actions retain their place.
+export function splitTableActions(actions: readonly TableAction[]) {
+  return actions.length > 3
+    ? { visible: actions.slice(0, 2), overflow: actions.slice(2) }
+    : { visible: actions, overflow: [] }
+}
+
+export function runTableAction(action: TableAction) {
+  if (!action.disabled && !action.loading) return action.run()
+}
@@ -5,6 +5,7 @@ import test from 'node:test'
 const config = readFileSync(new URL('../../nginx/default.conf.template', import.meta.url), 'utf8')
 const testCompose = readFileSync(new URL('../../docker-compose.test.yml', import.meta.url), 'utf8')
 const developmentCompose = readFileSync(new URL('../../docker-compose.development.yml', import.meta.url), 'utf8')
+const productionCompose = readFileSync(new URL('../../docker-compose.production.yml', import.meta.url), 'utf8')
 const jenkinsfile = readFileSync(new URL('../../Jenkinsfile', import.meta.url), 'utf8')
 const dockerfile = readFileSync(new URL('../../Dockerfile', import.meta.url), 'utf8')

@@ -38,11 +39,16 @@ test('connects the development client proxy to both development gateways', () =>
  assert.doesNotMatch(developmentCompose, /test-api|prod(?:uction)?/i)
 })

-test('runs each deployment on its target node without controller-local SSH files', () => {
-  assert.match(jenkinsfile, /env\.JOB_BASE_NAME\?\.endsWith\('-dev'\) \? 'java-dev' : 'java-test'/)
+test('keeps local environments on target nodes and uses credential-managed SSH for production', () => {
+  assert.match(jenkinsfile, /env\.JOB_BASE_NAME\?\.endsWith\('-prod'\) \? 'java-builder'/)
  assert.match(jenkinsfile, /DEVELOPMENT_COMPOSE_PROJECT = 'client-web'/)
  assert.match(jenkinsfile, /docker compose -p "\$DEVELOPMENT_COMPOSE_PROJECT" -f "\$DEVELOPMENT_COMPOSE_FILE" up -d/)
-  assert.doesNotMatch(jenkinsfile, /\/var\/jenkins_home\/\.ssh|docker save|\bssh\b/)
+  assert.doesNotMatch(jenkinsfile, /\/var\/jenkins_home\/\.ssh|docker save/)
+  assert.match(jenkinsfile, /credentialsId: 'firstleg-production-ssh'/)
+  assert.match(jenkinsfile, /git rev-parse origin\/main/)
+  assert.match(productionCompose, /127\.0\.0\.1:\$\{HOST_PORT:-9002\}:80/)
+  assert.match(productionCompose, /API_UPSTREAM: "http:\/\/gateway:9000"/)
+  assert.match(productionCompose, /name: firstleg-prod-infra-network/)
 })

 test('uses authenticated internal base images in CI', () => {
@@ -9,6 +9,7 @@ export type ApiUnifiedOrderMainStatus =
  | 'LOADING'
  | 'LOADED'
  | 'DELIVERED'
+  | 'COMPLETED'

 export interface MerchantUnifiedMeasurementSummary {
  reviewStatus: string | null
@@ -6,6 +6,7 @@ import {
  FIRST_LEG_PROGRESS_STAGES,
  getFirstLegProgressIndex,
  getFirstLegStatusLabel,
+  getFirstLegStatusTone,
 } from '@/modules/first-leg/utils/firstLegOrder'

 const props = defineProps<{ order: FirstLegOrder }>()
@@ -25,7 +26,7 @@ function stageState(index: number) {
        <h3 id="order-progress-title">订单进度</h3>
        <span>国内入仓、组托、装柜及后续履约同步</span>
      </div>
-      <el-tag :type="order.status === 'DELIVERED' ? 'success' : order.status === 'DRAFT' || order.status === 'PENDING_REVIEW' ? 'warning' : 'info'" effect="light">
+      <el-tag :type="getFirstLegStatusTone(order.status)" effect="light">
        {{ getFirstLegStatusLabel(order.status) }}
      </el-tag>
    </div>
@@ -49,7 +50,7 @@ function stageState(index: number) {
 .progress-heading h3 { margin: 0; color: var(--navy); }
 .progress-heading h3 { font-size: 15px; }
 .progress-heading span { color: var(--muted); font-size: 11px; }
-.progress-stages { display: grid; grid-template-columns: repeat(7, minmax(76px, 1fr)); margin: 16px 0 0; padding: 0; overflow-x: auto; list-style: none; }
+.progress-stages { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(76px, 1fr); margin: 16px 0 0; padding: 0; overflow-x: auto; list-style: none; }
 .progress-stages li { position: relative; display: flex; min-width: 76px; align-items: center; flex-direction: column; gap: 7px; color: #96a0a6; font-size: 10px; text-align: center; }
 .progress-stages li::before { position: absolute; top: 10px; right: 50%; left: -50%; height: 2px; background: #e1e6e8; content: ''; }
 .progress-stages li:first-child::before { display: none; }
@@ -60,7 +61,7 @@ function stageState(index: number) {
 .is-current .stage-label { color: var(--navy); font-weight: 700; }
 .draft-progress-note { margin: 12px 0 0; padding: 10px 12px; background: #f6f8f8; color: var(--muted); font-size: 11px; }
@media (max-width: 720px) {
-  .progress-stages { grid-template-columns: repeat(7, 82px); padding-bottom: 8px; }
+  .progress-stages { grid-auto-columns: 82px; padding-bottom: 8px; }
  .progress-heading { align-items: flex-start; }
 }
 </style>
@@ -60,7 +60,7 @@ test('maps transport and status fields instead of treating container mode as tra
  assert.match(storeSource, /status === 'SUBMITTED'\) return 'PENDING_REVIEW'/)
  assert.match(storeSource, /status === 'REJECTED'\) return 'PENDING_REVIEW'/)
  assert.match(storeSource, /status === 'APPROVED' \|\| status === 'ACCEPTED' \|\| status === 'PROCESSING'\) return 'WAIT_MEASURE'/)
-  assert.match(storeSource, /status === 'COMPLETED'\) return 'LOADED'/)
+  assert.match(storeSource, /status === 'COMPLETED'\) return 'COMPLETED'/)
  assert.doesNotMatch(storeSource, /status === 'COMPLETED'\) return 'DELIVERED'/)
 })

@@ -45,7 +45,7 @@ function clientStatus(status: ApiFirstLegStatus): FirstLegOrder['status'] {
  // 后端联调任务曾出现 REJECTED，但一期已确认订单不设驳回状态；兼容旧数据时仍按待审核展示。
  if (status === 'REJECTED') return 'PENDING_REVIEW'
  if (status === 'APPROVED' || status === 'ACCEPTED' || status === 'PROCESSING') return 'WAIT_MEASURE'
-  if (status === 'COMPLETED') return 'LOADED'
+  if (status === 'COMPLETED') return 'COMPLETED'
  if (status === 'CANCELLED') return 'PENDING_REVIEW'
  return 'PENDING_REVIEW'
 }
@@ -8,6 +8,7 @@ import {
  FIRST_LEG_PROGRESS_STAGES,
  getFirstLegProgressIndex,
  getFirstLegStatusLabel,
+  getFirstLegStatusTone,
  getFirstLegTransportModeLabel,
  summarizeFirstLegCargo,
  validateFirstLegOrderDraft,
@@ -67,7 +68,7 @@ test('uses the confirmed status and transport labels', () => {
  assert.equal(getFirstLegStatusLabel('DELIVERED'), '派送完成')
  assert.equal(getFirstLegTransportModeLabel('FCL'), '海运整箱 FCL')
  assert.deepEqual(FIRST_LEG_PROGRESS_STAGES.map((item) => item.code), [
-    'PENDING_REVIEW', 'WAIT_MEASURE', 'WAIT_PALLETIZE', 'WAIT_SPLIT', 'LOADING', 'LOADED', 'DELIVERED',
+    'PENDING_REVIEW', 'WAIT_MEASURE', 'WAIT_PALLETIZE', 'WAIT_SPLIT', 'LOADING', 'LOADED', 'DELIVERED', 'COMPLETED',
  ])
  assert.equal(getFirstLegProgressIndex('WAIT_PALLETIZE'), 2)
 })
@@ -197,3 +198,17 @@ test('counts one physical carton series for SKU lines in the same mixed-carton g
  second.packageCount = 9
  assert.ok(validateFirstLegOrderDraft(draft).includes('同箱 SKU 的箱数、包装类型、箱规、重量和体积必须一致'))
 })
+
+test('distinguishes first-leg draft, review, active handling and completion', () => {
+  assert.equal(getFirstLegStatusTone('DRAFT'), 'info')
+  assert.equal(getFirstLegStatusTone('PENDING_REVIEW'), 'warning')
+  for (const status of ['WAIT_MEASURE', 'WAIT_PALLETIZE', 'WAIT_SPLIT', 'LOADING']) {
+    assert.equal(getFirstLegStatusTone(status), 'primary')
+  }
+  assert.equal(getFirstLegStatusTone('LOADED'), 'success')
+  assert.equal(getFirstLegStatusTone('DELIVERED'), 'success')
+  assert.equal(getFirstLegStatusTone('COMPLETED'), 'success')
+  assert.equal(getFirstLegStatusLabel('COMPLETED'), '已完成')
+  assert.equal(getFirstLegStatusLabel('UNRECOGNIZED'), '未知状态')
+  assert.equal(getFirstLegStatusTone('UNRECOGNIZED'), 'info')
+})
@@ -15,7 +15,7 @@ const transportModeLabels = new Map<FirstLegTransportMode, string>(
 )

 export function getFirstLegStatusLabel(status: FirstLegOrderStatus) {
-  return statusLabels.get(status) ?? status
+  return statusLabels.get(status) ?? '未知状态'
 }

 export function getFirstLegTransportModeLabel(mode: FirstLegTransportMode | null) {
@@ -23,9 +23,11 @@ export function getFirstLegTransportModeLabel(mode: FirstLegTransportMode | null
  return transportModeLabels.get(mode) ?? mode
 }

-export function getFirstLegStatusTone(status: FirstLegOrderStatus): 'success' | 'warning' | 'info' | 'danger' {
-  if (status === 'DELIVERED') return 'success'
-  if (status === 'DRAFT' || status === 'PENDING_REVIEW') return 'warning'
+export function getFirstLegStatusTone(status: FirstLegOrderStatus): 'success' | 'warning' | 'info' | 'primary' {
+  if (status === 'DELIVERED' || status === 'LOADED' || status === 'COMPLETED') return 'success'
+  if (status === 'DRAFT') return 'info'
+  if (status === 'PENDING_REVIEW') return 'warning'
+  if (['WAIT_MEASURE', 'WAIT_PALLETIZE', 'WAIT_SPLIT', 'LOADING'].includes(status)) return 'primary'
  return 'info'
 }

@@ -3,6 +3,8 @@ import { readFileSync } from 'node:fs'
 import test from 'node:test'

 const source = readFileSync(new URL('./FirstLegOrdersView.vue', import.meta.url), 'utf8')
+const tableSource = readFileSync(new URL('../../../components/common/DataTable.vue', import.meta.url), 'utf8')
+const querySource = readFileSync(new URL('../../../components/common/QueryToolbar.vue', import.meta.url), 'utf8')
 const routerSource = readFileSync(new URL('../routes.ts', import.meta.url), 'utf8')
 const editorShellSource = readFileSync(new URL('../components/FirstLegOrderEditorShell.vue', import.meta.url), 'utf8')
 const progressSource = readFileSync(new URL('../components/OrderProgressPanel.vue', import.meta.url), 'utf8')
@@ -70,7 +72,7 @@ test('renders dynamic cargo lines and a responsive editor dialog', () => {
  assert.match(editorShellSource, /first-leg-editor-dialog\.el-dialog\) \{[^}]*height: 94vh;/)
  assert.match(editorShellSource, /width: 100vw !important; height: 100vh;/)
  assert.match(source, /class="mobile-order-list"/)
-  assert.match(source, /\.desktop-order-table \{ display: none; \}/)
+  assert.match(source, /\.prototype-order-table :deep\(> \.el-table\), \.prototype-order-table :deep\(> \.data-table__pagination\) \{ display: none; \}/)
 })

 test('uses the full editor dialog width for cargo details and cost estimates', () => {
@@ -89,11 +91,11 @@ test('uses the shared query toolbar and data table without metric cards', () =>
  assert.match(source, /import QueryToolbar, \{ type QueryField, type QueryModel \}/)
  assert.match(source, /import DataTable, \{ type DataTableColumn \}/)
  assert.match(source, /const filters = ref<QueryModel>/)
-  assert.match(source, /<QueryToolbar v-model="filters" class="first-leg-query-toolbar" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" \/>/)
+  assert.match(source, /<QueryToolbar v-model="filters" class="first-leg-query-toolbar" layout="grid" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" \/>/)
  assert.match(source, /async function searchOrders\(model: QueryModel\)/)
  assert.match(source, /await store\.load\(\{/)
  assert.match(source, /<DataTable v-model:page="tablePage" v-model:page-size="tablePageSize" :data="pagedOrders" :columns="visibleOrderColumns"/)
-  assert.match(source, /\{ key: 'actions', label: '操作', width: 216, fixed: 'left', align: 'center', headerAlign: 'center', slotName: 'actions' \}/)
+  assert.match(source, /\{ key: 'actions', label: '操作', width: 284, fixed: 'left', align: 'left', headerAlign: 'left', slotName: 'actions' \}/)
  assert.doesNotMatch(source, /order-metrics|订单概览/)
 })

@@ -188,7 +190,7 @@ test('keeps dense order identifiers on one line and aligns columns by content ty
  assert.doesNotMatch(source, /<template #order="\{ row \}">[\s\S]{0,400}class="order-reference"/)
  assert.match(source, /\.table-ellipsis, \.table-multivalue \{[^}]*text-overflow: ellipsis;[^}]*white-space: nowrap;/)
  assert.match(source, /\.order-number-link \{[^}]*text-overflow: ellipsis;[^}]*white-space: nowrap;/)
-  assert.match(source, /\.prototype-order-table :deep\(\.el-table__body-wrapper td\.el-table__cell\) \{ height: 50px;/)
+  assert.match(tableSource, /height: var\(--client-table-row-height\)/)
 })

 test('shows one unified progress line and C02 business summaries without detail history', () => {
@@ -231,26 +233,26 @@ test('shows and searches the inbound code after a draft is submitted', () => {
  assert.match(source, /<span v-else>—<\/span>/)
 })

-test('keeps the seven-stage progress and business summary usable on mobile', () => {
-  assert.match(progressSource, /grid-template-columns: repeat\(7, 82px\)/)
+test('keeps all progress stages and business summary usable on mobile', () => {
+  assert.match(progressSource, /grid-auto-columns: 82px/)
  assert.match(progressSource, /overflow-x: auto/)
  assert.match(source, /\.fulfillment-summary \{ grid-template-columns: 1fr; \}/)
 })

 test('keeps the first viewport compact and moves create into the table toolbar', () => {
-  const tableToolbarSource = source.slice(source.indexOf('class="order-table-toolbar"'), source.indexOf('class="order-eligibility is-pending"'))
-  assert.match(source, /class="order-table-toolbar"/)
+  const tableToolbarSource = source.slice(source.indexOf('#toolbar-actions'), source.indexOf('class="order-eligibility is-pending"'))
+  assert.match(source, /#toolbar-actions/)
  assert.match(source, /<strong>订单列表<\/strong><span>共 \{\{ filteredOrders\.length \}\} 条<\/span>/)
-  assert.match(source, /class="order-table-toolbar"[\s\S]*order:first-leg:create[\s\S]*创建订单[\s\S]*class="order-eligibility is-pending"/)
+  assert.match(source, /#toolbar-actions[\s\S]*order:first-leg:create[\s\S]*创建订单[\s\S]*class="order-eligibility is-pending"/)
  assert.match(tableToolbarSource, /下载唛头[\s\S]*导出订单信息[\s\S]*批量提交草稿[\s\S]*创建订单/)
  assert.doesNotMatch(source.slice(source.indexOf('<QueryToolbar'), source.indexOf('<div class="client-card order-table-card">')), /下载唛头|导出订单信息|创建订单/)
  assert.match(source, /client-main:has\(> \.first-leg-page:not\(\.is-create-route\)\) > \.client-page-heading > div\) \{ position: absolute; width: 1px; height: 1px;/)
 })

 test('uses the prototype query grid and only shows the qualification notice before approval', () => {
-  assert.match(source, /\.first-leg-query-toolbar \{ display: block;/)
-  assert.match(source, /query-toolbar__filters\) \{ display: grid; min-width: 0; grid-template-columns: repeat\(4,/)
-  assert.match(source, /query-toolbar__actions\) \{ justify-content: flex-start; margin-top: 14px;/)
+  assert.match(querySource, /\.query-toolbar--grid \{ display: block;/)
+  assert.match(querySource, /query-toolbar__filters \{ display: grid; grid-template-columns: repeat\(4,/)
+  assert.match(querySource, /query-toolbar__actions \{ margin-top: 12px;/)
  assert.match(source, /v-if="companySubmissionBlocked && !supportingDataErrors\.some/)
  assert.doesNotMatch(source, /企业资料已审核，可正常提交订单/)
  assert.doesNotMatch(source, /order-eligibility\.is-approved/)
@@ -399,6 +401,9 @@ test('loads only active server channels for the selected domestic warehouse', ()
  assert.match(source, /availablePricingTaxModes/)
  assert.match(source, /:loading="channelLoading"/)
  assert.match(source, /:disabled="!form\.receivingWarehouseId \|\| channelLoading"/)
+  assert.match(source, /label="报价包税方式" prop="pricingTaxMode" required class="pricing-tax-mode-field"/)
+  assert.match(source, /\.compact-transport-grid > :deep\(\.pricing-tax-mode-field\) \{ display: none; \}/)
+  assert.doesNotMatch(source, /\.compact-transport-grid > :deep\(\.el-form-item:nth-child\(2\)\)/)
  assert.match(source, /当前收货仓暂无可用渠道/)
  assert.match(source, /渠道加载失败/)
  assert.match(source, /@click="retryPricingChannels"/)
@@ -537,7 +542,9 @@ test('opens billing-weight confirmation independently from order details', () =>
 test('shows billing-weight confirmation only when the backend marks it pending', () => {
  const templateSource = source.slice(source.indexOf('<template>'), source.lastIndexOf('</template>'))
  const entries = templateSource.match(/<el-button v-if="canConfirmInboundFee && [^"]*customerFeeConfirmationRequired" link type="primary" @click="openFeeConfirmation\([^)]*\)">确认计费重<\/el-button>/g) ?? []
-  assert.equal(entries.length, 2)
+  assert.equal(entries.length, 1)
+  assert.match(source, /if \(canConfirmInboundFee\.value && order\.businessSummary\.customerFeeConfirmationRequired\) \{\s*actions\.push\(\{ key: 'fee'/)
+  assert.match(source, /:row-actions="getOrderRowActions"/)
  assert.match(orderStoreSource, /customerFeeConfirmationRequired: summary\?\.customerFeeConfirmationRequired \?\? false/)
 })

@@ -595,7 +602,7 @@ test('opens customer customs documents only for server-confirmed loaded tax-refu
  assert.match(source, /order\.status !== 'LOADED'/)
  assert.match(source, /item\.orderId === order\.id && item\.taxMode === 'TAX_REFUND'/)
  assert.match(source, /getMerchantCustomsForOrder\(order\.id\)/)
-  assert.match(source, /v-if="eligibleCustomsDetail\(row as FirstLegOrder\)"[\s\S]*?报关资料/)
+  assert.match(source, /if \(eligibleCustomsDetail\(order\)\) \{\s*actions\.push\(\{ key: 'customs', label: '报关资料'/)
  assert.match(source, /class="mobile-order-card"[\s\S]*?v-if="eligibleCustomsDetail\(order\)"[\s\S]*?openCustomsDocuments\(order\)[\s\S]*?报关资料/)
  assert.match(source, /<CustomsDocumentsDialog[\s\S]*?:can-edit="auth\.hasPermission\('order:first-leg:edit'\)"/)
  assert.doesNotMatch(customsApiSource, /customs\/cases\//)
@@ -2,10 +2,11 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox, type FormInstance, type FormItemRule, type FormRules, type UploadRequestOptions } from 'element-plus'
-import { AlertTriangle, Box, ChevronDown, ChevronUp, Download, Eye, FilePlus2, FileText, GripVertical, ImagePlus, MapPin, PackageCheck, Pencil, Plus, RotateCcw, Send, SlidersHorizontal, Trash2, Upload } from '@lucide/vue'
+import { AlertTriangle, Box, ChevronDown, ChevronUp, Download, FilePlus2, FileText, GripVertical, ImagePlus, MapPin, PackageCheck, Pencil, Plus, RotateCcw, Send, SlidersHorizontal, Trash2, Upload } from '@lucide/vue'
 import { FIRST_LEG_ORDER_STATUSES, type FirstLegOrderStatus } from '@chongchong/shared'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import type { TableAction } from '@/components/common/tableActions'
 import { ApiError } from '@/api/http'
 import FirstLegOrderEditorShell from '@/modules/first-leg/components/FirstLegOrderEditorShell.vue'
 import InboundBillingPanel from '@/modules/first-leg/components/InboundBillingPanel.vue'
@@ -110,11 +111,12 @@ const batchImportResult = ref<MerchantBatchImportResponse | null>(null)
 const batchImportError = ref('')
 const fixedOrderColumns: DataTableColumn[] = [
  { key: 'selection', type: 'selection', width: 48, fixed: 'left', reserveSelection: true },
-  { key: 'actions', label: '操作', width: 216, fixed: 'left', align: 'center', headerAlign: 'center', slotName: 'actions' },
-  { key: 'order', label: '订单号', width: 190, fixed: 'left', align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'order' },
+  { key: 'actions', label: '操作', width: 284, fixed: 'left', align: 'left', headerAlign: 'left', slotName: 'actions' },
+  { key: 'order', label: '订单号', width: 240, fixed: 'left', align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'order' },
 ]
 const selectableOrderColumns: DataTableColumn[] = [
-  { key: 'inboundCode', label: '入仓码', width: 176, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'inboundCode' },
+  { key: 'inboundCode', label: '入仓码', width: 230, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'inboundCode' },
+  { key: 'status', label: '当前订单状态', width: 126, align: 'center', headerAlign: 'center', slotName: 'status' },
  { key: 'channel', label: '渠道', width: 150, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'channel' },
  { key: 'transportMode', label: '运输方式', width: 104, align: 'center', headerAlign: 'center', slotName: 'transportMode' },
  { key: 'pickupMethod', label: '交货方式', width: 112, align: 'center', headerAlign: 'center', slotName: 'pickupMethod' },
@@ -122,7 +124,6 @@ const selectableOrderColumns: DataTableColumn[] = [
  { key: 'receivingWarehouse', label: '国内收货仓', width: 150, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'receivingWarehouse' },
  { key: 'destinationWarehouse', label: '目的仓', width: 120, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'destinationWarehouse' },
  { key: 'destinationType', label: '目的仓类型', width: 112, align: 'center', headerAlign: 'center', slotName: 'destinationType' },
-  { key: 'status', label: '当前订单状态', width: 126, align: 'center', headerAlign: 'center', slotName: 'status' },
  { key: 'packageCount', label: '箱数', width: 82, align: 'center', headerAlign: 'center', slotName: 'packageCount' },
  { key: 'expressCompany', label: '快递公司', width: 128, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'expressCompany' },
  { key: 'trackingNumber', label: '快递单号', width: 158, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'trackingNumber' },
@@ -1157,6 +1158,23 @@ async function autofillWarehouseSelections() {
  markEditorClean()
 }

+function getOrderRowActions(row: object): TableAction[] {
+  const order = row as FirstLegOrder
+  const actions: TableAction[] = [
+    { key: 'detail', label: '详情', run: () => openDetail(order) },
+  ]
+  if (canConfirmInboundFee.value && order.businessSummary.customerFeeConfirmationRequired) {
+    actions.push({ key: 'fee', label: '确认计费重', run: () => openFeeConfirmation(order) })
+  }
+  if (canEditOrder.value && canClientEditFirstLegOrder(order.status)) {
+    actions.push({ key: 'edit', label: '编辑', loading: openingEditor.value, run: () => openEdit(order) })
+  }
+  if (eligibleCustomsDetail(order)) {
+    actions.push({ key: 'customs', label: '报关资料', run: () => openCustomsDocuments(order) })
+  }
+  return actions
+}
+
 async function openCreate() {
  if (availableWarehouses.value.length === 0) {
    ElMessage.warning(supportingDataLoading.value
@@ -1860,14 +1878,14 @@ async function searchOrders(model: QueryModel) {
 </script>

 <template>
-  <section class="first-leg-page" :class="{ 'is-create-route': isCreatePage }">
+  <section class="first-leg-page" :class="{ 'is-create-route': isCreatePage, 'client-ui': !isCreatePage }">
    <template v-if="!isCreatePage">
-    <QueryToolbar v-model="filters" class="first-leg-query-toolbar" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" />
+    <QueryToolbar v-model="filters" class="first-leg-query-toolbar" layout="grid" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" />

    <div class="client-card order-table-card">
-      <div class="order-table-toolbar">
-        <div><strong>订单列表</strong><span>共 {{ filteredOrders.length }} 条</span></div>
-        <div class="order-table-toolbar-actions">
+        <DataTable v-model:page="tablePage" v-model:page-size="tablePageSize" :data="pagedOrders" :columns="visibleOrderColumns" :key="orderTableVersion" :loading="store.loading" :total="filteredOrders.length" :page-sizes="[10, 20, 50]" row-key="id" empty-text="暂无订单" class="prototype-order-table" :row-actions="getOrderRowActions" @selection-change="handleOrderSelectionChange">
+          <template #toolbar><strong>订单列表</strong><span>共 {{ filteredOrders.length }} 条</span><span v-if="selectedOrderCount">已选 {{ selectedOrderCount }} 条</span></template>
+          <template #toolbar-actions>
          <el-popover placement="bottom-end" :width="320" trigger="click" popper-class="order-column-popper">
            <template #reference>
              <el-button class="column-settings-trigger" aria-label="设置订单列表显示列" title="设置显示列"><SlidersHorizontal :size="18" /></el-button>
@@ -1899,8 +1917,9 @@ async function searchOrders(model: QueryModel) {
          <el-button v-if="canSubmitOrder" :loading="batchSubmitting" :disabled="selectedDraftOrders.length === 0 || companySubmissionBlocked" @click="submitSelectedDraftOrders"><Send :size="17" />批量提交草稿</el-button>
          <el-button v-if="auth.hasPermission('order:first-leg:create')" @click="openBatchImport"><Upload :size="17" />批量导入订单</el-button>
          <el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :loading="pageDataLoading" :disabled="pageDataLoading || availableWarehouses.length === 0" @click="openCreate"><FilePlus2 :size="17" />创建订单</el-button>
-        </div>
-      </div>
+
+          </template>
+          <template #before-table>
      <div v-if="companySubmissionBlocked && !supportingDataErrors.some((message) => message.startsWith('企业资料'))" class="order-eligibility is-pending" role="status">
        <AlertTriangle :size="20" />
        <div><strong>{{ canCreateOrder ? '企业资料待审核，当前仅可保存订单草稿' : '企业资料待审核，当前订单为只读' }}</strong><span>{{ canCreateOrder ? '平台审核通过后即可提交；您仍可创建、编辑和保存草稿。' : '您当前拥有只读权限，可以继续查看订单进展。' }}</span></div>
@@ -1911,21 +1930,15 @@ async function searchOrders(model: QueryModel) {
        <div><strong>部分订单配套数据加载失败</strong><span v-for="message in supportingDataErrors" :key="message">{{ message }}</span></div>
        <el-button :loading="supportingDataLoading || store.loading" @click="loadPageData">重新加载</el-button>
      </div>
-      <div v-if="store.loadError" class="order-load-state" role="alert">
+
+          </template>
+          <template v-if="store.loadError" #error>
+      <div class="order-load-state" role="alert">
        <AlertTriangle :size="24" />
        <div><strong>订单数据加载失败</strong><span>{{ store.loadError }}</span></div>
        <el-button :loading="store.loading" @click="loadPageData">重新加载</el-button>
      </div>
-      <template v-else>
-      <div class="desktop-order-table">
-        <DataTable v-model:page="tablePage" v-model:page-size="tablePageSize" :data="pagedOrders" :columns="visibleOrderColumns" :key="orderTableVersion" :loading="store.loading" :total="filteredOrders.length" :page-sizes="[10, 20, 50]" row-key="id" empty-text="暂无订单" class="prototype-order-table" @selection-change="handleOrderSelectionChange">
-          <template #actions="{ row }">
-            <div class="order-row-actions">
-              <el-button link type="primary" @click="openDetail(row as FirstLegOrder)"><Eye :size="15" />详情</el-button>
-              <el-button v-if="canConfirmInboundFee && (row as FirstLegOrder).businessSummary.customerFeeConfirmationRequired" link type="primary" @click="openFeeConfirmation(row as FirstLegOrder)">确认计费重</el-button>
-              <el-button v-if="canEditOrder && canClientEditFirstLegOrder((row as FirstLegOrder).status)" link type="primary" :loading="openingEditor" @click="openEdit(row as FirstLegOrder)"><Pencil :size="15" />编辑</el-button>
-              <el-button v-if="eligibleCustomsDetail(row as FirstLegOrder)" link type="primary" @click="openCustomsDocuments(row as FirstLegOrder)"><FileText :size="15" />报关资料</el-button>
-            </div>
+
          </template>
          <template #order="{ row }">
            <button class="order-number-link table-code" type="button" :title="(row as FirstLegOrder).orderNo || '—'" @click="openDetail(row as FirstLegOrder)">{{ (row as FirstLegOrder).orderNo || '—' }}</button>
@@ -1947,7 +1960,7 @@ async function searchOrders(model: QueryModel) {
          <template #receivingWarehouse="{ row }"><span class="table-ellipsis" :title="displayListValue((row as FirstLegOrder).receivingWarehouseName)">{{ displayListValue((row as FirstLegOrder).receivingWarehouseName) }}</span></template>
          <template #destinationWarehouse="{ row }"><span class="table-ellipsis" :title="displayListValue((row as FirstLegOrder).destinationWarehouseName)">{{ displayListValue((row as FirstLegOrder).destinationWarehouseName) }}</span></template>
          <template #destinationType="{ row }">{{ destinationTypeLabels[(row as FirstLegOrder).destinationType] }}</template>
-          <template #status="{ row }"><el-tag :type="getFirstLegStatusTone((row as FirstLegOrder).status)" effect="light">{{ getFirstLegStatusLabel((row as FirstLegOrder).status) }}</el-tag></template>
+          <template #status="{ row }"><span class="client-status" :data-tone="getFirstLegStatusTone((row as FirstLegOrder).status)">{{ getFirstLegStatusLabel((row as FirstLegOrder).status) }}</span></template>
          <template #packageCount="{ row }">{{ formatListMetric(orderPackageCount(row as FirstLegOrder)) }}</template>
          <template #expressCompany="{ row }"><span class="table-ellipsis" :title="displayListValue((row as FirstLegOrder).expressCompanyName)">{{ displayListValue((row as FirstLegOrder).expressCompanyName) }}</span></template>
          <template #trackingNumber="{ row }"><span class="table-ellipsis table-code" :title="displayListValue((row as FirstLegOrder).trackingNumber)">{{ displayListValue((row as FirstLegOrder).trackingNumber) }}</span></template>
@@ -1975,8 +1988,7 @@ async function searchOrders(model: QueryModel) {
            </el-empty>
          </template>
        </DataTable>
-      </div>
-      <div v-loading="store.loading" class="mobile-order-surface">
+      <div v-if="!store.loadError" v-loading="store.loading" class="mobile-order-surface">
      <div v-if="filteredOrders.length" class="mobile-order-list">
        <article v-for="order in filteredOrders" :key="order.id" class="mobile-order-card">
          <header><button type="button" @click="openDetail(order)">{{ order.orderNo || '—' }}</button><el-tag :type="getFirstLegStatusTone(order.status)" effect="light">{{ getFirstLegStatusLabel(order.status) }}</el-tag></header>
@@ -1987,10 +1999,10 @@ async function searchOrders(model: QueryModel) {
          <footer>
            <span>更新于 {{ formatDateTime(order.updatedAt) }}</span>
            <div>
-              <el-button link type="primary" @click="openDetail(order)"><Eye :size="15" />详情</el-button>
+              <el-button link type="primary" @click="openDetail(order)">详情</el-button>
              <el-button v-if="canConfirmInboundFee && order.businessSummary.customerFeeConfirmationRequired" link type="primary" @click="openFeeConfirmation(order)">确认计费重</el-button>
-              <el-button v-if="canEditOrder && canClientEditFirstLegOrder(order.status)" link type="primary" :loading="openingEditor" @click="openEdit(order)"><Pencil :size="15" />编辑</el-button>
-              <el-button v-if="eligibleCustomsDetail(order)" link type="primary" @click="openCustomsDocuments(order)"><FileText :size="15" />报关资料</el-button>
+              <el-button v-if="canEditOrder && canClientEditFirstLegOrder(order.status)" link type="primary" :loading="openingEditor" @click="openEdit(order)">编辑</el-button>
+              <el-button v-if="eligibleCustomsDetail(order)" link type="primary" @click="openCustomsDocuments(order)">报关资料</el-button>
            </div>
          </footer>
        </article>
@@ -1999,7 +2011,6 @@ async function searchOrders(model: QueryModel) {
        <el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :loading="pageDataLoading" :disabled="pageDataLoading || availableWarehouses.length === 0" @click="openCreate"><Plus :size="16" />{{ pageDataLoading ? '加载收货仓中' : (availableWarehouses.length ? '创建第一笔订单' : '暂无可用收货仓') }}</el-button>
      </el-empty>
      </div>
-      </template>
    </div>
    </template>

@@ -2040,7 +2051,7 @@ async function searchOrders(model: QueryModel) {
              <small v-if="channelError" class="field-guidance field-guidance--error">渠道加载失败：{{ channelError }} <el-button link type="primary" @click="retryPricingChannels">重试</el-button></small>
              <small v-else-if="form.receivingWarehouseId && !channelLoading && channelOptions.length === 0" class="field-guidance">当前收货仓暂无可用渠道，请联系平台管理员。</small>
            </el-form-item>
-            <el-form-item label="报价包税方式" prop="pricingTaxMode" required>
+            <el-form-item label="报价包税方式" prop="pricingTaxMode" required class="pricing-tax-mode-field">
              <el-radio-group v-model="form.pricingTaxMode"><el-radio v-for="mode in availablePricingTaxModes" :key="mode" :value="mode">{{ pricingTaxModeLabel(mode) }}</el-radio></el-radio-group>
              <small v-if="form.channelCode && availablePricingTaxModes.length === 0" class="field-guidance field-guidance--error">当前渠道没有可用报价方式，请重新选择渠道。</small>
            </el-form-item>
@@ -2339,17 +2350,9 @@ async function searchOrders(model: QueryModel) {
 </template>

 <style scoped>
-.first-leg-page { display: flex; flex-direction: column; gap: 14px; }
+.first-leg-page { display: flex; flex-direction: column; gap: var(--client-section-gap); }
 :global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading) { margin-bottom: 0; }
 :global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading > div) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
-.first-leg-query-toolbar { display: block; padding: 16px 18px 14px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 3px 14px rgba(31, 48, 78, .05); }
-.first-leg-query-toolbar :deep(.query-toolbar__filters) { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
-.first-leg-query-toolbar :deep(.query-toolbar__field) { min-width: 0; }
-.first-leg-query-toolbar :deep(.query-toolbar__field .el-input), .first-leg-query-toolbar :deep(.query-toolbar__field .el-select), .first-leg-query-toolbar :deep(.query-toolbar__field .el-date-editor) { flex: 1 1 auto; width: 100%; }
-.first-leg-query-toolbar :deep(.query-toolbar__filters .el-input), .first-leg-query-toolbar :deep(.query-toolbar__filters .el-select), .first-leg-query-toolbar :deep(.query-toolbar__filters .el-date-editor) { width: 100%; }
-.first-leg-query-toolbar :deep(.query-toolbar__actions) { justify-content: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0f5; }
-.first-leg-query-toolbar :deep(.query-toolbar__actions .el-button) { min-height: 36px; margin-left: 0; }
-.first-leg-query-toolbar :deep(.query-toolbar__actions .query-export-button) { order: -1; }
 .order-eligibility { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid; }
 .order-eligibility svg { flex: 0 0 20px; margin-top: 1px; }
 .order-eligibility div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
@@ -2361,13 +2364,7 @@ async function searchOrders(model: QueryModel) {
 .supporting-data-error strong { color: var(--navy); font-size: 13px; }
 .supporting-data-error span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; }
 .order-row-actions, .editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
-.order-table-card { padding: 0; overflow: hidden; }
-.order-table-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
-.order-table-toolbar > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
-.order-table-toolbar strong { color: var(--navy); font-size: 14px; }
-.order-table-toolbar span { color: var(--muted); font-size: 11px; }
-.order-table-toolbar > .order-table-toolbar-actions { align-items: center; gap: 8px; }
-.order-table-toolbar-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.order-table-card { padding: 0; overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); box-shadow: none; }
 .batch-import-dialog { display: flex; flex-direction: column; gap: 18px; }
 .batch-import-actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 10px; }
 .batch-import-actions > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
@@ -2390,17 +2387,6 @@ async function searchOrders(model: QueryModel) {
 :global(.order-column-popper .column-settings-item .el-checkbox.is-checked .el-checkbox__label) { color: var(--primary); }
 :global(.order-column-popper .column-settings-item .el-button) { width: 28px; height: 28px; padding: 0; margin: 0; color: #45556e; }
 :global(.order-column-popper .column-settings-reset) { min-height: 36px; margin: 8px 6px 0; color: #40516b; }
-.prototype-order-table { font-size: 11px; }
-.prototype-order-table :deep(.el-table) { color: #626b78; font-size: 11px; }
-.prototype-order-table :deep(.el-table__header-wrapper th.el-table__cell) { height: 44px; padding: 0; background: #fafbfc; color: #687386; font-size: 11px; font-weight: 650; vertical-align: middle; }
-.prototype-order-table :deep(.el-table__body-wrapper td.el-table__cell) { height: 50px; padding: 0; vertical-align: middle; }
-.prototype-order-table :deep(.el-table .cell) { min-width: 0; padding: 0 12px; line-height: 18px; white-space: nowrap; }
-.prototype-order-table :deep(.el-table__header-wrapper .cell) { overflow: visible; line-height: 16px; text-overflow: clip; }
-.prototype-order-table :deep(.el-table__body-wrapper .cell) { overflow: hidden; }
-.prototype-order-table :deep(.el-tag) { height: 24px; padding: 0 9px; line-height: 22px; white-space: nowrap; }
-.prototype-order-table :deep(.el-table__row:nth-child(even) td.el-table__cell) { background: #fcfcfd; }
-.prototype-order-table :deep(.el-table__row:hover > td.el-table__cell) { background: #f6f8fc; }
-.prototype-order-table :deep(.data-table__pagination) { min-height: 54px; padding: 10px 16px; }
 .table-ellipsis, .table-multivalue { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .table-code { font-variant-numeric: tabular-nums; letter-spacing: 0; }
 .order-table-card > .order-eligibility, .order-table-card > .supporting-data-error { border-width: 0 0 1px; }
@@ -2418,8 +2404,8 @@ async function searchOrders(model: QueryModel) {
 :global(.first-leg-detail-dialog .el-dialog__footer) { flex: 0 0 auto; padding: 12px 22px; border-top: 1px solid var(--border); background: #fff; }
 .mobile-order-surface { display: none; min-height: 220px; }
 .mobile-order-list { display: none; }
-.order-number-link { display: block; width: 100%; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: var(--primary); cursor: pointer; font-size: 11px; font-weight: 700; line-height: 18px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
-.inbound-code-link { max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; }
+.order-number-link { display: block; width: 100%; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: var(--client-action); cursor: pointer; font-size: var(--client-font-size); font-weight: 700; line-height: 18px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
+.inbound-code-link { max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--client-action); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; }
 .inbound-code-link:hover, .inbound-code-link:focus-visible { text-decoration-color: currentColor; }
 .inbound-code-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
 .order-number-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@@ -2509,7 +2495,7 @@ async function searchOrders(model: QueryModel) {
 .shipping-form-flow .prototype-form-row--tabs { margin-bottom: 12px; }
 .compact-transport-grid { display: grid; width: 100%; grid-template-columns: 1fr; gap: 0; margin: 6px 0 0; }
 .compact-transport-grid > :deep(.el-form-item) { display: grid; width: 100%; grid-template-columns: 114px minmax(0, 560px); align-items: start; margin-bottom: 10px; }
-.compact-transport-grid > :deep(.el-form-item:nth-child(2)) { display: none; }
+.compact-transport-grid > :deep(.pricing-tax-mode-field) { display: none; }
 .compact-transport-grid > :deep(.el-form-item:nth-child(1)) { grid-template-columns: 114px minmax(0, 360px); }
 .compact-transport-grid > :deep(.el-form-item:nth-child(6)) { grid-template-columns: 114px minmax(0, 360px); }
 .compact-transport-grid > :deep(.el-form-item:nth-child(7)) { grid-template-columns: 114px minmax(0, 620px); margin-top: 2px; margin-bottom: 0; }
@@ -2643,7 +2629,7 @@ async function searchOrders(model: QueryModel) {
 :deep(.el-timeline-item__content > span) { font-size: 11px; }
@media (max-width: 1280px) {
  .first-leg-query-toolbar :deep(.query-toolbar__filters) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .desktop-order-table { display: none; }
+  .prototype-order-table :deep(> .el-table), .prototype-order-table :deep(> .data-table__pagination) { display: none; }
  .mobile-order-surface { display: block; }
  .mobile-order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  .mobile-order-card { min-width: 0; padding: 14px; border: 1px solid var(--border); background: #fff; }
@@ -2666,9 +2652,6 @@ async function searchOrders(model: QueryModel) {
  .first-leg-query-toolbar { padding: 12px; }
  .first-leg-query-toolbar :deep(.query-toolbar__filters) { display: flex; }
  :global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading) { margin-bottom: 10px; }
-  .order-table-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
-  .order-table-toolbar > div { justify-content: space-between; }
-  .order-table-toolbar .el-button { width: 100%; min-height: 40px; }
  .order-eligibility { flex-wrap: wrap; }
  .order-eligibility .el-button { width: 100%; min-height: 44px; }
  .order-form-grid, .order-detail-grid, .cargo-form-grid, .cargo-form-grid--basic, .party-detail-grid { grid-template-columns: 1fr; }
@@ -2686,7 +2669,7 @@ async function searchOrders(model: QueryModel) {
  .segmented-options :deep(.el-radio-button__inner) { border: 1px solid var(--border); border-radius: 6px !important; box-shadow: none !important; }
  .warehouse-options { width: 100%; gap: 12px 18px; }
  .compact-transport-grid > :deep(.el-form-item), .compact-transport-grid > :deep(.el-form-item:nth-child(7)) { display: block; margin-bottom: 14px; }
-.compact-transport-grid > :deep(.el-form-item:nth-child(2)) { display: none; }
+.compact-transport-grid > :deep(.pricing-tax-mode-field) { display: none; }
  .compact-transport-grid > :deep(.el-form-item__label) { min-height: auto; justify-content: flex-start; padding: 0 0 8px; line-height: 1.4; }
  .cargo-table-toolbar { align-items: stretch; flex-direction: column; }
  .cargo-import-actions, .cargo-table-actions { flex-wrap: wrap; }
@@ -2697,7 +2680,7 @@ async function searchOrders(model: QueryModel) {
  .price-estimate__state.is-error { align-items: flex-start; flex-direction: column; }
  .form-span-full { grid-column: auto; }
  .editor-actions :deep(.el-button) { min-height: 44px; }
-  .desktop-order-table { display: none; }
+  .prototype-order-table :deep(> .el-table), .prototype-order-table :deep(> .data-table__pagination) { display: none; }
  .order-load-state { min-height: 240px; grid-template-columns: 1fr; justify-items: start; }
  .supporting-data-error { grid-template-columns: auto minmax(0, 1fr); }
  .supporting-data-error .el-button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
@@ -0,0 +1,56 @@
+/* Client content standard. Sidebar and brand navigation are intentionally outside this scope. */
+:root {
+  --client-action: #1777ff;
+  --client-action-hover: #0958d9;
+  --client-text: #344054;
+  --client-muted: #667085;
+  --client-border: #e4e7ec;
+  --client-surface: #fff;
+  --client-header-bg: #f8fafc;
+  --client-hover-bg: #f5f8ff;
+  --client-success: #067647;
+  --client-success-bg: #ecfdf3;
+  --client-warning: #b54708;
+  --client-warning-bg: #fffaeb;
+  --client-danger: #b42318;
+  --client-danger-bg: #fef3f2;
+  --client-info: #475467;
+  --client-info-bg: #f2f4f7;
+  --client-progress: #175cd3;
+  --client-progress-bg: #eff8ff;
+  --client-font-size: 13px;
+  --client-control-height: 32px;
+  --client-row-action-height: 28px;
+  --client-table-header-height: 44px;
+  --client-table-row-height: 48px;
+  --client-toolbar-padding: 8px 16px;
+  --client-pagination-padding: 12px 16px;
+  --client-query-padding: 16px;
+  --client-gap: 8px;
+  --client-section-gap: 16px;
+  --client-radius: 6px;
+}
+.client-ui { color: var(--client-text); font-size: var(--client-font-size); --el-color-primary: var(--client-action); --el-color-primary-light-3: #609fff; --el-color-primary-light-5: #8bbbff; --el-color-primary-light-7: #bad6ff; --el-color-primary-light-8: #d1e4ff; --el-color-primary-light-9: #e8f1ff; --el-color-primary-dark-2: var(--client-action-hover); }
+.client-ui .el-button {
+  --el-button-text-color: var(--client-action);
+  --el-button-border-color: var(--client-border);
+  --el-button-hover-text-color: var(--client-action-hover);
+  --el-button-hover-border-color: #b2ccff;
+  --el-button-hover-bg-color: var(--client-hover-bg);
+  height: var(--client-control-height); border-radius: var(--client-radius); font-size: var(--client-font-size);
+}
+.client-ui .el-button--primary { --el-button-bg-color: var(--client-action); --el-button-border-color: var(--client-action); --el-button-text-color: #fff; --el-button-hover-bg-color: var(--client-action-hover); --el-button-hover-border-color: var(--client-action-hover); --el-button-hover-text-color: #fff; --el-button-active-bg-color: var(--client-action-hover); --el-button-active-border-color: var(--client-action-hover); }
+.client-ui .el-button--success { --el-button-text-color: var(--client-success); --el-button-bg-color: var(--client-success-bg); --el-button-border-color: #abefc6; --el-button-hover-text-color: var(--client-success); --el-button-hover-bg-color: #dcfae6; }
+.client-ui .el-button--warning { --el-button-text-color: var(--client-warning); --el-button-bg-color: var(--client-warning-bg); --el-button-border-color: #fedf89; --el-button-hover-text-color: var(--client-warning); --el-button-hover-bg-color: #fef0c7; }
+.client-ui .el-button--danger { --el-button-text-color: var(--client-danger); --el-button-bg-color: var(--client-danger-bg); --el-button-border-color: #fecdca; --el-button-hover-text-color: var(--client-danger); --el-button-hover-bg-color: #fee4e2; }
+.client-ui .el-button.is-link, .client-ui .el-button.is-text { --el-button-text-color: var(--client-action); --el-button-hover-text-color: var(--client-action-hover); }
+.client-ui .el-button.is-disabled { color: #98a2b3; background: #f9fafb; border-color: var(--client-border); }
+.client-ui .el-button > span { gap: 4px; }
+.client-ui .el-input__wrapper, .client-ui .el-select__wrapper { min-height: var(--client-control-height); font-size: var(--client-font-size); }
+.client-ui .el-button:focus-visible { outline: 2px solid var(--client-action); outline-offset: 2px; }
+.client-status { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: 999px; color: var(--client-info); background: var(--client-info-bg); font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
+.client-status::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.client-status[data-tone="primary"] { color: var(--client-progress); background: var(--client-progress-bg); }
+.client-status[data-tone="success"] { color: var(--client-success); background: var(--client-success-bg); }
+.client-status[data-tone="warning"] { color: var(--client-warning); background: var(--client-warning-bg); }
+.client-status[data-tone="danger"] { color: var(--client-danger); background: var(--client-danger-bg); }
@@ -1,4 +1,5 @@
@import './foundation.css';
+@import './client-ui.css';
@import './shell.css';
@import './workspace-tabs.css';