feat(web): I1 shell and I2 customer/project UI

Vue 3 + Element Plus layout with JWT login, RBAC routes, axios 401
handling with token restore, and Customers/Projects views wired to
platform APIs.

Made-with: Cursor

web/delivery-platform-ui/src/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+</script>
+
+<style>
+html,
+body,
+#app {
+  margin: 0;
+  height: 100%;
+}
+</style>

web/delivery-platform-ui/src/api/platform.js

@@ -0,0 +1,43 @@
+import axios from "axios";
+
+/**
+ * @param {{ page?: number, size?: number, keyword?: string }} params
+ */
+export function listCustomers(params) {
+  return axios.get("/api/v1/customers", { params });
+}
+
+export function createCustomer(body) {
+  return axios.post("/api/v1/customers", body);
+}
+
+export function updateCustomer(id, body) {
+  return axios.put(`/api/v1/customers/${id}`, body);
+}
+
+export function deleteCustomer(id) {
+  return axios.delete(`/api/v1/customers/${id}`);
+}
+
+/**
+ * @param {{ page?: number, size?: number, customerId?: string | number }} params
+ */
+export function listProjects(params) {
+  return axios.get("/api/v1/projects", { params });
+}
+
+export function createProject(body) {
+  return axios.post("/api/v1/projects", body);
+}
+
+export function updateProject(id, body) {
+  return axios.put(`/api/v1/projects/${id}`, body);
+}
+
+export function deleteProject(id) {
+  return axios.delete(`/api/v1/projects/${id}`);
+}
+
+export function getProjectPhaseDictionary() {
+  return axios.get("/api/v1/dictionaries/PROJECT_PHASE");
+}

web/delivery-platform-ui/src/layout/MainLayout.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-container class="shell">
+    <el-aside width="220px" class="aside">
+      <div class="brand">创飞 · 交付平台</div>
+      <el-menu router :default-active="route.path" background-color="#001529" text-color="#fff" active-text-color="#ffd04b">
+        <el-menu-item index="/">
+          <span>首页</span>
+        </el-menu-item>
+        <el-menu-item index="/customers">
+          <span>客户管理</span>
+        </el-menu-item>
+        <el-menu-item index="/projects">
+          <span>项目管理</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-container>
+      <el-header class="top">
+        <span class="user">{{ auth.displayName || "—" }}</span>
+        <el-button type="danger" link @click="logout">退出</el-button>
+      </el-header>
+      <el-main class="main">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "../stores/auth";
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthStore();
+
+function logout() {
+  auth.logout();
+  router.push({ name: "login" });
+}
+</script>
+
+<style scoped>
+.shell {
+  height: 100vh;
+}
+.aside {
+  background: #001529;
+  color: #fff;
+}
+.brand {
+  padding: 16px;
+  font-weight: 600;
+  border-bottom: 1px solid #ffffff22;
+}
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  border-bottom: 1px solid #ebeef5;
+}
+.user {
+  color: #606266;
+  font-size: 14px;
+}
+.main {
+  background: #f0f2f5;
+}
+</style>

web/delivery-platform-ui/src/main.js

@@ -0,0 +1,33 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import axios from "axios";
+import App from "./App.vue";
+import router from "./router";
+import { useAuthStore } from "./stores/auth";
+
+const pinia = createPinia();
+const app = createApp(App);
+app.use(pinia);
+
+useAuthStore(pinia).restoreAxiosAuth();
+
+axios.interceptors.response.use(
+  (r) => r,
+  (err) => {
+    if (err.response?.status === 401) {
+      const auth = useAuthStore();
+      auth.logout();
+      if (router.currentRoute.value.name !== "login") {
+        router.push({
+          name: "login",
+          query: { redirect: router.currentRoute.value.fullPath },
+        });
+      }
+    }
+    return Promise.reject(err);
+  },
+);
+
+app.use(router).use(ElementPlus).mount("#app");

web/delivery-platform-ui/src/router/index.js

