diff --git a/backend/src/api/crm.js b/backend/src/api/crm.js
new file mode 100644
index 0000000..b3af036
--- /dev/null
+++ b/backend/src/api/crm.js
@@ -0,0 +1,97 @@
+import request from "@/utils/request";
+
+/**
+ * CRM 接口
+ *
+ * 说明：
+ * - 客户 / 供应商沿用已有 ERP 接口（数据模型 TenantCrmCustomer / TenantCrmSupplier，租户隔离）；
+ * - 联系人沿用 /backend/crm/contact 系列接口（见 api/contact.js）；
+ * - 客户公海为 CRM 新增能力，需后端提供 /backend/crm/pool 系列接口。
+ */
+
+/* --------------------------------- 客户 --------------------------------- */
+
+export function getCrmCustomerList(params) {
+  return request({ url: "/backend/erp/customer/list", method: "get", params });
+}
+
+export function getCrmCustomerDetail(id) {
+  return request({ url: `/backend/erp/customer/${id}`, method: "get" });
+}
+
+export function createCrmCustomer(data) {
+  return request({ url: "/backend/erp/customer", method: "post", data });
+}
+
+export function updateCrmCustomer(id, data) {
+  return request({ url: `/backend/erp/customer/${id}`, method: "put", data });
+}
+
+export function deleteCrmCustomer(id) {
+  return request({ url: `/backend/erp/customer/${id}`, method: "delete" });
+}
+
+export function toggleCrmCustomerStatus(id, status) {
+  return request({
+    url: `/backend/erp/customer/${id}/status`,
+    method: "post",
+    data: { status },
+  });
+}
+
+/* -------------------------------- 供应商 -------------------------------- */
+
+export function getCrmSupplierList(params) {
+  return request({ url: "/backend/erp/supplier/list", method: "get", params });
+}
+
+export function getCrmSupplierDetail(id) {
+  return request({ url: `/backend/erp/supplier/${id}`, method: "get" });
+}
+
+export function createCrmSupplier(data) {
+  return request({ url: "/backend/erp/supplier", method: "post", data });
+}
+
+export function updateCrmSupplier(id, data) {
+  return request({ url: `/backend/erp/supplier/${id}`, method: "put", data });
+}
+
+export function deleteCrmSupplier(id) {
+  return request({ url: `/backend/erp/supplier/${id}`, method: "delete" });
+}
+
+export function toggleCrmSupplierStatus(id, status) {
+  return request({
+    url: `/backend/erp/supplier/${id}/status`,
+    method: "post",
+    data: { status },
+  });
+}
+
+/* ------------------------------- 客户公海 ------------------------------- */
+
+/** 公海列表：租户内共享，所有成员可见 */
+export function getPoolList(params) {
+  return request({ url: "/backend/crm/pool/list", method: "get", params });
+}
+
+/** 领取客户：ids 客户ID集合，领取后负责人为当前登录用户 */
+export function claimPoolCustomer(data) {
+  return request({ url: "/backend/crm/pool/claim", method: "post", data });
+}
+
+/** 分配客户：ids 客户ID集合，owner_user_id 负责人 */
+export function assignPoolCustomer(data) {
+  return request({ url: "/backend/crm/pool/assign", method: "post", data });
+}
+
+/** 移出公海：ids 客户ID集合 */
+export function removeFromPool(data) {
+  return request({ url: "/backend/crm/pool/remove", method: "post", data });
+}
+
+/** 移入公海：ids 客户ID集合，reason 移入原因 */
+export function moveToPool(data) {
+  return request({ url: "/backend/crm/pool/move", method: "post", data });
+}
diff --git a/backend/src/views/apps/crm/contact/components/edit.vue b/backend/src/views/apps/crm/contact/components/edit.vue
new file mode 100644
index 0000000..c0de645
--- /dev/null
+++ b/backend/src/views/apps/crm/contact/components/edit.vue
@@ -0,0 +1,293 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="isEdit ? '编辑联系人' : '新增联系人'"
+    width="680px"
+    :close-on-click-modal="false"
+    @update:model-value="handleClose"
+    @closed="handleClosed"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      label-position="right"
+    >
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="关联类型" prop="related_type">
+            <el-select
+              v-model="form.related_type"
+              placeholder="请选择"
+              style="width: 100%"
+              :disabled="!!lockedRelated"
+              @change="handleRelatedTypeChange"
+            >
+              <el-option
+                v-for="item in RELATED_TYPE_OPTIONS"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="关联对象" prop="related_id">
+            <el-select
+              v-model="form.related_id"
+              filterable
+              remote
+              clearable
+              reserve-keyword
+              :remote-method="remoteSearchCompany"
+              :loading="companyLoading"
+              :placeholder="companyPlaceholder"
+              style="width: 100%"
+              :disabled="!!lockedRelated"
+            >
+              <el-option
+                v-for="item in companyOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="姓名" prop="contact_name">
+            <el-input v-model="form.contact_name" placeholder="请输入联系人姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="性别" prop="gender">
+            <el-select v-model="form.gender" placeholder="请选择" style="width: 100%">
+              <el-option
+                v-for="item in GENDER_OPTIONS"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="mobile">
+            <el-input v-model="form.mobile" placeholder="请输入手机号" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="座机" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入座机号（选填）" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="form.email" placeholder="请输入邮箱（选填）" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="部门" prop="department">
+            <el-input v-model="form.department" placeholder="请输入所属部门（选填）" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="职位" prop="position">
+            <el-input v-model="form.position" placeholder="如：采购负责人" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="主联系人" prop="is_primary">
+            <el-switch
+              v-model="form.is_primary"
+              :active-value="1"
+              :inactive-value="0"
+              active-text="是"
+              inactive-text="否"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="form.remark"
+              type="textarea"
+              :rows="3"
+              placeholder="如：关键决策人、对接注意事项（选填）"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, nextTick } from "vue";
+import { ElMessage } from "element-plus";
+import { createContact, updateContact } from "@/api/contact";
+import { getCrmCustomerList, getCrmSupplierList } from "@/api/crm";
+import { RELATED_TYPE_OPTIONS, GENDER_OPTIONS } from "../../dict";
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  editData: { type: Object, default: null },
+  // 从客户/供应商页面打开时传入，锁定关联对象
+  defaultRelated: { type: Object, default: null },
+});
+
+const emit = defineEmits(["update:visible", "success"]);
+
+const formRef = ref();
+const submitting = ref(false);
+const companyLoading = ref(false);
+const companyOptions = ref([]);
+const isEdit = ref(false);
+
+const lockedRelated = computed(() => props.defaultRelated || null);
+
+const defaultForm = () => ({
+  id: undefined,
+  related_type: 1,
+  related_id: undefined,
+  contact_name: "",
+  gender: 0,
+  mobile: "",
+  phone: "",
+  email: "",
+  department: "",
+  position: "",
+  is_primary: 0,
+  remark: "",
+});
+
+const form = reactive(defaultForm());
+
+const rules = {
+  related_type: [{ required: true, message: "请选择关联类型", trigger: "change" }],
+  related_id: [{ required: true, message: "请选择关联对象", trigger: "change" }],
+  contact_name: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
+  mobile: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: "手机号格式不正确",
+      trigger: "blur",
+    },
+  ],
+  email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
+};
+
+const companyPlaceholder = computed(() =>
+  form.related_type === 2 ? "搜索供应商名称" : "搜索客户名称"
+);
+
+async function loadCompanyOptions(keyword = "") {
+  companyLoading.value = true;
+  try {
+    const params = { page: 1, pageSize: 30 };
+    if (keyword) params.keyword = keyword;
+    const res =
+      form.related_type === 2
+        ? await getCrmSupplierList(params)
+        : await getCrmCustomerList(params);
+    const list = res?.data?.list || [];
+    companyOptions.value = list.map((item) => ({
+      id: item.id,
+      name: item.supplier_name || item.customer_name,
+    }));
+  } catch (e) {
+    companyOptions.value = [];
+  } finally {
+    companyLoading.value = false;
+  }
+}
+
+function remoteSearchCompany(keyword) {
+  loadCompanyOptions(keyword);
+}
+
+function handleRelatedTypeChange() {
+  form.related_id = undefined;
+  companyOptions.value = [];
+  loadCompanyOptions();
+}
+
+watch(
+  () => props.visible,
+  async (val) => {
+    if (!val) return;
+    isEdit.value = !!props.editData;
+    Object.assign(form, defaultForm());
+    if (props.editData) {
+      Object.assign(form, props.editData);
+      form.related_type = Number(props.editData.related_type) || 1;
+      form.is_primary = Number(props.editData.is_primary) || 0;
+      form.gender = Number(props.editData.gender) || 0;
+      await loadCompanyOptions();
+      // 编辑时确保关联对象在下拉中存在
+      const name =
+        props.editData.related_name ||
+        props.editData.customer_name ||
+        props.editData.supplier_name;
+      if (form.related_id && !companyOptions.value.some((i) => i.id === form.related_id)) {
+        companyOptions.value.unshift({ id: form.related_id, name: name || String(form.related_id) });
+      }
+    } else if (props.defaultRelated) {
+      form.related_type = Number(props.defaultRelated.related_type) || 1;
+      form.related_id = props.defaultRelated.related_id;
+      companyOptions.value = [
+        {
+          id: props.defaultRelated.related_id,
+          name: props.defaultRelated.related_name || String(props.defaultRelated.related_id),
+        },
+      ];
+    } else {
+      await loadCompanyOptions();
+    }
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+
+function handleClose() {
+  emit("update:visible", false);
+}
+
+function handleClosed() {
+  formRef.value?.resetFields();
+}
+
+async function handleSave() {
+  if (!formRef.value) return;
+  try {
+    await formRef.value.validate();
+  } catch (e) {
+    return;
+  }
+  submitting.value = true;
+  try {
+    const payload = { ...form };
+    if (isEdit.value) {
+      await updateContact(payload);
+      ElMessage.success("更新成功");
+    } else {
+      await createContact(payload);
+      ElMessage.success("新增成功");
+    }
+    emit("success");
+    handleClose();
+  } catch (e) {
+    ElMessage.error(e.message || "操作失败");
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
diff --git a/backend/src/views/apps/crm/contact/index.vue b/backend/src/views/apps/crm/contact/index.vue
new file mode 100644
index 0000000..af6fc5d
--- /dev/null
+++ b/backend/src/views/apps/crm/contact/index.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="crm-page">
+    <div class="page-header">
+      <div>
+        <h2>联系人管理</h2>
+        <p>统一管理客户与供应商的对接人，支持设置主联系人</p>
+      </div>
+      <div class="header-actions">
+        <el-button :icon="Refresh" @click="fetchList">刷新</el-button>
+        <el-button type="primary" :icon="Plus" @click="openCreate">新增联系人</el-button>
+      </div>
+    </div>
+
+    <div class="filter-bar">
+      <el-form :inline="true" :model="filters" @submit.prevent>
+        <el-form-item>
+          <el-input
+            v-model="filters.keyword"
+            clearable
+            placeholder="搜索姓名 / 手机号 / 邮箱"
+            :prefix-icon="Search"
+            style="width: 240px"
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="关联类型">
+          <el-select v-model="filters.related_type" clearable placeholder="全部" style="width: 120px">
+            <el-option
+              v-for="item in RELATED_TYPE_OPTIONS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="主联系人">
+          <el-select v-model="filters.is_primary" clearable placeholder="全部" style="width: 110px">
+            <el-option label="是" :value="1" />
+            <el-option label="否" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="table-container" v-loading="loading">
+      <el-table :data="tableData" stripe border>
+        <el-table-column type="index" label="#" width="56" align="center" />
+        <el-table-column label="姓名" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="name-cell-wrapper">
+              <span class="name-cell">{{ row.contact_name }}</span>
+              <el-tag v-if="Number(row.is_primary) === 1" type="danger" size="small" effect="plain">
+                主联系人
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="性别" width="70" align="center">
+          <template #default="{ row }">{{ genderText(row.gender) }}</template>
+        </el-table-column>
+        <el-table-column prop="mobile" label="手机号" width="130" />
+        <el-table-column prop="phone" label="座机" width="130" show-overflow-tooltip />
+        <el-table-column prop="email" label="邮箱" min-width="170" show-overflow-tooltip />
+        <el-table-column label="关联类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="Number(row.related_type) === 1 ? 'primary' : 'warning'">
+              {{ relatedTypeText(row.related_type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="关联对象" min-width="180" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.related_name || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="department" label="部门" width="120" show-overflow-tooltip />
+        <el-table-column prop="position" label="职位" width="130" show-overflow-tooltip />
+        <el-table-column label="更新时间" width="160" align="center">
+          <template #default="{ row }">{{ formatDateTime(row.update_time) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+            <el-button
+              v-if="Number(row.is_primary) !== 1"
+              link
+              type="primary"
+              size="small"
+              @click="handleSetPrimary(row)"
+            >
+              设为主联系人
+            </el-button>
+            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="暂无联系人" :image-size="80" />
+        </template>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSearch"
+          @current-change="fetchList"
+        />
+      </div>
+    </div>
+
+    <ContactEdit
+      v-model:visible="editVisible"
+      :edit-data="currentEditData"
+      @success="fetchList"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Search, Refresh } from "@element-plus/icons-vue";
+import { listContacts, updateContact, deleteContact } from "@/api/contact";
+import ContactEdit from "./components/edit.vue";
+import {
+  RELATED_TYPE_OPTIONS,
+  genderText,
+  relatedTypeText,
+  formatDateTime,
+} from "../dict";
+
+const loading = ref(false);
+const tableData = ref([]);
+const editVisible = ref(false);
+const currentEditData = ref(null);
+
+const filters = reactive({
+  keyword: "",
+  related_type: "",
+  is_primary: "",
+});
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+
+onMounted(() => {
+  fetchList();
+});
+
+async function fetchList() {
+  loading.value = true;
+  try {
+    const res = await listContacts({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      ...filters,
+    });
+    const data = res?.data || {};
+    const list = Array.isArray(data) ? data : data.list || [];
+    tableData.value = list;
+    pagination.total = data.total || list.length;
+  } catch (e) {
+    tableData.value = [];
+    pagination.total = 0;
+    ElMessage.error(e.message || "查询失败");
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleSearch() {
+  pagination.page = 1;
+  fetchList();
+}
+
+function resetFilters() {
+  filters.keyword = "";
+  filters.related_type = "";
+  filters.is_primary = "";
+  handleSearch();
+}
+
+function openCreate() {
+  currentEditData.value = null;
+  editVisible.value = true;
+}
+
+function openEdit(row) {
+  currentEditData.value = { ...row };
+  editVisible.value = true;
+}
+
+async function handleSetPrimary(row) {
+  try {
+    await updateContact({ ...row, is_primary: 1 });
+    ElMessage.success("已设为主联系人");
+    fetchList();
+  } catch (e) {
+    ElMessage.error(e.message || "操作失败");
+  }
+}
+
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除联系人「${row.contact_name}」吗？删除后不可恢复。`,
+      "删除确认",
+      { type: "warning" }
+    );
+    await deleteContact({ id: row.id });
+    ElMessage.success("删除成功");
+    fetchList();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "删除失败");
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.crm-page {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0 0 6px 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+}
+
+.filter-bar {
+  background: var(--el-bg-color);
+  padding: 16px 16px 0;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.table-container {
+  background: var(--el-bg-color);
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.name-cell-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.name-cell {
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+}
+
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/backend/src/views/apps/crm/customer/components/edit.vue b/backend/src/views/apps/crm/customer/components/edit.vue
new file mode 100644
index 0000000..06dd5bf
--- /dev/null
+++ b/backend/src/views/apps/crm/customer/components/edit.vue
@@ -0,0 +1,288 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="isEdit ? '编辑客户' : '新增客户'"
+    width="760px"
+    :close-on-click-modal="false"
+    @update:model-value="handleClose"
+    @closed="handleClosed"
+  >
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="基本信息" name="basic">
+        <el-form
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          label-width="110px"
+          label-position="right"
+        >
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="客户名称" prop="customer_name">
+                <el-input v-model="form.customer_name" placeholder="请输入客户名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="客户类型" prop="customer_type">
+                <el-select v-model="form.customer_type" placeholder="请选择" style="width: 100%">
+                  <el-option
+                    v-for="item in CUSTOMER_TYPE_OPTIONS"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="客户等级" prop="customer_level">
+                <el-select v-model="form.customer_level" placeholder="请选择" style="width: 100%">
+                  <el-option
+                    v-for="item in levelOptions('customer')"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="所属行业" prop="industry">
+                <el-input v-model="form.industry" placeholder="如：互联网、制造业" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="合作开始" prop="register_time">
+                <el-date-picker
+                  v-model="form.register_time"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="选择日期"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="合作到期" prop="expire_time">
+                <el-date-picker
+                  v-model="form.expire_time"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="选择日期"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="客户地址" prop="address">
+                <el-input v-model="form.address" placeholder="请输入详细地址" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="form.status" placeholder="请选择" style="width: 100%">
+                  <el-option
+                    v-for="item in STATUS_OPTIONS"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane label="联系信息" name="contact">
+        <el-form :model="form" label-width="110px" label-position="right">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="联系人">
+                <el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="联系电话">
+                <el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="联系邮箱">
+                <el-input v-model="form.contact_email" placeholder="请输入邮箱" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane label="开票信息" name="invoice">
+        <el-form :model="form" label-width="110px" label-position="right">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="发票抬头">
+                <el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="纳税人识别号">
+                <el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="注册地址">
+                <el-input v-model="form.registered_address" placeholder="请输入注册地址" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="注册电话">
+                <el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="开户行名称">
+                <el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="开户行账号">
+                <el-input v-model="form.bank_account" placeholder="请输入银行账号" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane label="备注" name="remark">
+        <el-form :model="form" label-width="110px" label-position="right">
+          <el-form-item label="备注">
+            <el-input
+              v-model="form.remark"
+              type="textarea"
+              :rows="8"
+              placeholder="请输入备注信息（选填）"
+            />
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick } from "vue";
+import { ElMessage } from "element-plus";
+import { createCrmCustomer, updateCrmCustomer } from "@/api/crm";
+import {
+  CUSTOMER_TYPE_OPTIONS,
+  STATUS_OPTIONS,
+  levelOptions,
+} from "../../dict";
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  editData: { type: Object, default: null },
+});
+
+const emit = defineEmits(["update:visible", "success"]);
+
+const formRef = ref();
+const activeTab = ref("basic");
+const submitting = ref(false);
+const isEdit = ref(false);
+const internalId = ref(null);
+
+const defaultForm = () => ({
+  customer_name: "",
+  customer_type: "1",
+  customer_level: "3",
+  industry: "",
+  contact_person: "",
+  contact_phone: "",
+  contact_email: "",
+  address: "",
+  register_time: "",
+  expire_time: "",
+  status: "1",
+  remark: "",
+  invoice_title: "",
+  tax_number: "",
+  registered_address: "",
+  registered_phone: "",
+  bank_name: "",
+  bank_account: "",
+});
+
+const form = reactive(defaultForm());
+
+const rules = {
+  customer_name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
+  customer_type: [{ required: true, message: "请选择客户类型", trigger: "change" }],
+  contact_phone: [
+    {
+      pattern: /^(1[3-9]\d{9}|0\d{2,3}-?\d{7,8}|\d{7,8})$/,
+      message: "联系电话格式不正确",
+      trigger: "blur",
+    },
+  ],
+  contact_email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
+};
+
+watch(
+  () => props.visible,
+  async (val) => {
+    if (!val) return;
+    activeTab.value = "basic";
+    isEdit.value = !!props.editData;
+    internalId.value = props.editData?.id ?? null;
+    if (props.editData) {
+      Object.assign(form, defaultForm(), props.editData);
+    } else {
+      Object.assign(form, defaultForm());
+    }
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+
+function handleClose() {
+  emit("update:visible", false);
+}
+
+function handleClosed() {
+  formRef.value?.resetFields();
+  activeTab.value = "basic";
+}
+
+async function handleSave() {
+  if (!formRef.value) return;
+  try {
+    await formRef.value.validate();
+  } catch (e) {
+    activeTab.value = "basic";
+    return;
+  }
+  submitting.value = true;
+  try {
+    const payload = { ...form, is_draft: 0 };
+    if (internalId.value) {
+      await updateCrmCustomer(internalId.value, payload);
+      ElMessage.success("更新成功");
+    } else {
+      await createCrmCustomer(payload);
+      ElMessage.success("新增成功");
+    }
+    emit("success");
+    handleClose();
+  } catch (e) {
+    ElMessage.error(e.message || "操作失败");
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
diff --git a/backend/src/views/apps/crm/customer/index.vue b/backend/src/views/apps/crm/customer/index.vue
new file mode 100644
index 0000000..fc8a4a5
--- /dev/null
+++ b/backend/src/views/apps/crm/customer/index.vue
@@ -0,0 +1,604 @@
+<template>
+  <div class="crm-page">
+    <div class="page-header">
+      <div>
+        <h2>客户管理</h2>
+        <p>维护客户档案与跟进人，支持将客户释放到公海由团队共享</p>
+      </div>
+      <div class="header-actions">
+        <el-button :icon="Refresh" @click="fetchList">刷新</el-button>
+        <el-button
+          type="warning"
+          plain
+          :disabled="!multipleSelection.length"
+          @click="openMovePool(multipleSelection)"
+        >
+          移入公海
+        </el-button>
+        <el-button type="primary" :icon="Plus" @click="openCreate">新增客户</el-button>
+      </div>
+    </div>
+
+    <div class="filter-bar">
+      <el-form :inline="true" :model="filters" @submit.prevent>
+        <el-form-item>
+          <el-input
+            v-model="filters.keyword"
+            clearable
+            placeholder="搜索客户名称 / 联系人 / 电话"
+            :prefix-icon="Search"
+            style="width: 240px"
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="客户类型">
+          <el-select v-model="filters.customer_type" clearable placeholder="全部" style="width: 130px">
+            <el-option
+              v-for="item in CUSTOMER_TYPE_OPTIONS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户等级">
+          <el-select v-model="filters.customer_level" clearable placeholder="全部" style="width: 130px">
+            <el-option
+              v-for="item in levelOptions('customer')"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="filters.status" clearable placeholder="全部" style="width: 110px">
+            <el-option
+              v-for="item in STATUS_OPTIONS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="table-container" v-loading="loading">
+      <el-table
+        :data="tableData"
+        stripe
+        border
+        row-key="id"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column label="客户名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="name-link" @click="openDetail(row)">{{ row.customer_name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="110" align="center">
+          <template #default="{ row }">
+            <el-tag :type="typeTag(row.customer_type)" size="small">
+              {{ typeText('customer', row.customer_type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="等级" width="110" align="center">
+          <template #default="{ row }">
+            <el-tag :type="levelTag(row.customer_level)" size="small" effect="plain">
+              {{ levelText('customer', row.customer_level) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="industry" label="行业" width="120" show-overflow-tooltip />
+        <el-table-column prop="contact_person" label="联系人" width="100" />
+        <el-table-column prop="contact_phone" label="联系电话" width="130" />
+        <el-table-column label="负责人" width="100">
+          <template #default="{ row }">{{ row.owner_name || '未分配' }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusTag(row.status)" size="small">{{ statusText(row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="更新时间" width="160" align="center">
+          <template #default="{ row }">{{ formatDateTime(row.update_time) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="280" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+            <el-button link type="primary" size="small" @click="openContact(row)">联系人</el-button>
+            <el-button link type="warning" size="small" @click="openMovePool([row])">移入公海</el-button>
+            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="暂无客户" :image-size="80" />
+        </template>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSearch"
+          @current-change="fetchList"
+        />
+      </div>
+    </div>
+
+    <CustomerEdit
+      v-model:visible="editVisible"
+      :edit-data="currentEditData"
+      @success="fetchList"
+    />
+
+    <!-- 详情抽屉 -->
+    <el-drawer
+      v-model="detailVisible"
+      :title="detailData?.customer_name || '客户详情'"
+      direction="rtl"
+      size="560px"
+    >
+      <div v-if="detailData" class="detail-content">
+        <el-descriptions title="基本信息" :column="2" border size="small">
+          <el-descriptions-item label="客户名称" :span="2">
+            {{ detailData.customer_name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="客户类型">
+            {{ typeText('customer', detailData.customer_type) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="客户等级">
+            {{ levelText('customer', detailData.customer_level) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="所属行业">{{ detailData.industry || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="statusTag(detailData.status)" size="small">
+              {{ statusText(detailData.status) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="负责人">{{ detailData.owner_name || '未分配' }}</el-descriptions-item>
+          <el-descriptions-item label="合作开始">{{ formatDate(detailData.register_time) }}</el-descriptions-item>
+          <el-descriptions-item label="合作到期">{{ formatDate(detailData.expire_time) }}</el-descriptions-item>
+          <el-descriptions-item label="客户地址" :span="2">{{ detailData.address || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="创建时间">{{ formatDateTime(detailData.create_time) }}</el-descriptions-item>
+          <el-descriptions-item label="更新时间">{{ formatDateTime(detailData.update_time) }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions
+          title="联系信息"
+          :column="2"
+          border
+          size="small"
+          style="margin-top: 20px"
+        >
+          <el-descriptions-item label="联系人">{{ detailData.contact_person || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="联系电话">{{ detailData.contact_phone || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="联系邮箱" :span="2">
+            {{ detailData.contact_email || '-' }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions
+          title="开票信息"
+          :column="2"
+          border
+          size="small"
+          style="margin-top: 20px"
+        >
+          <el-descriptions-item label="发票抬头" :span="2">
+            {{ detailData.invoice_title || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="纳税人识别号">{{ detailData.tax_number || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="注册电话">{{ detailData.registered_phone || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="注册地址" :span="2">
+            {{ detailData.registered_address || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="开户行">{{ detailData.bank_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="银行账号">{{ detailData.bank_account || '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions
+          title="备注"
+          :column="1"
+          border
+          size="small"
+          style="margin-top: 20px"
+        >
+          <el-descriptions-item label="备注">{{ detailData.remark || '-' }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-drawer>
+
+    <!-- 联系人抽屉 -->
+    <el-drawer
+      v-model="contactVisible"
+      :title="`${currentRow?.customer_name || '客户'} - 联系人`"
+      direction="rtl"
+      size="820px"
+    >
+      <div class="contact-drawer">
+        <div class="drawer-toolbar">
+          <el-button type="primary" :icon="Plus" size="small" @click="openContactCreate">
+            新增联系人
+          </el-button>
+          <span class="count-tip">共 {{ contactList.length }} 位联系人</span>
+        </div>
+        <el-table :data="contactList" v-loading="contactLoading" stripe border size="small">
+          <el-table-column label="姓名" width="140">
+            <template #default="{ row }">
+              <span>{{ row.contact_name }}</span>
+              <el-tag
+                v-if="Number(row.is_primary) === 1"
+                type="danger"
+                size="small"
+                effect="plain"
+                style="margin-left: 6px"
+              >
+                主联系人
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="mobile" label="手机号" width="130" />
+          <el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
+          <el-table-column prop="department" label="部门" width="120" show-overflow-tooltip />
+          <el-table-column prop="position" label="职位" width="130" show-overflow-tooltip />
+          <el-table-column label="操作" width="120" align="center" fixed="right">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="openContactEdit(row)">编辑</el-button>
+              <el-button link type="danger" size="small" @click="handleContactDelete(row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <el-empty description="暂无联系人" :image-size="60" />
+          </template>
+        </el-table>
+      </div>
+    </el-drawer>
+
+    <ContactEdit
+      v-model:visible="contactEditVisible"
+      :edit-data="contactEditData"
+      :default-related="contactRelated"
+      @success="loadContacts"
+    />
+
+    <!-- 移入公海 -->
+    <el-dialog v-model="poolVisible" title="移入客户公海" width="460px" :close-on-click-modal="false">
+      <el-alert
+        type="info"
+        :closable="false"
+        show-icon
+        title="移入后客户将进入公海，租户内所有成员可见，可被他人领取或分配。"
+        style="margin-bottom: 16px"
+      />
+      <el-form label-width="90px">
+        <el-form-item label="移入客户">
+          <span>{{ poolTargetNames }}</span>
+        </el-form-item>
+        <el-form-item label="移入原因">
+          <el-select v-model="poolReason" placeholder="请选择原因" style="width: 100%">
+            <el-option v-for="item in POOL_REASON_OPTIONS" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="poolVisible = false">取消</el-button>
+        <el-button type="primary" :loading="poolSubmitting" @click="submitMovePool">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Search, Refresh } from "@element-plus/icons-vue";
+import {
+  getCrmCustomerList,
+  deleteCrmCustomer,
+  moveToPool,
+} from "@/api/crm";
+import { listContacts, deleteContact } from "@/api/contact";
+import CustomerEdit from "./components/edit.vue";
+import ContactEdit from "../contact/components/edit.vue";
+import {
+  CUSTOMER_TYPE_OPTIONS,
+  STATUS_OPTIONS,
+  POOL_REASON_OPTIONS,
+  levelOptions,
+  typeText,
+  typeTag,
+  levelText,
+  levelTag,
+  statusText,
+  statusTag,
+  formatDate,
+  formatDateTime,
+} from "../dict";
+
+const loading = ref(false);
+const tableData = ref([]);
+const multipleSelection = ref([]);
+const editVisible = ref(false);
+const currentEditData = ref(null);
+const detailVisible = ref(false);
+const detailData = ref(null);
+
+// 联系人抽屉
+const contactVisible = ref(false);
+const contactLoading = ref(false);
+const contactList = ref([]);
+const currentRow = ref(null);
+const contactEditVisible = ref(false);
+const contactEditData = ref(null);
+
+// 移入公海
+const poolVisible = ref(false);
+const poolReason = ref("");
+const poolTargets = ref([]);
+const poolSubmitting = ref(false);
+
+const filters = reactive({
+  keyword: "",
+  customer_type: "",
+  customer_level: "",
+  status: "",
+});
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+
+const contactRelated = computed(() =>
+  currentRow.value
+    ? {
+        related_type: 1,
+        related_id: currentRow.value.id,
+        related_name: currentRow.value.customer_name,
+      }
+    : null
+);
+
+const poolTargetNames = computed(() =>
+  poolTargets.value.map((item) => item.customer_name).join("、")
+);
+
+onMounted(() => {
+  fetchList();
+});
+
+async function fetchList() {
+  loading.value = true;
+  try {
+    const res = await getCrmCustomerList({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      ...filters,
+    });
+    tableData.value = res?.data?.list || [];
+    pagination.total = res?.data?.total || 0;
+  } catch (e) {
+    tableData.value = [];
+    pagination.total = 0;
+    ElMessage.error(e.message || "查询失败");
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleSearch() {
+  pagination.page = 1;
+  fetchList();
+}
+
+function resetFilters() {
+  filters.keyword = "";
+  filters.customer_type = "";
+  filters.customer_level = "";
+  filters.status = "";
+  handleSearch();
+}
+
+function handleSelectionChange(val) {
+  multipleSelection.value = val;
+}
+
+function openCreate() {
+  currentEditData.value = null;
+  editVisible.value = true;
+}
+
+function openEdit(row) {
+  currentEditData.value = { ...row };
+  editVisible.value = true;
+}
+
+function openDetail(row) {
+  detailData.value = { ...row };
+  detailVisible.value = true;
+}
+
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除客户「${row.customer_name}」吗？删除后不可恢复。`,
+      "删除确认",
+      { type: "warning" }
+    );
+    await deleteCrmCustomer(row.id);
+    ElMessage.success("删除成功");
+    fetchList();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "删除失败");
+    }
+  }
+}
+
+/* ------------------------------ 联系人 ------------------------------ */
+async function openContact(row) {
+  currentRow.value = { ...row };
+  contactVisible.value = true;
+  loadContacts();
+}
+
+async function loadContacts() {
+  if (!currentRow.value) return;
+  contactLoading.value = true;
+  try {
+    const res = await listContacts({ related_type: 1, related_id: currentRow.value.id });
+    const data = res?.data || {};
+    contactList.value = Array.isArray(data) ? data : data.list || [];
+  } catch (e) {
+    contactList.value = [];
+    ElMessage.error(e.message || "联系人查询失败");
+  } finally {
+    contactLoading.value = false;
+  }
+}
+
+function openContactCreate() {
+  contactEditData.value = null;
+  contactEditVisible.value = true;
+}
+
+function openContactEdit(row) {
+  contactEditData.value = { ...row };
+  contactEditVisible.value = true;
+}
+
+async function handleContactDelete(row) {
+  try {
+    await ElMessageBox.confirm(`确定删除联系人「${row.contact_name}」吗？`, "删除确认", {
+      type: "warning",
+    });
+    await deleteContact({ id: row.id });
+    ElMessage.success("删除成功");
+    loadContacts();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "删除失败");
+    }
+  }
+}
+
+/* ------------------------------ 移入公海 ------------------------------ */
+function openMovePool(rows) {
+  if (!rows.length) return;
+  poolTargets.value = rows;
+  poolReason.value = "";
+  poolVisible.value = true;
+}
+
+async function submitMovePool() {
+  if (!poolReason.value) {
+    ElMessage.warning("请选择移入原因");
+    return;
+  }
+  poolSubmitting.value = true;
+  try {
+    await moveToPool({
+      ids: poolTargets.value.map((item) => item.id),
+      reason: poolReason.value,
+    });
+    ElMessage.success("已移入公海");
+    poolVisible.value = false;
+    multipleSelection.value = [];
+    fetchList();
+  } catch (e) {
+    ElMessage.error(e.message || "操作失败");
+  } finally {
+    poolSubmitting.value = false;
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.crm-page {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0 0 6px 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.filter-bar {
+  background: var(--el-bg-color);
+  padding: 16px 16px 0;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.table-container {
+  background: var(--el-bg-color);
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.name-link {
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--el-color-primary);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.contact-drawer {
+  .drawer-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+
+    .count-tip {
+      font-size: 13px;
+      color: var(--el-text-color-secondary);
+    }
+  }
+}
+</style>
diff --git a/backend/src/views/apps/crm/dashboard/index.vue b/backend/src/views/apps/crm/dashboard/index.vue
new file mode 100644
index 0000000..6ed6b35
--- /dev/null
+++ b/backend/src/views/apps/crm/dashboard/index.vue
@@ -0,0 +1,1173 @@
+<template>
+  <div class="crm-dashboard" v-loading="loading">
+    <!-- 顶部工具栏：时间维度切换 -->
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <div class="title">客户关系管理 · 数据仪表盘</div>
+        <div class="subtitle">
+          <el-icon><Calendar /></el-icon>
+          <span>{{ rangeText }}</span>
+          <span class="dot">·</span>
+          <span>更新于 {{ updateTime }}</span>
+        </div>
+      </div>
+      <div class="toolbar-right">
+        <el-radio-group v-model="range" @change="handleRangeChange">
+          <el-radio-button
+            v-for="item in rangeOptions"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.label }}
+          </el-radio-button>
+        </el-radio-group>
+        <el-button :icon="RefreshRight" @click="loadData">刷新</el-button>
+      </div>
+    </div>
+
+    <!-- 顶部统计卡片 -->
+    <div class="stat-grid">
+      <div
+        v-for="item in statCards"
+        :key="item.key"
+        class="stat-card"
+        :class="item.type"
+      >
+        <div class="stat-icon">
+          <el-icon :size="20"><component :is="item.icon" /></el-icon>
+        </div>
+        <div class="stat-body">
+          <div class="stat-label">{{ item.label }}</div>
+          <div class="stat-value">
+            {{ formatValue(item) }}
+          </div>
+          <div class="stat-footer">
+            <span class="trend" :class="trendClass(item.trend)">
+              <el-icon>
+                <component :is="item.trend >= 0 ? ArrowUp : ArrowDown" />
+              </el-icon>
+              {{ Math.abs(item.trend).toFixed(1) }}%
+            </span>
+            <span class="trend-label">较上期</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 趋势 + 漏斗 -->
+    <div class="chart-grid chart-grid-wide">
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">客户与商机趋势</span>
+          <el-tag size="small" effect="plain" type="primary">
+            按{{ rangeLabel }}
+          </el-tag>
+        </div>
+        <div ref="trendRef" class="chart"></div>
+      </div>
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">销售漏斗</span>
+          <el-tag size="small" effect="plain" type="success">
+            {{ rangeLabel }}累计
+          </el-tag>
+        </div>
+        <div ref="funnelRef" class="chart"></div>
+      </div>
+    </div>
+
+    <!-- 金额对比 + 线索来源 -->
+    <div class="chart-grid">
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">合同金额 / 回款金额</span>
+        </div>
+        <div ref="amountRef" class="chart"></div>
+      </div>
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">线索来源分布</span>
+        </div>
+        <div ref="sourceRef" class="chart"></div>
+      </div>
+    </div>
+
+    <!-- 排行榜 + 最新回访 -->
+    <div class="chart-grid">
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">销售业绩排行</span>
+          <el-button link type="primary" size="small">查看全部</el-button>
+        </div>
+        <div class="rank-list">
+          <div v-for="(item, index) in rankList" :key="item.name" class="rank-item">
+            <div class="rank-no" :class="`top-${index + 1}`">{{ index + 1 }}</div>
+            <div class="rank-info">
+              <div class="rank-name">
+                {{ item.name }}
+                <span class="rank-dept">{{ item.dept }}</span>
+              </div>
+              <div class="rank-bar">
+                <div
+                  class="rank-bar-inner"
+                  :style="{ width: (item.contract / maxContract) * 100 + '%' }"
+                ></div>
+              </div>
+            </div>
+            <div class="rank-amount">
+              <div class="rank-contract">¥ {{ formatWan(item.contract) }}</div>
+              <div class="rank-payment">回款 {{ formatWan(item.payment) }}</div>
+            </div>
+          </div>
+          <el-empty v-if="!rankList.length" description="暂无数据" :image-size="60" />
+        </div>
+      </div>
+
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">最新回访</span>
+          <el-button link type="primary" size="small">查看全部</el-button>
+        </div>
+        <div class="visit-list">
+          <div v-for="(item, index) in visitList" :key="index" class="visit-item">
+            <div class="visit-main">
+              <div class="visit-title">
+                {{ item.customer }}
+                <el-tag size="small" effect="plain">{{ item.way }}</el-tag>
+              </div>
+              <div class="visit-content">{{ item.content }}</div>
+            </div>
+            <div class="visit-meta">
+              <span>{{ item.user }}</span>
+              <span>{{ item.time }}</span>
+            </div>
+          </div>
+          <el-empty v-if="!visitList.length" description="暂无回访" :image-size="60" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, shallowRef, computed, onMounted, onBeforeUnmount, nextTick, markRaw } from "vue";
+import * as echarts from "echarts";
+import {
+  ArrowUp,
+  ArrowDown,
+  Calendar,
+  RefreshRight,
+  UserFilled,
+  Postcard,
+  FolderOpened,
+  Tickets,
+  Aim,
+  TrendCharts,
+  Files,
+  Document,
+  Money,
+  Wallet,
+  Phone,
+} from "@element-plus/icons-vue";
+
+/* ------------------------------ 类型定义 ------------------------------ */
+type RangeKey = "day" | "week" | "month" | "quarter" | "year";
+type StatType = "count" | "amount";
+
+interface StatMeta {
+  key: string;
+  label: string;
+  type: StatType;
+  icon: unknown;
+  base: Record<RangeKey, number>;
+}
+
+interface StatItem extends StatMeta {
+  value: number;
+  trend: number;
+}
+
+/* ------------------------------ 时间维度 ------------------------------ */
+const rangeOptions: { label: string; value: RangeKey }[] = [
+  { label: "天", value: "day" },
+  { label: "周", value: "week" },
+  { label: "月", value: "month" },
+  { label: "季度", value: "quarter" },
+  { label: "年", value: "year" },
+];
+
+// 默认显示本月数据
+const range = ref<RangeKey>("month");
+const loading = ref(false);
+const updateTime = ref("");
+
+const rangeLabel = computed(
+  () => rangeOptions.find((i) => i.value === range.value)?.label ?? ""
+);
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+// 当前统计周期的可读文案
+const rangeText = computed(() => {
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = pad(now.getMonth() + 1);
+  const d = pad(now.getDate());
+  switch (range.value) {
+    case "day":
+      return `${y}-${m}-${d}（今日）`;
+    case "week": {
+      const day = now.getDay() === 0 ? 7 : now.getDay();
+      const start = new Date(now);
+      start.setDate(now.getDate() - (day - 1));
+      const end = new Date(start);
+      end.setDate(start.getDate() + 6);
+      const fmt = (v: Date) =>
+        `${v.getFullYear()}-${pad(v.getMonth() + 1)}-${pad(v.getDate())}`;
+      return `${fmt(start)} ~ ${fmt(end)}（本周）`;
+    }
+    case "month": {
+      const last = new Date(y, now.getMonth() + 1, 0).getDate();
+      return `${y}-${m}-01 ~ ${y}-${m}-${last}（本月）`;
+    }
+    case "quarter": {
+      const q = Math.floor(now.getMonth() / 3) + 1;
+      return `${y} 年第 ${q} 季度`;
+    }
+    default:
+      return `${y} 年（全年）`;
+  }
+});
+
+/* ------------------------------ 统计卡片 ------------------------------ */
+const statMeta: StatMeta[] = [
+  {
+    key: "newCustomer",
+    label: "新增客户",
+    type: "count",
+    icon: markRaw(UserFilled),
+    base: { day: 8, week: 42, month: 168, quarter: 486, year: 1935 },
+  },
+  {
+    key: "newContact",
+    label: "新增联系人",
+    type: "count",
+    icon: markRaw(Postcard),
+    base: { day: 15, week: 86, month: 342, quarter: 998, year: 3960 },
+  },
+  {
+    key: "newProject",
+    label: "新增项目",
+    type: "count",
+    icon: markRaw(FolderOpened),
+    base: { day: 3, week: 16, month: 62, quarter: 186, year: 742 },
+  },
+  {
+    key: "newContract",
+    label: "新增合同",
+    type: "count",
+    icon: markRaw(Tickets),
+    base: { day: 5, week: 24, month: 96, quarter: 288, year: 1150 },
+  },
+  {
+    key: "newClue",
+    label: "新增线索",
+    type: "count",
+    icon: markRaw(Aim),
+    base: { day: 26, week: 152, month: 610, quarter: 1820, year: 7250 },
+  },
+  {
+    key: "newChance",
+    label: "新增商机",
+    type: "count",
+    icon: markRaw(TrendCharts),
+    base: { day: 12, week: 68, month: 268, quarter: 800, year: 3180 },
+  },
+  {
+    key: "projectAmount",
+    label: "项目金额",
+    type: "amount",
+    icon: markRaw(Files),
+    base: {
+      day: 380000,
+      week: 1980000,
+      month: 7860000,
+      quarter: 23500000,
+      year: 93800000,
+    },
+  },
+  {
+    key: "contractAmount",
+    label: "合同金额",
+    type: "amount",
+    icon: markRaw(Document),
+    base: {
+      day: 260000,
+      week: 1360000,
+      month: 5420000,
+      quarter: 16200000,
+      year: 64800000,
+    },
+  },
+  {
+    key: "chanceAmount",
+    label: "商机金额",
+    type: "amount",
+    icon: markRaw(Money),
+    base: {
+      day: 520000,
+      week: 2760000,
+      month: 10900000,
+      quarter: 32600000,
+      year: 130000000,
+    },
+  },
+  {
+    key: "paymentAmount",
+    label: "回款金额",
+    type: "amount",
+    icon: markRaw(Wallet),
+    base: {
+      day: 210000,
+      week: 1080000,
+      month: 4280000,
+      quarter: 12800000,
+      year: 51200000,
+    },
+  },
+  {
+    key: "newVisit",
+    label: "新增回访",
+    type: "count",
+    icon: markRaw(Phone),
+    base: { day: 18, week: 96, month: 386, quarter: 1150, year: 4600 },
+  },
+];
+
+const statCards = ref<StatItem[]>([]);
+
+/* ------------------------------ 列表数据 ------------------------------ */
+const rankList = ref([
+  { name: "张伟", dept: "销售一部", contract: 1280000, payment: 960000 },
+  { name: "李娜", dept: "销售二部", contract: 1060000, payment: 820000 },
+  { name: "王强", dept: "销售一部", contract: 950000, payment: 700000 },
+  { name: "刘洋", dept: "大客户部", contract: 880000, payment: 640000 },
+  { name: "陈静", dept: "销售二部", contract: 760000, payment: 530000 },
+  { name: "赵磊", dept: "大客户部", contract: 640000, payment: 510000 },
+  { name: "孙悦", dept: "销售三部", contract: 520000, payment: 380000 },
+  { name: "周涛", dept: "销售三部", contract: 430000, payment: 300000 },
+]);
+
+const maxContract = computed(() =>
+  rankList.value.reduce((max, item) => Math.max(max, item.contract), 1)
+);
+
+const visitList = ref([
+  {
+    customer: "深圳市星辰科技有限公司",
+    way: "电话",
+    content: "确认合同条款细节与交付时间节点",
+    user: "张伟",
+    time: "09-10 09:30",
+  },
+  {
+    customer: "广州恒远制造集团",
+    way: "上门",
+    content: "现场沟通二期项目需求，客户预算已确认",
+    user: "李娜",
+    time: "09-10 08:50",
+  },
+  {
+    customer: "杭州云图网络技术公司",
+    way: "微信",
+    content: "发送报价单，等待客户内部审批流程",
+    user: "王强",
+    time: "09-09 17:20",
+  },
+  {
+    customer: "成都锦程物流有限公司",
+    way: "电话",
+    content: "回访首月使用情况，客户反馈良好",
+    user: "刘洋",
+    time: "09-09 15:05",
+  },
+  {
+    customer: "北京中启信息技术股份公司",
+    way: "邮件",
+    content: "跟进续约意向，客户提出增加 20 个坐席",
+    user: "陈静",
+    time: "09-09 11:40",
+  },
+  {
+    customer: "上海瑞丰医疗器械公司",
+    way: "上门",
+    content: "演示新版本功能，约下周做正式方案汇报",
+    user: "赵磊",
+    time: "09-08 16:30",
+  },
+]);
+
+/* ------------------------------ 工具方法 ------------------------------ */
+const formatValue = (item: StatItem) => {
+  const value = item.value ?? 0;
+  return item.type === "amount"
+    ? `¥ ${value.toLocaleString("zh-CN")}`
+    : value.toLocaleString("zh-CN");
+};
+
+const formatWan = (value: number) => {
+  if (!value) return "0";
+  return value >= 10000 ? `${(value / 10000).toFixed(1)} 万` : `${value}`;
+};
+
+const trendClass = (trend: number) =>
+  trend > 0 ? "up" : trend < 0 ? "down" : "flat";
+
+// 基于基数生成带随机波动的模拟数据（后续替换为接口数据）
+const randomBy = (base: number, spread = 0.3) =>
+  Math.round(base * (1 - spread / 2 + Math.random() * spread));
+
+const getBase = (key: string) =>
+  statMeta.find((i) => i.key === key)?.base[range.value] ?? 0;
+
+const buildAxis = (): string[] => {
+  const now = new Date();
+  switch (range.value) {
+    case "day":
+      return Array.from({ length: 12 }, (_, i) => `${pad(i * 2)}:00`);
+    case "week":
+      return ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+    case "month": {
+      const days = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
+      return Array.from({ length: days }, (_, i) => `${i + 1}日`);
+    }
+    case "quarter": {
+      const q = Math.floor(now.getMonth() / 3);
+      return [0, 1, 2].map((i) => `${q * 3 + i + 1}月`);
+    }
+    default:
+      return Array.from({ length: 12 }, (_, i) => `${i + 1}月`);
+  }
+};
+
+const buildSeries = (total: number, len: number) =>
+  Array.from({ length: len }, () => randomBy(total / len, 0.6));
+
+/* ------------------------------ 图表 ------------------------------ */
+const trendRef = ref<HTMLElement | null>(null);
+const funnelRef = ref<HTMLElement | null>(null);
+const amountRef = ref<HTMLElement | null>(null);
+const sourceRef = ref<HTMLElement | null>(null);
+
+const trendChart = shallowRef<echarts.ECharts | null>(null);
+const funnelChart = shallowRef<echarts.ECharts | null>(null);
+const amountChart = shallowRef<echarts.ECharts | null>(null);
+const sourceChart = shallowRef<echarts.ECharts | null>(null);
+
+const getPalette = () => {
+  const dark = document.documentElement.classList.contains("dark");
+  return {
+    label: dark ? "#a8abb2" : "#606266",
+    axis: dark ? "#4c4d4f" : "#e0e6ed",
+    split: dark ? "#2b2b2d" : "#f2f6fc",
+  };
+};
+
+const renderTrendChart = () => {
+  if (!trendChart.value) return;
+  const p = getPalette();
+  const axis = buildAxis();
+  trendChart.value.setOption(
+    {
+      tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
+      legend: {
+        data: ["新增客户", "新增商机"],
+        right: 0,
+        icon: "roundRect",
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: { color: p.label, fontSize: 12 },
+      },
+      grid: { left: 8, right: 8, top: 40, bottom: 4, containLabel: true },
+      xAxis: {
+        type: "category",
+        boundaryGap: false,
+        data: axis,
+        axisLine: { lineStyle: { color: p.axis } },
+        axisTick: { show: false },
+        axisLabel: { color: p.label, fontSize: 11 },
+      },
+      yAxis: {
+        type: "value",
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: p.split } },
+        axisLabel: { color: p.label, fontSize: 11 },
+      },
+      series: [
+        {
+          name: "新增客户",
+          type: "line",
+          smooth: true,
+          symbol: "circle",
+          symbolSize: 6,
+          lineStyle: { width: 2, color: "#3973ff" },
+          itemStyle: { color: "#3973ff" },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "rgba(57,115,255,0.28)" },
+              { offset: 1, color: "rgba(57,115,255,0.02)" },
+            ]),
+          },
+          data: buildSeries(getBase("newCustomer"), axis.length),
+        },
+        {
+          name: "新增商机",
+          type: "line",
+          smooth: true,
+          symbol: "circle",
+          symbolSize: 6,
+          lineStyle: { width: 2, color: "#10b981" },
+          itemStyle: { color: "#10b981" },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "rgba(16,185,129,0.28)" },
+              { offset: 1, color: "rgba(16,185,129,0.02)" },
+            ]),
+          },
+          data: buildSeries(getBase("newChance"), axis.length),
+        },
+      ],
+    },
+    true
+  );
+};
+
+const renderFunnelChart = () => {
+  if (!funnelChart.value) return;
+  const p = getPalette();
+  const clue = getBase("newClue");
+  const data = [
+    { name: "线索", value: clue, ratio: 1 },
+    { name: "商机", value: Math.round(clue * 0.42), ratio: 0.42 },
+    { name: "报价", value: Math.round(clue * 0.22), ratio: 0.22 },
+    { name: "合同", value: Math.round(clue * 0.1), ratio: 0.1 },
+    { name: "回款", value: Math.round(clue * 0.078), ratio: 0.078 },
+  ];
+  funnelChart.value.setOption(
+    {
+      tooltip: {
+        trigger: "item",
+        formatter: (params: any) =>
+          `${params.name}：${params.value}（${(params.data.ratio * 100).toFixed(1)}%）`,
+      },
+      legend: {
+        bottom: 0,
+        icon: "roundRect",
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: { color: p.label, fontSize: 12 },
+      },
+      series: [
+        {
+          type: "funnel",
+          top: 12,
+          bottom: 40,
+          left: "8%",
+          right: "8%",
+          sort: "descending",
+          gap: 4,
+          label: {
+            show: true,
+            position: "inside",
+            color: "#fff",
+            fontSize: 12,
+            formatter: (params: any) => `${params.name} ${params.value}`,
+          },
+          itemStyle: { borderWidth: 0 },
+          data: data.map((i, idx) => ({
+            ...i,
+            itemStyle: {
+              color: ["#3973ff", "#00b8d9", "#10b981", "#f59e0b", "#8b5cf6"][idx],
+            },
+          })),
+        },
+      ],
+    },
+    true
+  );
+};
+
+const renderAmountChart = () => {
+  if (!amountChart.value) return;
+  const p = getPalette();
+  const axis = buildAxis();
+  amountChart.value.setOption(
+    {
+      tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+      legend: {
+        data: ["合同金额", "回款金额"],
+        right: 0,
+        icon: "roundRect",
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: { color: p.label, fontSize: 12 },
+      },
+      grid: { left: 8, right: 8, top: 40, bottom: 4, containLabel: true },
+      xAxis: {
+        type: "category",
+        data: axis,
+        axisLine: { lineStyle: { color: p.axis } },
+        axisTick: { show: false },
+        axisLabel: { color: p.label, fontSize: 11 },
+      },
+      yAxis: {
+        type: "value",
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: p.split } },
+        axisLabel: {
+          color: p.label,
+          fontSize: 11,
+          formatter: (v: number) => formatWan(v),
+        },
+      },
+      series: [
+        {
+          name: "合同金额",
+          type: "bar",
+          barMaxWidth: 18,
+          itemStyle: { color: "#f59e0b", borderRadius: [4, 4, 0, 0] },
+          data: buildSeries(getBase("contractAmount"), axis.length),
+        },
+        {
+          name: "回款金额",
+          type: "bar",
+          barMaxWidth: 18,
+          itemStyle: { color: "#eab308", borderRadius: [4, 4, 0, 0] },
+          data: buildSeries(getBase("paymentAmount"), axis.length),
+        },
+      ],
+    },
+    true
+  );
+};
+
+const renderSourceChart = () => {
+  if (!sourceChart.value) return;
+  const p = getPalette();
+  const total = getBase("newClue");
+  const ratio = [0.28, 0.2, 0.16, 0.14, 0.12, 0.1];
+  const names = ["官网注册", "电话咨询", "展会获客", "客户转介绍", "社交媒体", "广告投放"];
+  const data = names.map((name, i) => ({
+    name,
+    value: Math.round(total * ratio[i] * (0.9 + Math.random() * 0.2)),
+  }));
+  sourceChart.value.setOption(
+    {
+      tooltip: { trigger: "item", formatter: "{b}：{c}（{d}%）" },
+      legend: {
+        type: "scroll",
+        orient: "vertical",
+        right: 0,
+        top: "middle",
+        icon: "roundRect",
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: { color: p.label, fontSize: 12 },
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["42%", "68%"],
+          center: ["38%", "50%"],
+          avoidLabelOverlap: true,
+          itemStyle: {
+            borderColor: "var(--el-bg-color, #fff)",
+            borderWidth: 2,
+          },
+          label: { show: false },
+          data,
+        },
+      ],
+    },
+    true
+  );
+};
+
+const renderCharts = () => {
+  renderTrendChart();
+  renderFunnelChart();
+  renderAmountChart();
+  renderSourceChart();
+};
+
+const initCharts = () => {
+  if (trendRef.value) trendChart.value = echarts.init(trendRef.value);
+  if (funnelRef.value) funnelChart.value = echarts.init(funnelRef.value);
+  if (amountRef.value) amountChart.value = echarts.init(amountRef.value);
+  if (sourceRef.value) sourceChart.value = echarts.init(sourceRef.value);
+};
+
+const handleResize = () => {
+  trendChart.value?.resize();
+  funnelChart.value?.resize();
+  amountChart.value?.resize();
+  sourceChart.value?.resize();
+};
+
+/* ------------------------------ 数据加载 ------------------------------ */
+const loadData = async () => {
+  loading.value = true;
+  try {
+    // TODO: 接入真实接口，按 range 维度查询统计数据
+    // const res = await getCrmDashboard({ range: range.value });
+    await new Promise((resolve) => setTimeout(resolve, 260));
+    statCards.value = statMeta.map((meta) => ({
+      ...meta,
+      value: randomBy(meta.base[range.value]),
+      trend: Number((Math.random() * 46 - 16).toFixed(1)),
+    }));
+    const now = new Date();
+    updateTime.value = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(
+      now.getDate()
+    )} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+    await nextTick();
+    renderCharts();
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleRangeChange = () => {
+  loadData();
+};
+
+/* ------------------------------ 生命周期 ------------------------------ */
+let themeObserver: MutationObserver | null = null;
+
+onMounted(async () => {
+  initCharts();
+  await nextTick();
+  await loadData();
+  window.addEventListener("resize", handleResize);
+  // 主题切换（亮/暗）后重绘图表，保证坐标轴与文字颜色一致
+  themeObserver = new MutationObserver(() => renderCharts());
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize);
+  themeObserver?.disconnect();
+  themeObserver = null;
+  trendChart.value?.dispose();
+  funnelChart.value?.dispose();
+  amountChart.value?.dispose();
+  sourceChart.value?.dispose();
+});
+</script>
+
+<style lang="less" scoped>
+.crm-dashboard {
+  min-height: 100%;
+
+  /* 顶部工具栏 */
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 16px 20px;
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 8px;
+
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+
+    .subtitle {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-top: 6px;
+      font-size: 13px;
+      color: var(--el-text-color-secondary);
+
+      .dot {
+        color: var(--el-text-color-placeholder);
+      }
+    }
+
+    .toolbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+
+  /* 统计卡片 */
+  .stat-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
+    gap: 12px;
+    margin-top: 12px;
+  }
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 8px;
+    transition: all 0.25s;
+
+    &:hover {
+      border-color: var(--el-border-color);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+    }
+
+    .stat-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 40px;
+      height: 40px;
+      border-radius: 8px;
+      color: var(--el-text-color-secondary);
+      background: var(--el-fill-color-light);
+    }
+
+    .stat-body {
+      min-width: 0;
+      flex: 1;
+
+      .stat-label {
+        font-size: 13px;
+        color: var(--el-text-color-regular);
+      }
+
+      .stat-value {
+        margin: 4px 0;
+        font-size: 20px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .stat-footer {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+
+        .trend {
+          display: inline-flex;
+          align-items: center;
+          gap: 2px;
+          font-weight: 500;
+
+          &.up {
+            color: #67c23a;
+          }
+
+          &.down {
+            color: #f56c6c;
+          }
+
+          &.flat {
+            color: var(--el-text-color-placeholder);
+          }
+        }
+
+        .trend-label {
+          color: var(--el-text-color-placeholder);
+        }
+      }
+    }
+  }
+
+  /* 图表面板 */
+  .chart-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    margin-top: 12px;
+
+    &.chart-grid-wide {
+      grid-template-columns: 2fr 1fr;
+    }
+  }
+
+  .panel {
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 8px;
+
+    .panel-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      .panel-title {
+        position: relative;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 3px;
+          height: 14px;
+          border-radius: 2px;
+          background: var(--el-color-primary);
+        }
+      }
+    }
+
+    .chart {
+      width: 100%;
+      height: 300px;
+    }
+  }
+
+  /* 排行榜 */
+  .rank-list {
+    min-height: 300px;
+
+    .rank-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 4px;
+      border-bottom: 1px dashed var(--el-border-color-lighter);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .rank-no {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 22px;
+        height: 22px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--el-text-color-secondary);
+        background: var(--el-fill-color);
+
+        &.top-1 {
+          color: #fff;
+          background: #f59e0b;
+        }
+
+        &.top-2 {
+          color: #fff;
+          background: #a8abb2;
+        }
+
+        &.top-3 {
+          color: #fff;
+          background: #d9873f;
+        }
+      }
+
+      .rank-info {
+        flex: 1;
+        min-width: 0;
+
+        .rank-name {
+          font-size: 14px;
+          color: var(--el-text-color-primary);
+
+          .rank-dept {
+            margin-left: 8px;
+            font-size: 12px;
+            color: var(--el-text-color-placeholder);
+          }
+        }
+
+        .rank-bar {
+          height: 6px;
+          margin-top: 6px;
+          border-radius: 3px;
+          background: var(--el-fill-color);
+          overflow: hidden;
+
+          .rank-bar-inner {
+            height: 100%;
+            border-radius: 3px;
+            background: linear-gradient(90deg, #3973ff 0%, #6b9bff 100%);
+            transition: width 0.4s;
+          }
+        }
+      }
+
+      .rank-amount {
+        flex-shrink: 0;
+        text-align: right;
+
+        .rank-contract {
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+        }
+
+        .rank-payment {
+          margin-top: 2px;
+          font-size: 12px;
+          color: var(--el-text-color-secondary);
+        }
+      }
+    }
+  }
+
+  /* 最新回访 */
+  .visit-list {
+    min-height: 300px;
+
+    .visit-item {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 10px 4px;
+      border-bottom: 1px dashed var(--el-border-color-lighter);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background: var(--el-fill-color-lighter);
+      }
+
+      .visit-main {
+        min-width: 0;
+
+        .visit-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 14px;
+          color: var(--el-text-color-primary);
+        }
+
+        .visit-content {
+          margin-top: 4px;
+          font-size: 12px;
+          color: var(--el-text-color-secondary);
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .visit-meta {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 2px;
+        font-size: 12px;
+        color: var(--el-text-color-placeholder);
+      }
+    }
+  }
+}
+
+/* 响应式：手机端卡片一行 2 个、图表一行 1 个 */
+@media (max-width: 768px) {
+  .crm-dashboard {
+    overflow-x: hidden;
+
+    .toolbar {
+      padding: 12px;
+
+      .title {
+        font-size: 16px;
+      }
+
+      .toolbar-right {
+        width: 100%;
+        flex-wrap: wrap;
+        gap: 8px;
+
+        :deep(.el-radio-button--small .el-radio-button__inner),
+        :deep(.el-button) {
+          min-height: 36px;
+        }
+      }
+    }
+
+    .stat-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+    }
+
+    .stat-card {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 12px;
+
+      .stat-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+      }
+
+      .stat-body .stat-value {
+        font-size: 18px;
+      }
+    }
+
+    .chart-grid,
+    .chart-grid.chart-grid-wide {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .panel {
+      padding: 12px;
+
+      .chart {
+        height: 260px;
+      }
+    }
+
+    .visit-item {
+      flex-direction: column;
+
+      .visit-meta {
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+}
+</style>
diff --git a/backend/src/views/apps/crm/dict.js b/backend/src/views/apps/crm/dict.js
new file mode 100644
index 0000000..a5b9f7d
--- /dev/null
+++ b/backend/src/views/apps/crm/dict.js
@@ -0,0 +1,137 @@
+/**
+ * CRM 模块通用字典与格式化方法
+ * kind: customer（客户） | supplier（供应商）
+ */
+
+export const CUSTOMER_TYPE_OPTIONS = [
+  { label: "企业", value: "1" },
+  { label: "政府机构", value: "2" },
+  { label: "国企", value: "3" },
+  { label: "教育机构", value: "4" },
+  { label: "个人", value: "5" },
+];
+
+export const SUPPLIER_TYPE_OPTIONS = [
+  { label: "原材料供应商", value: "1" },
+  { label: "设备供应商", value: "2" },
+  { label: "服务供应商", value: "3" },
+  { label: "其他", value: "4" },
+];
+
+export const STATUS_OPTIONS = [
+  { label: "正常", value: "1" },
+  { label: "禁用", value: "0" },
+  { label: "冻结", value: "2" },
+  { label: "已注销", value: "3" },
+];
+
+export const GENDER_OPTIONS = [
+  { label: "未知", value: 0 },
+  { label: "男", value: 1 },
+  { label: "女", value: 2 },
+];
+
+/** 联系人关联类型：1=客户，2=供应商 */
+export const RELATED_TYPE_OPTIONS = [
+  { label: "客户", value: 1 },
+  { label: "供应商", value: 2 },
+];
+
+/** 客户移入公海原因 */
+export const POOL_REASON_OPTIONS = [
+  "长期未跟进",
+  "合作终止",
+  "重复建档",
+  "负责人离职",
+  "手动释放",
+  "其他",
+];
+
+const TYPE_MAP = {
+  customer: {
+    1: "企业",
+    2: "政府机构",
+    3: "国企",
+    4: "教育机构",
+    5: "个人",
+  },
+  supplier: {
+    1: "原材料供应商",
+    2: "设备供应商",
+    3: "服务供应商",
+    4: "其他",
+  },
+};
+
+const LEVEL_MAP = {
+  customer: {
+    1: "核心客户",
+    2: "重要客户",
+    3: "普通客户",
+    4: "潜在客户",
+  },
+  supplier: {
+    1: "核心供应商",
+    2: "重要供应商",
+    3: "普通供应商",
+    4: "潜在供应商",
+  },
+};
+
+const STATUS_MAP = { 0: "禁用", 1: "正常", 2: "冻结", 3: "已注销" };
+const STATUS_TAG_MAP = { 0: "info", 1: "success", 2: "warning", 3: "danger" };
+const LEVEL_TAG_MAP = { 1: "danger", 2: "warning", 3: "info", 4: "" };
+const GENDER_MAP = { 0: "未知", 1: "男", 2: "女" };
+
+const normalize = (val) => (val === undefined || val === null ? "" : String(val));
+
+export const typeOptions = (kind = "customer") =>
+  (kind === "supplier" ? SUPPLIER_TYPE_OPTIONS : CUSTOMER_TYPE_OPTIONS);
+
+export const typeText = (kind, val) =>
+  TYPE_MAP[kind]?.[normalize(val)] || normalize(val) || "-";
+
+export const typeTag = (val) => {
+  const map = { 1: "primary", 2: "warning", 3: "success", 4: "info", 5: "info" };
+  return map[normalize(val)] || "info";
+};
+
+export const levelOptions = (kind = "customer") =>
+  Object.entries(LEVEL_MAP[kind] || LEVEL_MAP.customer).map(([value, label]) => ({
+    value,
+    label,
+  }));
+
+export const levelText = (kind, val) =>
+  LEVEL_MAP[kind]?.[normalize(val)] || normalize(val) || "-";
+
+export const levelTag = (val) => LEVEL_TAG_MAP[normalize(val)] ?? "";
+
+export const statusText = (val) => STATUS_MAP[normalize(val)] || normalize(val) || "-";
+
+export const statusTag = (val) => STATUS_TAG_MAP[normalize(val)] || "info";
+
+export const genderText = (val) => GENDER_MAP[normalize(val)] || "未知";
+
+export const relatedTypeText = (val) =>
+  normalize(val) === "1" ? "客户" : normalize(val) === "2" ? "供应商" : "-";
+
+export function formatDate(val) {
+  if (!val) return "-";
+  const d = new Date(val);
+  if (isNaN(d.getTime())) return String(val);
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${d.getFullYear()}-${m}-${day}`;
+}
+
+export function formatDateTime(val) {
+  if (!val) return "-";
+  const d = new Date(val);
+  if (isNaN(d.getTime())) return String(val);
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const h = String(d.getHours()).padStart(2, "0");
+  const min = String(d.getMinutes()).padStart(2, "0");
+  return `${d.getFullYear()}-${m}-${day} ${h}:${min}`;
+}
diff --git a/backend/src/views/apps/crm/index.vue b/backend/src/views/apps/crm/index.vue
new file mode 100644
index 0000000..3fa5df9
--- /dev/null
+++ b/backend/src/views/apps/crm/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/backend/src/views/apps/crm/pool/index.vue b/backend/src/views/apps/crm/pool/index.vue
new file mode 100644
index 0000000..c7f0585
--- /dev/null
+++ b/backend/src/views/apps/crm/pool/index.vue
@@ -0,0 +1,511 @@
+<template>
+  <div class="crm-page">
+    <div class="page-header">
+      <div>
+        <h2>客户公海</h2>
+        <p>公海客户为租户共享资源，当前租户下所有成员均可见，可自行领取或分配给他人跟进</p>
+      </div>
+      <div class="header-actions">
+        <el-button :icon="Refresh" @click="fetchList">刷新</el-button>
+        <el-button
+          type="primary"
+          plain
+          :disabled="!multipleSelection.length"
+          @click="handleBatchClaim"
+        >
+          批量领取
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          :disabled="!multipleSelection.length"
+          @click="openAssign(multipleSelection)"
+        >
+          批量分配
+        </el-button>
+      </div>
+    </div>
+
+    <el-alert
+      type="info"
+      show-icon
+      :closable="false"
+      class="pool-tip"
+      title="数据范围：当前租户全部成员共享"
+      description="公海中的客户不归属任何个人，领取后成为您的客户；分配给他人后由对方跟进。"
+    />
+
+    <div class="filter-bar">
+      <el-form :inline="true" :model="filters" @submit.prevent>
+        <el-form-item>
+          <el-input
+            v-model="filters.keyword"
+            clearable
+            placeholder="搜索客户名称 / 联系人 / 电话"
+            :prefix-icon="Search"
+            style="width: 240px"
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="客户类型">
+          <el-select v-model="filters.customer_type" clearable placeholder="全部" style="width: 130px">
+            <el-option
+              v-for="item in CUSTOMER_TYPE_OPTIONS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户等级">
+          <el-select v-model="filters.customer_level" clearable placeholder="全部" style="width: 130px">
+            <el-option
+              v-for="item in levelOptions('customer')"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="进入公海时间">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            value-format="YYYY-MM-DD"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="table-container" v-loading="loading">
+      <el-table
+        :data="tableData"
+        stripe
+        border
+        row-key="id"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column label="客户名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="name-link" @click="openDetail(row)">{{ row.customer_name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="110" align="center">
+          <template #default="{ row }">
+            <el-tag :type="typeTag(row.customer_type)" size="small">
+              {{ typeText('customer', row.customer_type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="等级" width="110" align="center">
+          <template #default="{ row }">
+            <el-tag :type="levelTag(row.customer_level)" size="small" effect="plain">
+              {{ levelText('customer', row.customer_level) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="industry" label="行业" width="120" show-overflow-tooltip />
+        <el-table-column prop="contact_person" label="联系人" width="100" />
+        <el-table-column prop="contact_phone" label="联系电话" width="130" />
+        <el-table-column label="原负责人" width="110">
+          <template #default="{ row }">{{ row.last_owner_name || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="进入公海时间" width="160" align="center">
+          <template #default="{ row }">{{ formatDateTime(row.pool_in_time) }}</template>
+        </el-table-column>
+        <el-table-column label="原因" width="130" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.pool_reason || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="260" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" size="small" @click="handleClaim([row])">领取</el-button>
+            <el-button link type="primary" size="small" @click="openAssign([row])">分配</el-button>
+            <el-button link type="warning" size="small" @click="handleRemove([row])">移出公海</el-button>
+            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="公海暂无客户" :image-size="80" />
+        </template>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSearch"
+          @current-change="fetchList"
+        />
+      </div>
+    </div>
+
+    <!-- 分配负责人 -->
+    <el-dialog v-model="assignVisible" title="分配负责人" width="460px" :close-on-click-modal="false">
+      <el-form label-width="90px">
+        <el-form-item label="待分配客户">
+          <span>{{ assignTargetNames }}</span>
+        </el-form-item>
+        <el-form-item label="负责人">
+          <el-select
+            v-model="assignUserId"
+            filterable
+            placeholder="请选择负责人"
+            style="width: 100%"
+            :loading="userLoading"
+          >
+            <el-option
+              v-for="item in userOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="assignVisible = false">取消</el-button>
+        <el-button type="primary" :loading="assignSubmitting" @click="submitAssign">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 详情抽屉 -->
+    <el-drawer
+      v-model="detailVisible"
+      :title="detailData?.customer_name || '客户详情'"
+      direction="rtl"
+      size="520px"
+    >
+      <div v-if="detailData">
+        <el-descriptions title="基本信息" :column="2" border size="small">
+          <el-descriptions-item label="客户名称" :span="2">
+            {{ detailData.customer_name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="客户类型">
+            {{ typeText('customer', detailData.customer_type) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="客户等级">
+            {{ levelText('customer', detailData.customer_level) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="所属行业">{{ detailData.industry || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="联系人">{{ detailData.contact_person || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="联系电话">{{ detailData.contact_phone || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="联系邮箱">{{ detailData.contact_email || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="客户地址" :span="2">
+            {{ detailData.address || '-' }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions
+          title="公海信息"
+          :column="2"
+          border
+          size="small"
+          style="margin-top: 20px"
+        >
+          <el-descriptions-item label="原负责人">{{ detailData.last_owner_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="进入原因">{{ detailData.pool_reason || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="进入时间" :span="2">
+            {{ formatDateTime(detailData.pool_in_time) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Search, Refresh } from "@element-plus/icons-vue";
+import {
+  getPoolList,
+  claimPoolCustomer,
+  assignPoolCustomer,
+  removeFromPool,
+  deleteCrmCustomer,
+} from "@/api/crm";
+import { getAllUsers } from "@/api/user";
+import { useAuthStore } from "@/stores/auth";
+import {
+  CUSTOMER_TYPE_OPTIONS,
+  levelOptions,
+  typeText,
+  typeTag,
+  levelText,
+  levelTag,
+  formatDateTime,
+} from "../dict";
+
+const authStore = useAuthStore();
+
+const loading = ref(false);
+const tableData = ref([]);
+const multipleSelection = ref([]);
+const dateRange = ref([]);
+const detailVisible = ref(false);
+const detailData = ref(null);
+
+const filters = reactive({
+  keyword: "",
+  customer_type: "",
+  customer_level: "",
+});
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+
+// 分配
+const assignVisible = ref(false);
+const assignTargets = ref([]);
+const assignUserId = ref("");
+const assignSubmitting = ref(false);
+const userLoading = ref(false);
+const userOptions = ref([]);
+
+const assignTargetNames = computed(() =>
+  assignTargets.value.map((item) => item.customer_name).join("、")
+);
+
+onMounted(() => {
+  fetchList();
+});
+
+async function fetchList() {
+  loading.value = true;
+  try {
+    const params = {
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      ...filters,
+    };
+    if (dateRange.value && dateRange.value.length === 2) {
+      params.start_time = dateRange.value[0];
+      params.end_time = dateRange.value[1];
+    }
+    const res = await getPoolList(params);
+    const data = res?.data || {};
+    tableData.value = Array.isArray(data) ? data : data.list || [];
+    pagination.total = data.total || tableData.value.length;
+  } catch (e) {
+    tableData.value = [];
+    pagination.total = 0;
+    ElMessage.error(e.message || "查询失败");
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleSearch() {
+  pagination.page = 1;
+  fetchList();
+}
+
+function resetFilters() {
+  filters.keyword = "";
+  filters.customer_type = "";
+  filters.customer_level = "";
+  dateRange.value = [];
+  handleSearch();
+}
+
+function handleSelectionChange(val) {
+  multipleSelection.value = val;
+}
+
+function openDetail(row) {
+  detailData.value = { ...row };
+  detailVisible.value = true;
+}
+
+/* ------------------------------ 领取 ------------------------------ */
+async function handleClaim(rows) {
+  if (!rows.length) return;
+  const names = rows.map((item) => item.customer_name).join("、");
+  try {
+    await ElMessageBox.confirm(
+      `确定领取客户「${names}」吗？领取后由 ${authStore.user?.name || '当前用户'} 跟进。`,
+      "领取确认",
+      { type: "warning" }
+    );
+    await claimPoolCustomer({ ids: rows.map((item) => item.id) });
+    ElMessage.success("领取成功");
+    multipleSelection.value = [];
+    fetchList();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "领取失败");
+    }
+  }
+}
+
+function handleBatchClaim() {
+  handleClaim(multipleSelection.value);
+}
+
+/* ------------------------------ 分配 ------------------------------ */
+async function openAssign(rows) {
+  if (!rows.length) return;
+  assignTargets.value = rows;
+  assignUserId.value = "";
+  assignVisible.value = true;
+  await loadUsers();
+}
+
+async function loadUsers() {
+  if (userOptions.value.length) return;
+  userLoading.value = true;
+  try {
+    const res = await getAllUsers();
+    const data = res?.data || {};
+    const list = Array.isArray(data) ? data : data.list || [];
+    userOptions.value = list.map((item) => ({
+      id: item.id,
+      name: item.name || item.account || `用户${item.id}`,
+    }));
+  } catch (e) {
+    userOptions.value = [];
+  } finally {
+    userLoading.value = false;
+  }
+}
+
+async function submitAssign() {
+  if (!assignUserId.value) {
+    ElMessage.warning("请选择负责人");
+    return;
+  }
+  assignSubmitting.value = true;
+  try {
+    await assignPoolCustomer({
+      ids: assignTargets.value.map((item) => item.id),
+      owner_user_id: assignUserId.value,
+    });
+    ElMessage.success("分配成功");
+    assignVisible.value = false;
+    multipleSelection.value = [];
+    fetchList();
+  } catch (e) {
+    ElMessage.error(e.message || "分配失败");
+  } finally {
+    assignSubmitting.value = false;
+  }
+}
+
+/* ---------------------------- 移出 / 删除 ---------------------------- */
+async function handleRemove(rows) {
+  if (!rows.length) return;
+  try {
+    await ElMessageBox.confirm(
+      `确定将选中的 ${rows.length} 个客户移出公海吗？`,
+      "移出公海",
+      { type: "warning" }
+    );
+    await removeFromPool({ ids: rows.map((item) => item.id) });
+    ElMessage.success("已移出公海");
+    multipleSelection.value = [];
+    fetchList();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "操作失败");
+    }
+  }
+}
+
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除客户「${row.customer_name}」吗？删除后不可恢复。`,
+      "删除确认",
+      { type: "warning" }
+    );
+    await deleteCrmCustomer(row.id);
+    ElMessage.success("删除成功");
+    fetchList();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "删除失败");
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.crm-page {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0 0 6px 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.pool-tip {
+  margin-bottom: 12px;
+}
+
+.filter-bar {
+  background: var(--el-bg-color);
+  padding: 16px 16px 0;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.table-container {
+  background: var(--el-bg-color);
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.name-link {
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--el-color-primary);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/backend/src/views/apps/crm/supplier/components/edit.vue b/backend/src/views/apps/crm/supplier/components/edit.vue
new file mode 100644
index 0000000..061e070
--- /dev/null
+++ b/backend/src/views/apps/crm/supplier/components/edit.vue
@@ -0,0 +1,284 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="isEdit ? '编辑供应商' : '新增供应商'"
+    width="760px"
+    :close-on-click-modal="false"
+    @update:model-value="handleClose"
+    @closed="handleClosed"
+  >
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="基本信息" name="basic">
+        <el-form
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          label-width="110px"
+          label-position="right"
+        >
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="供应商名称" prop="supplier_name">
+                <el-input v-model="form.supplier_name" placeholder="请输入供应商名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="供应商类型" prop="supplier_type">
+                <el-select v-model="form.supplier_type" placeholder="请选择" style="width: 100%">
+                  <el-option
+                    v-for="item in SUPPLIER_TYPE_OPTIONS"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="供应商等级" prop="supplier_level">
+                <el-select v-model="form.supplier_level" placeholder="请选择" style="width: 100%">
+                  <el-option
+                    v-for="item in levelOptions('supplier')"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="所属行业" prop="industry">
+                <el-input v-model="form.industry" placeholder="如：机械设备、电子元器件" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="合作开始" prop="register_time">
+                <el-date-picker
+                  v-model="form.register_time"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="选择日期"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="合作到期" prop="expire_time">
+                <el-date-picker
+                  v-model="form.expire_time"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="选择日期"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="供应商地址" prop="address">
+                <el-input v-model="form.address" placeholder="请输入详细地址" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="form.status" placeholder="请选择" style="width: 100%">
+                  <el-option
+                    v-for="item in STATUS_OPTIONS"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane label="联系信息" name="contact">
+        <el-form :model="form" label-width="110px" label-position="right">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="联系人">
+                <el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="联系电话">
+                <el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="联系邮箱">
+                <el-input v-model="form.contact_email" placeholder="请输入邮箱" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane label="开票信息" name="invoice">
+        <el-form :model="form" label-width="110px" label-position="right">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="发票抬头">
+                <el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="纳税人识别号">
+                <el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="注册地址">
+                <el-input v-model="form.registered_address" placeholder="请输入注册地址" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="注册电话">
+                <el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="开户行名称">
+                <el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="开户行账号">
+                <el-input v-model="form.bank_account" placeholder="请输入银行账号" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane label="备注" name="remark">
+        <el-form :model="form" label-width="110px" label-position="right">
+          <el-form-item label="备注">
+            <el-input
+              v-model="form.remark"
+              type="textarea"
+              :rows="8"
+              placeholder="请输入备注信息（选填）"
+            />
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick } from "vue";
+import { ElMessage } from "element-plus";
+import { createCrmSupplier, updateCrmSupplier } from "@/api/crm";
+import { SUPPLIER_TYPE_OPTIONS, STATUS_OPTIONS, levelOptions } from "../../dict";
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  editData: { type: Object, default: null },
+});
+
+const emit = defineEmits(["update:visible", "success"]);
+
+const formRef = ref();
+const activeTab = ref("basic");
+const submitting = ref(false);
+const isEdit = ref(false);
+const internalId = ref(null);
+
+const defaultForm = () => ({
+  supplier_name: "",
+  supplier_type: "1",
+  supplier_level: "3",
+  industry: "",
+  contact_person: "",
+  contact_phone: "",
+  contact_email: "",
+  address: "",
+  register_time: "",
+  expire_time: "",
+  status: "1",
+  remark: "",
+  invoice_title: "",
+  tax_number: "",
+  registered_address: "",
+  registered_phone: "",
+  bank_name: "",
+  bank_account: "",
+});
+
+const form = reactive(defaultForm());
+
+const rules = {
+  supplier_name: [{ required: true, message: "请输入供应商名称", trigger: "blur" }],
+  supplier_type: [{ required: true, message: "请选择供应商类型", trigger: "change" }],
+  contact_phone: [
+    {
+      pattern: /^(1[3-9]\d{9}|0\d{2,3}-?\d{7,8}|\d{7,8})$/,
+      message: "联系电话格式不正确",
+      trigger: "blur",
+    },
+  ],
+  contact_email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
+};
+
+watch(
+  () => props.visible,
+  async (val) => {
+    if (!val) return;
+    activeTab.value = "basic";
+    isEdit.value = !!props.editData;
+    internalId.value = props.editData?.id ?? null;
+    if (props.editData) {
+      Object.assign(form, defaultForm(), props.editData);
+    } else {
+      Object.assign(form, defaultForm());
+    }
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+
+function handleClose() {
+  emit("update:visible", false);
+}
+
+function handleClosed() {
+  formRef.value?.resetFields();
+  activeTab.value = "basic";
+}
+
+async function handleSave() {
+  if (!formRef.value) return;
+  try {
+    await formRef.value.validate();
+  } catch (e) {
+    activeTab.value = "basic";
+    return;
+  }
+  submitting.value = true;
+  try {
+    const payload = { ...form, is_draft: 0 };
+    if (internalId.value) {
+      await updateCrmSupplier(internalId.value, payload);
+      ElMessage.success("更新成功");
+    } else {
+      await createCrmSupplier(payload);
+      ElMessage.success("新增成功");
+    }
+    emit("success");
+    handleClose();
+  } catch (e) {
+    ElMessage.error(e.message || "操作失败");
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
diff --git a/backend/src/views/apps/crm/supplier/index.vue b/backend/src/views/apps/crm/supplier/index.vue
new file mode 100644
index 0000000..083bd3e
--- /dev/null
+++ b/backend/src/views/apps/crm/supplier/index.vue
@@ -0,0 +1,533 @@
+<template>
+  <div class="crm-page">
+    <div class="page-header">
+      <div>
+        <h2>供应商管理</h2>
+        <p>维护供应商档案、合作期限与对接人，支撑采购与对账业务</p>
+      </div>
+      <div class="header-actions">
+        <el-button :icon="Refresh" @click="fetchList">刷新</el-button>
+        <el-button type="primary" :icon="Plus" @click="openCreate">新增供应商</el-button>
+      </div>
+    </div>
+
+    <div class="filter-bar">
+      <el-form :inline="true" :model="filters" @submit.prevent>
+        <el-form-item>
+          <el-input
+            v-model="filters.keyword"
+            clearable
+            placeholder="搜索供应商名称 / 联系人 / 电话"
+            :prefix-icon="Search"
+            style="width: 240px"
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="供应商类型">
+          <el-select v-model="filters.supplier_type" clearable placeholder="全部" style="width: 150px">
+            <el-option
+              v-for="item in SUPPLIER_TYPE_OPTIONS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="供应商等级">
+          <el-select v-model="filters.supplier_level" clearable placeholder="全部" style="width: 140px">
+            <el-option
+              v-for="item in levelOptions('supplier')"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="filters.status" clearable placeholder="全部" style="width: 110px">
+            <el-option
+              v-for="item in STATUS_OPTIONS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="table-container" v-loading="loading">
+      <el-table :data="tableData" stripe border row-key="id">
+        <el-table-column label="供应商名称" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="name-link" @click="openDetail(row)">{{ row.supplier_name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="140" align="center">
+          <template #default="{ row }">
+            <el-tag :type="typeTag(row.supplier_type)" size="small">
+              {{ typeText('supplier', row.supplier_type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="等级" width="120" align="center">
+          <template #default="{ row }">
+            <el-tag :type="levelTag(row.supplier_level)" size="small" effect="plain">
+              {{ levelText('supplier', row.supplier_level) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="industry" label="行业" width="120" show-overflow-tooltip />
+        <el-table-column prop="contact_person" label="联系人" width="100" />
+        <el-table-column prop="contact_phone" label="联系电话" width="130" />
+        <el-table-column label="合作期限" width="200" align="center">
+          <template #default="{ row }">
+            {{ formatDate(row.register_time) }} ~ {{ formatDate(row.expire_time) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusTag(row.status)" size="small">{{ statusText(row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="更新时间" width="160" align="center">
+          <template #default="{ row }">{{ formatDateTime(row.update_time) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="260" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+            <el-button link type="primary" size="small" @click="openContact(row)">联系人</el-button>
+            <el-button link type="primary" size="small" @click="handleToggleStatus(row)">
+              {{ row.status === '1' ? '禁用' : '启用' }}
+            </el-button>
+            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="暂无供应商" :image-size="80" />
+        </template>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSearch"
+          @current-change="fetchList"
+        />
+      </div>
+    </div>
+
+    <SupplierEdit
+      v-model:visible="editVisible"
+      :edit-data="currentEditData"
+      @success="fetchList"
+    />
+
+    <!-- 详情抽屉 -->
+    <el-drawer
+      v-model="detailVisible"
+      :title="detailData?.supplier_name || '供应商详情'"
+      direction="rtl"
+      size="560px"
+    >
+      <div v-if="detailData" class="detail-content">
+        <el-descriptions title="基本信息" :column="2" border size="small">
+          <el-descriptions-item label="供应商名称" :span="2">
+            {{ detailData.supplier_name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="供应商类型">
+            {{ typeText('supplier', detailData.supplier_type) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="供应商等级">
+            {{ levelText('supplier', detailData.supplier_level) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="所属行业">{{ detailData.industry || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="statusTag(detailData.status)" size="small">
+              {{ statusText(detailData.status) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="合作开始">{{ formatDate(detailData.register_time) }}</el-descriptions-item>
+          <el-descriptions-item label="合作到期">{{ formatDate(detailData.expire_time) }}</el-descriptions-item>
+          <el-descriptions-item label="供应商地址" :span="2">
+            {{ detailData.address || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">{{ formatDateTime(detailData.create_time) }}</el-descriptions-item>
+          <el-descriptions-item label="更新时间">{{ formatDateTime(detailData.update_time) }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions
+          title="联系信息"
+          :column="2"
+          border
+          size="small"
+          style="margin-top: 20px"
+        >
+          <el-descriptions-item label="联系人">{{ detailData.contact_person || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="联系电话">{{ detailData.contact_phone || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="联系邮箱" :span="2">
+            {{ detailData.contact_email || '-' }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions
+          title="开票信息"
+          :column="2"
+          border
+          size="small"
+          style="margin-top: 20px"
+        >
+          <el-descriptions-item label="发票抬头" :span="2">
+            {{ detailData.invoice_title || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="纳税人识别号">{{ detailData.tax_number || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="注册电话">{{ detailData.registered_phone || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="注册地址" :span="2">
+            {{ detailData.registered_address || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="开户行">{{ detailData.bank_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="银行账号">{{ detailData.bank_account || '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions title="备注" :column="1" border size="small" style="margin-top: 20px">
+          <el-descriptions-item label="备注">{{ detailData.remark || '-' }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-drawer>
+
+    <!-- 联系人抽屉 -->
+    <el-drawer
+      v-model="contactVisible"
+      :title="`${currentRow?.supplier_name || '供应商'} - 联系人`"
+      direction="rtl"
+      size="820px"
+    >
+      <div class="contact-drawer">
+        <div class="drawer-toolbar">
+          <el-button type="primary" :icon="Plus" size="small" @click="openContactCreate">
+            新增联系人
+          </el-button>
+          <span class="count-tip">共 {{ contactList.length }} 位联系人</span>
+        </div>
+        <el-table :data="contactList" v-loading="contactLoading" stripe border size="small">
+          <el-table-column label="姓名" width="140">
+            <template #default="{ row }">
+              <span>{{ row.contact_name }}</span>
+              <el-tag
+                v-if="Number(row.is_primary) === 1"
+                type="danger"
+                size="small"
+                effect="plain"
+                style="margin-left: 6px"
+              >
+                主联系人
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="mobile" label="手机号" width="130" />
+          <el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
+          <el-table-column prop="department" label="部门" width="120" show-overflow-tooltip />
+          <el-table-column prop="position" label="职位" width="130" show-overflow-tooltip />
+          <el-table-column label="操作" width="120" align="center" fixed="right">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="openContactEdit(row)">编辑</el-button>
+              <el-button link type="danger" size="small" @click="handleContactDelete(row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <el-empty description="暂无联系人" :image-size="60" />
+          </template>
+        </el-table>
+      </div>
+    </el-drawer>
+
+    <ContactEdit
+      v-model:visible="contactEditVisible"
+      :edit-data="contactEditData"
+      :default-related="contactRelated"
+      @success="loadContacts"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Search, Refresh } from "@element-plus/icons-vue";
+import {
+  getCrmSupplierList,
+  deleteCrmSupplier,
+  toggleCrmSupplierStatus,
+} from "@/api/crm";
+import { listContacts, deleteContact } from "@/api/contact";
+import SupplierEdit from "./components/edit.vue";
+import ContactEdit from "../contact/components/edit.vue";
+import {
+  SUPPLIER_TYPE_OPTIONS,
+  STATUS_OPTIONS,
+  levelOptions,
+  typeText,
+  typeTag,
+  levelText,
+  levelTag,
+  statusText,
+  statusTag,
+  formatDate,
+  formatDateTime,
+} from "../dict";
+
+const loading = ref(false);
+const tableData = ref([]);
+const editVisible = ref(false);
+const currentEditData = ref(null);
+const detailVisible = ref(false);
+const detailData = ref(null);
+
+const contactVisible = ref(false);
+const contactLoading = ref(false);
+const contactList = ref([]);
+const currentRow = ref(null);
+const contactEditVisible = ref(false);
+const contactEditData = ref(null);
+
+const filters = reactive({
+  keyword: "",
+  supplier_type: "",
+  supplier_level: "",
+  status: "",
+});
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+
+const contactRelated = computed(() =>
+  currentRow.value
+    ? {
+        related_type: 2,
+        related_id: currentRow.value.id,
+        related_name: currentRow.value.supplier_name,
+      }
+    : null
+);
+
+onMounted(() => {
+  fetchList();
+});
+
+async function fetchList() {
+  loading.value = true;
+  try {
+    const res = await getCrmSupplierList({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      ...filters,
+    });
+    tableData.value = res?.data?.list || [];
+    pagination.total = res?.data?.total || 0;
+  } catch (e) {
+    tableData.value = [];
+    pagination.total = 0;
+    ElMessage.error(e.message || "查询失败");
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleSearch() {
+  pagination.page = 1;
+  fetchList();
+}
+
+function resetFilters() {
+  filters.keyword = "";
+  filters.supplier_type = "";
+  filters.supplier_level = "";
+  filters.status = "";
+  handleSearch();
+}
+
+function openCreate() {
+  currentEditData.value = null;
+  editVisible.value = true;
+}
+
+function openEdit(row) {
+  currentEditData.value = { ...row };
+  editVisible.value = true;
+}
+
+function openDetail(row) {
+  detailData.value = { ...row };
+  detailVisible.value = true;
+}
+
+async function handleToggleStatus(row) {
+  const newStatus = row.status === "1" ? "0" : "1";
+  const action = newStatus === "1" ? "启用" : "禁用";
+  try {
+    await ElMessageBox.confirm(`确定要${action}供应商「${row.supplier_name}」吗？`, "提示", {
+      type: "warning",
+    });
+    await toggleCrmSupplierStatus(row.id, newStatus);
+    ElMessage.success(`${action}成功`);
+    fetchList();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "操作失败");
+    }
+  }
+}
+
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除供应商「${row.supplier_name}」吗？删除后不可恢复。`,
+      "删除确认",
+      { type: "warning" }
+    );
+    await deleteCrmSupplier(row.id);
+    ElMessage.success("删除成功");
+    fetchList();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "删除失败");
+    }
+  }
+}
+
+/* ------------------------------ 联系人 ------------------------------ */
+async function openContact(row) {
+  currentRow.value = { ...row };
+  contactVisible.value = true;
+  loadContacts();
+}
+
+async function loadContacts() {
+  if (!currentRow.value) return;
+  contactLoading.value = true;
+  try {
+    const res = await listContacts({ related_type: 2, related_id: currentRow.value.id });
+    const data = res?.data || {};
+    contactList.value = Array.isArray(data) ? data : data.list || [];
+  } catch (e) {
+    contactList.value = [];
+    ElMessage.error(e.message || "联系人查询失败");
+  } finally {
+    contactLoading.value = false;
+  }
+}
+
+function openContactCreate() {
+  contactEditData.value = null;
+  contactEditVisible.value = true;
+}
+
+function openContactEdit(row) {
+  contactEditData.value = { ...row };
+  contactEditVisible.value = true;
+}
+
+async function handleContactDelete(row) {
+  try {
+    await ElMessageBox.confirm(`确定删除联系人「${row.contact_name}」吗？`, "删除确认", {
+      type: "warning",
+    });
+    await deleteContact({ id: row.id });
+    ElMessage.success("删除成功");
+    loadContacts();
+  } catch (e) {
+    if (e !== "cancel") {
+      ElMessage.error(e.message || "删除失败");
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.crm-page {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0 0 6px 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.filter-bar {
+  background: var(--el-bg-color);
+  padding: 16px 16px 0;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.table-container {
+  background: var(--el-bg-color);
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.name-link {
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--el-color-primary);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.contact-drawer {
+  .drawer-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+
+    .count-tip {
+      font-size: 13px;
+      color: var(--el-text-color-secondary);
+    }
+  }
+}
+</style>