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/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>