@@ -0,0 +1,57 @@
+import { createRouter, createWebHistory } from "vue-router";
+import { useAuthStore } from "../stores/auth";
+
+const routes = [
+  { path: "/login", name: "login", component: () => import("../views/LoginView.vue") },
+  {
+    path: "/",
+    component: () => import("../layout/MainLayout.vue"),
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: "",
+        name: "home",
+        component: () => import("../views/HomeView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER"] },
+      },
+      {
+        path: "customers",
+        name: "customers",
+        component: () => import("../views/CustomersView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER"] },
+      },
+      {
+        path: "projects",
+        name: "projects",
+        component: () => import("../views/ProjectsView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER"] },
+      },
+    ],
+  },
+  { path: "/403", name: "forbidden", component: () => import("../views/ForbiddenView.vue") },
+  { path: "/:pathMatch(.*)*", name: "notfound", component: () => import("../views/NotFoundView.vue") },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+function hasRoleAccess(metaRoles, userRoles) {
+  if (!metaRoles || metaRoles.length === 0) return true;
+  const set = new Set(userRoles || []);
+  return metaRoles.some((r) => set.has(r));
+}
+
+router.beforeEach((to) => {
+  const auth = useAuthStore();
+  if (to.meta.requiresAuth && !auth.token) {
+    return { name: "login", query: { redirect: to.fullPath } };
+  }
+  if (to.meta.requiresAuth && to.meta.roles && !hasRoleAccess(to.meta.roles, auth.roles)) {
+    return { name: "forbidden" };
+  }
+  return true;
+});
+
+export default router;

web/delivery-platform-ui/src/stores/auth.js

@@ -0,0 +1,34 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+
+const TOKEN_KEY = "craftlabs_platform_token";
+
+export const useAuthStore = defineStore("auth", {
+  state: () => ({
+    token: localStorage.getItem(TOKEN_KEY) || "",
+    displayName: "",
+    roles: [],
+  }),
+  actions: {
+    async login(username, password) {
+      const { data } = await axios.post("/api/v1/auth/login", { username, password });
+      this.token = data.token;
+      this.displayName = data.displayName || username;
+      this.roles = data.roles || [];
+      localStorage.setItem(TOKEN_KEY, this.token);
+      axios.defaults.headers.common.Authorization = `Bearer ${this.token}`;
+    },
+    logout() {
+      this.token = "";
+      this.displayName = "";
+      this.roles = [];
+      localStorage.removeItem(TOKEN_KEY);
+      delete axios.defaults.headers.common.Authorization;
+    },
+    restoreAxiosAuth() {
+      if (this.token) {
+        axios.defaults.headers.common.Authorization = `Bearer ${this.token}`;
+      }
+    },
+  },
+});

web/delivery-platform-ui/src/utils/apiErrorMessage.js

@@ -0,0 +1,19 @@
+/**
+ * @param {unknown} err
+ * @param {string} fallback
+ */
+export function apiErrorMessage(err, fallback) {
+  const e = err && typeof err === "object" && "response" in err ? err : null;
+  const data = e?.response?.data;
+  if (typeof data === "string" && data.trim()) return data;
+  if (data && typeof data === "object") {
+    if (typeof data.message === "string" && data.message.trim()) return data.message;
+    if (Array.isArray(data.errors)) {
+      const parts = data.errors
+        .map((x) => (x && typeof x === "object" ? x.defaultMessage || x.message : null))
+        .filter(Boolean);
+      if (parts.length) return parts.join("；");
+    }
+  }
+  return fallback;
+}

web/delivery-platform-ui/src/views/CustomersView.vue

@@ -0,0 +1,216 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <span class="title">客户管理</span>
+        <div class="actions">
+          <el-input
+            v-model="keyword"
+            clearable
+            placeholder="按名称或信用代码搜索"
+            class="search"
+            @keyup.enter="load"
+          />
+          <el-button type="primary" :loading="loading" @click="load">查询</el-button>
+          <el-button type="success" @click="openCreate">新建客户</el-button>
+        </div>
+      </div>
+    </template>
+
+    <el-table v-loading="loading" :data="rows" stripe style="width: 100%">
+      <el-table-column prop="name" label="客户名称" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="creditCode" label="统一社会信用代码" min-width="200" show-overflow-tooltip />
+      <el-table-column label="操作" width="160" fixed="right">
+        <template #default="{ row }">
+          <el-button type="primary" link @click="openEdit(row)">编辑</el-button>
+          <el-button type="danger" link @click="onDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pager">
+      <el-pagination
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="onSizeChange"
+      />
+    </div>
+
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="480px" destroy-on-close @closed="resetForm">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
+        <el-form-item label="客户名称" prop="name">
+          <el-input v-model="form.name" maxlength="200" show-word-limit placeholder="请输入客户名称" />
+        </el-form-item>
+        <el-form-item label="统一社会信用代码" prop="creditCode">
+          <el-input v-model="form.creditCode" maxlength="32" clearable placeholder="选填" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="submit">保存</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import { listCustomers, createCustomer, updateCustomer, deleteCustomer } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+
+const loading = ref(false);
+const saving = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const keyword = ref("");
+
+const dialogVisible = ref(false);
+const editingId = ref(null);
+const formRef = ref(null);
+const form = reactive({
+  name: "",
+  creditCode: "",
+});
+
+const rules = {
+  name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
+};
+
+const dialogTitle = computed(() => (editingId.value ? "编辑客户" : "新建客户"));
+
+onMounted(() => {
+  auth.restoreAxiosAuth();
+  load();
+});
+
+function onSizeChange() {
+  page.value = 1;
+  load();
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const { data } = await listCustomers({
+      page: page.value - 1,
+      size: pageSize.value,
+      keyword: keyword.value?.trim() || undefined,
+    });
+    const body = data && typeof data === "object" ? data : {};
+    rows.value = Array.isArray(body.content) ? body.content : [];
+    total.value = Number(body.totalElements ?? body.total ?? 0);
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载客户列表失败"));
+    rows.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openCreate() {
+  editingId.value = null;
+  resetForm();
+  dialogVisible.value = true;
+}
+
+function openEdit(row) {
+  editingId.value = row.id;
+  form.name = row.name ?? "";
+  form.creditCode = row.creditCode ?? "";
+  dialogVisible.value = true;
+}
+
+function resetForm() {
+  form.name = "";
+  form.creditCode = "";
+  formRef.value?.resetFields?.();
+}
+
+async function submit() {
+  const f = formRef.value;
+  if (!f) return;
+  try {
+    await f.validate();
+  } catch {
+    return;
+  }
+  saving.value = true;
+  const payload = {
+    name: form.name.trim(),
+    creditCode: form.creditCode?.trim() || undefined,
+  };
+  try {
+    if (editingId.value != null) {
+      await updateCustomer(editingId.value, payload);
+      ElMessage.success("已保存");
+    } else {
+      await createCustomer(payload);
+      ElMessage.success("已创建");
+    }
+    dialogVisible.value = false;
+    await load();
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "保存失败"));
+  } finally {
+    saving.value = false;
+  }
+}
+
+function onDelete(row) {
+  ElMessageBox.confirm(`确定删除客户「${row.name || row.id}」吗？`, "提示", {
+    type: "warning",
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+  })
+    .then(async () => {
+      try {
+        await deleteCustomer(row.id);
+        ElMessage.success("已删除");
+        await load();
+      } catch (e) {
+        ElMessage.error(apiErrorMessage(e, "删除失败"));
+      }
+    })
+    .catch(() => {});
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.search {
+  width: 240px;
+}
+.pager {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

web/delivery-platform-ui/src/views/ForbiddenView.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="page">
+    <el-result icon="warning" title="403" sub-title="没有权限访问该页面">
+      <template #extra>
+        <el-button type="primary" @click="goHome">返回首页</el-button>
+      </template>
+    </el-result>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function goHome() {
+  router.push({ name: "home" });
+}
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f2f5;
+}
+</style>

web/delivery-platform-ui/src/views/HomeView.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-card>
+    <el-alert title="I1：JWT + 布局壳；后续迭代挂载 M1～M11" type="info" show-icon :closable="false" />
+    <p class="meta">用户：{{ auth.displayName }}，角色：{{ auth.roles.join(", ") || "—" }}</p>
+    <el-button type="primary" :loading="pingLoading" @click="ping">Bearer 调用 /api/v1/ping</el-button>
+    <pre v-if="pingBody">{{ pingBody }}</pre>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import { useAuthStore } from "../stores/auth";
+
+const auth = useAuthStore();
+const pingBody = ref("");
+const pingLoading = ref(false);
+
+onMounted(() => auth.restoreAxiosAuth());
+
+async function ping() {
+  pingLoading.value = true;
+  pingBody.value = "";
+  try {
+    const { data } = await axios.get("/api/v1/ping");
+    pingBody.value = JSON.stringify(data, null, 2);
+  } catch (e) {
+    pingBody.value = e.response?.data ? JSON.stringify(e.response.data) : String(e.message);
+  } finally {
+    pingLoading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.meta {
+  margin: 12px 0;
+}
+pre {
+  margin-top: 12px;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px;
+  border-radius: 4px;
+}
+</style>

web/delivery-platform-ui/src/views/LoginView.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="wrap">
+    <el-card class="card">
+      <template #header>客户商务与交付管理平台（I1）</template>
+      <el-form @submit.prevent="onSubmit">
+        <el-form-item label="用户名">
+          <el-input v-model="username" autocomplete="username" />
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input v-model="password" type="password" autocomplete="current-password" />
+        </el-form-item>
+        <el-button type="primary" native-type="submit" :loading="loading" block>登录</el-button>
+      </el-form>
+      <p class="hint">演示：admin / admin（SYS_ADMIN）；dev / dev（DEVELOPER）</p>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+
+const username = ref("admin");
+const password = ref("admin");
+const loading = ref(false);
+const router = useRouter();
+const route = useRoute();
+const auth = useAuthStore();
+
+onMounted(() => auth.restoreAxiosAuth());
+
+async function onSubmit() {
+  loading.value = true;
+  try {
+    await auth.login(username.value, password.value);
+    ElMessage.success("登录成功");
+    const redirect = route.query.redirect || "/";
+    await router.replace(typeof redirect === "string" ? redirect : "/");
+  } catch (e) {
+    ElMessage.error(e.response?.data?.message || "登录失败");
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.wrap {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f2f5;
+}
+.card {
+  width: 380px;
+}
+.hint {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #909399;
+}
+</style>

web/delivery-platform-ui/src/views/NotFoundView.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="page">
+    <el-result icon="error" title="404" sub-title="页面不存在">
+      <template #extra>
+        <el-button type="primary" @click="goHome">返回首页</el-button>
+      </template>
+    </el-result>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function goHome() {
+  router.push({ name: "home" });
+}
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f2f5;
+}
+</style>

web/delivery-platform-ui/src/views/ProjectsView.vue

@@ -0,0 +1,343 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <span class="title">项目管理</span>
+        <div class="actions">
+          <el-select
+            v-model="customerFilterId"
+            clearable
+            filterable
+            placeholder="按客户筛选"
+            class="customer-filter"
+            :loading="customersLoading"
+            @change="onFilterChange"
+          >
+            <el-option
+              v-for="c in customerOptions"
+              :key="c.id"
+              :label="c.name || String(c.id)"
+              :value="c.id"
+            />
+          </el-select>
+          <el-button type="primary" :loading="loading" @click="load">查询</el-button>
+          <el-button type="success" @click="openCreate">新建项目</el-button>
+        </div>
+      </div>
+    </template>
+
+    <el-table v-loading="loading" :data="rows" stripe style="width: 100%">
+      <el-table-column label="客户" min-width="160" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ customerNameById(row.customerId) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="项目名称" min-width="180" show-overflow-tooltip />
+      <el-table-column label="阶段" min-width="120">
+        <template #default="{ row }">
+          {{ phaseLabel(row.phase) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160" fixed="right">
+        <template #default="{ row }">
+          <el-button type="primary" link @click="openEdit(row)">编辑</el-button>
+          <el-button type="danger" link @click="onDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pager">
+      <el-pagination
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="onSizeChange"
+      />
+    </div>
+
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px" destroy-on-close @closed="resetForm">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="客户" prop="customerId">
+          <el-select
+            v-model="form.customerId"
+            filterable
+            placeholder="请选择客户"
+            style="width: 100%"
+            :loading="customersLoading"
+          >
+            <el-option
+              v-for="c in customerOptions"
+              :key="c.id"
+              :label="c.name || String(c.id)"
+              :value="c.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目名称" prop="name">
+          <el-input v-model="form.name" maxlength="200" show-word-limit placeholder="请输入项目名称" />
+        </el-form-item>
+        <el-form-item label="阶段" prop="phase">
+          <el-select v-model="form.phase" placeholder="请选择阶段" style="width: 100%" :loading="dictLoading">
+            <el-option v-for="p in phaseOptions" :key="p.code" :label="p.label" :value="p.code" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="submit">保存</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import {
+  listCustomers,
+  listProjects,
+  createProject,
+  updateProject,
+  deleteProject,
+  getProjectPhaseDictionary,
+} from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+
+const loading = ref(false);
+const saving = ref(false);
+const customersLoading = ref(false);
+const dictLoading = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const customerFilterId = ref(undefined);
+const customerOptions = ref([]);
+const phaseOptions = ref([]);
+
+const dialogVisible = ref(false);
+const editingId = ref(null);
+const formRef = ref(null);
+const form = reactive({
+  customerId: undefined,
+  name: "",
+  phase: "",
+});
+
+const rules = {
+  customerId: [{ required: true, message: "请选择客户", trigger: "change" }],
+  name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
+  phase: [{ required: true, message: "请选择阶段", trigger: "change" }],
+};
+
+const dialogTitle = computed(() => (editingId.value ? "编辑项目" : "新建项目"));
+
+const customerMap = computed(() => {
+  const m = new Map();
+  for (const c of customerOptions.value) {
+    if (c && c.id != null) m.set(c.id, c.name ?? String(c.id));
+  }
+  return m;
+});
+
+onMounted(async () => {
+  auth.restoreAxiosAuth();
+  await Promise.all([loadCustomersForSelect(), loadPhaseDictionary()]);
+  await load();
+});
+
+function customerNameById(id) {
+  if (id == null) return "—";
+  return customerMap.value.get(id) ?? String(id);
+}
+
+function phaseLabel(code) {
+  if (code == null || code === "") return "—";
+  const hit = phaseOptions.value.find((p) => p.code === String(code));
+  return hit?.label ?? String(code);
+}
+
+function onFilterChange() {
+  page.value = 1;
+  load();
+}
+
+function onSizeChange() {
+  page.value = 1;
+  load();
+}
+
+function normalizeDictionaryPayload(raw) {
+  const d = raw?.data !== undefined ? raw.data : raw;
+  let arr = [];
+  if (Array.isArray(d)) arr = d;
+  else if (d && typeof d === "object") {
+    if (Array.isArray(d.items)) arr = d.items;
+    else if (Array.isArray(d.entries)) arr = d.entries;
+    else if (Array.isArray(d.content)) arr = d.content;
+    else if (Array.isArray(d.values)) arr = d.values;
+  }
+  return arr
+    .map((x) => ({
+      code: String(x.code ?? x.dictCode ?? x.key ?? x.value ?? x.id ?? ""),
+      label: String(x.label ?? x.dictLabel ?? x.name ?? x.text ?? x.title ?? x.code ?? x.dictCode ?? ""),
+    }))
+    .filter((x) => x.code);
+}
+
+async function loadPhaseDictionary() {
+  dictLoading.value = true;
+  try {
+    const { data } = await getProjectPhaseDictionary();
+    phaseOptions.value = normalizeDictionaryPayload(data);
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载项目阶段字典失败"));
+    phaseOptions.value = [];
+  } finally {
+    dictLoading.value = false;
+  }
+}
+
+async function loadCustomersForSelect() {
+  customersLoading.value = true;
+  try {
+    const { data } = await listCustomers({ page: 0, size: 500 });
+    const body = data && typeof data === "object" ? data : {};
+    customerOptions.value = Array.isArray(body.content) ? body.content : [];
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载客户列表失败"));
+    customerOptions.value = [];
+  } finally {
+    customersLoading.value = false;
+  }
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const params = {
+      page: page.value - 1,
+      size: pageSize.value,
+    };
+    if (customerFilterId.value != null && customerFilterId.value !== "") {
+      params.customerId = customerFilterId.value;
+    }
+    const { data } = await listProjects(params);
+    const body = data && typeof data === "object" ? data : {};
+    rows.value = Array.isArray(body.content) ? body.content : [];
+    total.value = Number(body.totalElements ?? body.total ?? 0);
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载项目列表失败"));
+    rows.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openCreate() {
+  editingId.value = null;
+  resetForm();
+  dialogVisible.value = true;
+}
+
+function openEdit(row) {
+  editingId.value = row.id;
+  form.customerId = row.customerId;
+  form.name = row.name ?? "";
+  const ph = row.phase;
+  form.phase = ph == null ? "" : String(ph);
+  dialogVisible.value = true;
+}
+
+function resetForm() {
+  form.customerId = undefined;
+  form.name = "";
+  form.phase = "";
+  formRef.value?.resetFields?.();
+}
+
+async function submit() {
+  const f = formRef.value;
+  if (!f) return;
+  try {
+    await f.validate();
+  } catch {
+    return;
+  }
+  saving.value = true;
+  const payload = {
+    customerId: form.customerId,
+    name: form.name.trim(),
+    phase: form.phase,
+  };
+  try {
+    if (editingId.value != null) {
+      await updateProject(editingId.value, payload);
+      ElMessage.success("已保存");
+    } else {
+      await createProject(payload);
+      ElMessage.success("已创建");
+    }
+    dialogVisible.value = false;
+    await load();
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "保存失败"));
+  } finally {
+    saving.value = false;
+  }
+}
+
+function onDelete(row) {
+  ElMessageBox.confirm(`确定删除项目「${row.name || row.id}」吗？`, "提示", {
+    type: "warning",
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+  })
+    .then(async () => {
+      try {
+        await deleteProject(row.id);
+        ElMessage.success("已删除");
+        await load();
+      } catch (e) {
+        ElMessage.error(apiErrorMessage(e, "删除失败"));
+      }
+    })
+    .catch(() => {});
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.customer-filter {
+  width: 220px;
+}
+.pager {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>