From 031782045923f63487707f94ce5c9e56e5520aac Mon Sep 17 00:00:00 2001
From: songjie <bestsongj@163.com>
Date: Tue, 31 Mar 2026 13:47:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E6=9C=9F=E9=99=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=EF=BC=9B=E5=B0=86deepmate=E3=80=81=E6=B7=B1=E5=BA=A6?=
 =?UTF-8?q?=E6=8E=A2=E7=B4=A2=E5=92=8C=E8=A1=8C=E6=83=85=E6=9C=9F=E9=99=90?=
 =?UTF-8?q?=E6=94=B9=E5=90=8D=E5=B9=B6=E6=94=BE=E5=85=A5=E6=9C=9F=E9=99=90?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=EF=BC=9B=E6=B3=A8=E9=87=8A=E5=8E=9F=E6=9C=AC?=
 =?UTF-8?q?=E7=9A=84=E5=B7=A6=E4=BE=A7=E5=AF=BC=E8=88=AA=E6=A0=8F=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                         |   50 +-
 src/views/UserPermissions/MarketTerm.vue    |  827 ++++++++++++++++++++++
 src/views/UserPermissions/TemplateLimit.vue | 1021 +++++++++++++++++++++++++++
 src/views/UserPermissions/TokenManage.vue   |  733 +++++++++++++++++++
 4 files changed, 2619 insertions(+), 12 deletions(-)
 create mode 100644 src/views/UserPermissions/MarketTerm.vue
 create mode 100644 src/views/UserPermissions/TemplateLimit.vue
 create mode 100644 src/views/UserPermissions/TokenManage.vue

diff --git a/src/router/index.js b/src/router/index.js
index ae6ff39..8682b32 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,24 +28,50 @@ const routes = [
         name: 'userPermissions',
         meta: { title: '用户权限管理', icon: "UserFilled", showSidebar: true, isParentNav: true },
         children: [
-          {
-            path: 'market',
-            name: 'market',
-            component: () => import('../views/UserPermissions/Market.vue'),
-            meta: { title: '行情期限', showSidebar: true }
-          },
-          {
-            path: 'module',
-            name: 'module',
-            component: () => import('../views/UserPermissions/Module.vue'),
-            meta: { title: '模块期限', showSidebar: true }
-          },
+          // {
+          //   path: 'market',
+          //   name: 'market',
+          //   component: () => import('../views/UserPermissions/Market.vue'),
+          //   meta: { title: '行情期限', showSidebar: true }
+          // },
+          // {
+          //   path: 'module',
+          //   name: 'module',
+          //   component: () => import('../views/UserPermissions/Module.vue'),
+          //   meta: { title: '模块期限', showSidebar: true }
+          // },
           {
             path: 'invitedLook',
             name: 'invitedLook',
             component: () => import('../views/UserPermissions/invitedLook.vue'),
             meta: { title: '查看被邀请用户', showSidebar: true }
           },
+          // 期限管理子菜单
+          {
+            path: 'limitManagement',
+            name: 'limitManagement',
+            meta: { title: '期限管理', showSidebar: true },
+            children: [
+              {
+                path: 'tokenManage',
+                name: 'tokenManage',
+                component: () => import('../views/UserPermissions/TokenManage.vue'),
+                meta: { title: 'Token管理', showSidebar: true }
+              },
+              {
+                path: 'templateLimit',
+                name: 'templateLimit',
+                component: () => import('../views/UserPermissions/TemplateLimit.vue'),
+                meta: { title: '模版期限', showSidebar: true }
+              },
+              {
+                path: 'marketTerm',
+                name: 'marketTerm',
+                component: () => import('../views/UserPermissions/MarketTerm.vue'),
+                meta: { title: '行情期限', showSidebar: true }
+              }
+            ]
+          },
           // 深度探索--操作日志
           {
             path: 'logDeepexplore',
diff --git a/src/views/UserPermissions/MarketTerm.vue b/src/views/UserPermissions/MarketTerm.vue
new file mode 100644
index 0000000..ed555a7
--- /dev/null
+++ b/src/views/UserPermissions/MarketTerm.vue
@@ -0,0 +1,827 @@
+<template>
+  <div class="page-container">
+    <!-- 搜索区域 -->
+    <div class="search-container">
+      <div class="search-form">
+        <div class="search-group">
+          
+          <div class="search-group1">
+            <div class="search-item"> 
+              <span class="form-label">账号</span>
+              <el-input 
+                v-model="searchForm.dccode" 
+                placeholder="请输入账号" 
+                clearable
+                style="height: 36px; width: 140px;"
+              />
+            </div>
+            <div class="search-item">
+              <span class="form-label">姓名</span>
+              <el-input 
+                v-model="searchForm.dcname" 
+                placeholder="请输入姓名" 
+                clearable
+                style="height: 36px; width: 140px;"
+              />
+            </div>
+            <!-- <div class="search-item">
+              <span class="form-label">来源</span>
+              <el-select v-model="searchForm.origin_id" placeholder="请选择来源" clearable filterable style="height: 36px; width: 160px" :loading="isOriginLoading">
+                <el-option v-for="origin in originList" :key="origin.origin_id" :label="origin.origin_name" :value="origin.origin_id" />
+              </el-select>
+            </div> -->
+            <div class="search-item">
+              <span class="form-label">地区</span>
+              <el-select 
+                v-model="searchForm.market" 
+                placeholder="请选择地区" 
+                clearable
+                filterable
+                style="height: 36px; width: 160px;"
+                :loading="isRegionLoading"
+              >
+                <el-option 
+                  v-for="region in regionList" 
+                  :key="region.ID" 
+                  :label="region.Name" 
+                  :value="region.ID" 
+                />
+              </el-select>
+            </div>
+          </div>
+          <div class="search-group2">
+            <!-- <div class="search-item">
+              <span class="form-label">注册方式</span>
+              <el-input 
+                v-model="searchForm.register_type" 
+                placeholder="请输入手机号/邮箱" 
+                clearable
+                style="height: 36px; width: 220px;" 
+              />
+            </div> -->
+            <div class="search-item">
+              <span class="form-label">注册时间</span>
+              <el-date-picker v-model="searchDate" type="datetimerange" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
+            </div>
+          </div> 
+        </div>
+        <div class="button-group">
+          <el-button type="primary" @click="search">搜索</el-button>
+          <el-button type="danger" @click="enableAccess">开通权限</el-button>
+          <el-button type="success" @click="exportExcel">导出Excel列表</el-button>
+          <el-button color="#626aef" @click="exportList">查看导出列表</el-button>
+          <el-button type="primary" @click="resetBn">重置</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 数据 -->
+    <el-table 
+      :data="tableData" 
+      style="width: 100%; margin-top: 20px;"
+      header-cell-class-name="table-header" 
+      @sort-change="handleSortChange"
+      :default-sort="{ prop: null, order: null }"
+      class="table-rounded" 
+      :loading="tableLoading" 
+    >
+      <el-table-column prop="id" label="序号" align="center" header-align="center" width="80">
+        <template #default="scope">
+          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="jwcode" label="账号" align="center" header-align="center" width="120"/>
+      <el-table-column prop="username" label="姓名" align="center" header-align="center" width="150"/>
+      <!-- <el-table-column prop="origin_name" label="来源" align="center" header-align="center" width="200"/> -->
+      <el-table-column prop="country" label="地区" align="center" header-align="center" width="150"/>
+      <!-- <el-table-column prop="dialingCode" label="手机区号" align="center" header-align="center" width="80"/> -->
+      <!-- <el-table-column prop="mobiles" label="手机号" align="center" header-align="center" width="200"/> -->
+      <!-- <el-table-column prop="emails" label="邮箱" align="center" header-align="center" width="200"/> -->
+      <!-- <el-table-column prop="emails" label="邮箱" align="center" header-align="center" width="150">
+        <template #default="scope">
+          <el-tooltip 
+            effect="dark" 
+            :content="scope.row.emails"  
+            placement="top" 
+          >
+            <span class="ellipsis-text">{{ scope.row.emails }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <el-table-column prop="regtime" label="注册时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column prop="expire_time" label="到期时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column label="操作" width="180" align="center" header-align="center" fixed="right">
+        <template #default="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button type="text" @click="handleLog(scope.row.jwcode)">操作日志</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <div class="demo-pagination-block">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total= "datatotal"
+      />
+    </div>
+
+    <el-dialog v-model="dialogVisible" :title="addOrUpdata === 1 ? '添加权限' : '设置'" width="500px" :before-close="cancel">
+      <!-- 设置用户 -->
+      <div class="form-item" v-if="addOrUpdata === 1">
+        <label class="form-label">设置用户</label>
+        <el-input type="textarea" v-model="hlidsInput" rows=10
+          placeholder="请输入HLid...
+示例：
+90048004
+90048005
+90048006"
+        />
+        <div class="tip">支持批量输入，每次最多1000个（手动/Excel粘贴均可）</div>
+      </div>
+
+      <!-- 编辑回显 -->
+      <div class="info-container" v-if="addOrUpdata === 0">
+        <span class="info-item">Homily ID：{{ hlidsInput }}</span>
+        <span class="info-item">当前到期时间：{{ deadline.split(' ')[0] }}</span>
+      </div>
+
+      <!-- 设置权限时间 -->
+      <div class="form-item">
+        <label class="form-label">设置权限时间</label>
+        <el-radio-group v-model="timeType" class="radio-group">
+          <el-radio label="expire" class="radio-item">
+            <span>到期时间</span>
+            <el-date-picker
+              v-model="expireTime"
+              type="date"
+              placeholder="请选择到期日期"
+              :disabled-date="disabledDate" 
+              style="width: 220px; margin-left: 8px;"
+            />
+          </el-radio>
+          <el-radio label="delay" class="radio-item">
+            <span>延期时间</span>
+            <el-input
+              v-model.number="delayValue"
+              type="number"
+              style="width: 60px; margin: 0 8px;"
+              placeholder="1"
+              @input="handleDelayInput" 
+            />
+            <el-select v-model="delayUnit" placeholder="请选择" style="width: 150px;">
+              <el-option label="年" value="year"></el-option>
+              <el-option label="月" value="month"></el-option>
+              <el-option label="周" value="week"></el-option>
+              <el-option label="日" value="day"></el-option>
+            </el-select>
+          </el-radio>
+        </el-radio-group>
+      </div>
+
+      <!-- 备注-->
+      <div class="form-item inline-form-item">
+        <label class="form-label">备注</label>
+        <el-input
+          type="textarea"
+          v-model="remark"
+          rows=3
+          placeholder="请输入备注..."
+          maxlength="150"
+          show-word-limit
+        />
+      </div>
+
+      <!-- 操作人 -->
+      <div class="form-item inline-form-item">
+        <label class="form-label">操作人</label>
+        <el-input v-model="operator" placeholder="请填写操作人"/>
+      </div>
+
+      <!-- 按钮区域 -->
+      <div class="dialog-footer">
+        <el-button type="default" plain @click="cancel">取消</el-button>
+        <el-button type="primary" @click="submitForm" style="background-color: #ff0000; border-color: #ff0000;">提交</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { marketListApi, userMListApi, exportMarketApi, exitMApi } from '../../api/userPermissions'
+import router from '../../router';
+
+// token
+const token = localStorage.getItem('token')
+
+// 搜索表单
+const searchForm = reactive({
+  dccode: '',
+  dcname: '',
+  origin_id: "",
+  market: '',
+  register_type: ''
+});
+const searchDate = ref([]);
+
+
+// 排序参数
+const sortProp = ref(null);
+const sortOrder = ref(null);
+
+// 表格数据
+const tableData = ref([]);
+const tableLoading = ref(false);
+const datatotal = ref(0)
+
+// 分页参数
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 地区下拉框
+const regionList = ref([]);
+const isRegionLoading = ref(false);
+
+
+// 来源下拉框
+const originList = ref([]);
+const isOriginLoading = ref(false);
+
+// 弹框显隐控制
+const dialogVisible = ref(false);
+
+// 开通权限表单
+const hlidsInput = ref(''); 
+const timeType = ref(''); 
+const expireTime = ref(''); 
+const delayValue = ref(''); 
+const delayUnit = ref('');
+const remark = ref(''); 
+const operator = ref(''); 
+
+// 判断开通还是编辑
+const addOrUpdata = ref(0);
+
+// 编辑回显内容
+const deadline = ref('');
+
+// 禁用当前日期之前的日期（当天0点之前的时间）
+const disabledDate = (time) => {
+  return time.getTime() < new Date().getTime() - 8.64e7;
+};
+
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return '';
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}/${month}/${day}`;
+};
+
+// 校验HLid
+const checkHlids = () => {
+  // 非空
+  if (!hlidsInput.value.trim()) {
+    ElMessage.error('请输入HLid');
+    return false;
+  }
+  // 处理输入：去空、去重，转数组
+  const hlidList = hlidsInput.value.split('\n')
+    .map(item => item.trim())
+    .filter(item => item)
+    .filter((item, index, self) => self.indexOf(item) === index); // 去重
+  // 数量校验（最多1000个）
+  if (hlidList.length > 1000) {
+    ElMessage.error('HLid数量不能超过1000个');
+    return false;
+  }
+  // 格式校验（8位数字）
+  const hlidReg = /^\d{8}$/;
+  for (const hlid of hlidList) {
+    if (!hlidReg.test(hlid)) {
+      ElMessage.error(`有HLid格式错误：${hlid}，请重新输入`);
+      return false;
+    }
+  }
+  return true;
+};
+
+// 校验时间
+const checkTime = () => {
+  if (timeType.value === 'expire') {
+    // 到期时间
+    if (!expireTime.value) {
+      ElMessage.error('请选择到期时间');
+      return false;
+    }
+  } else if (timeType.value === 'delay') {
+    // 延期时间
+    if (!delayValue.value || !delayUnit.value) {
+      ElMessage.error('延期时间必须填写完整（数值+单位）');
+      return false;
+    }
+    const delayNum = Number(delayValue.value);
+    if (isNaN(delayNum) || delayNum < 0) {
+      ElMessage.error('延期时间不能为负数，请输入有效正数');
+      return false;
+    }
+    if (delayNum === 0) {
+      ElMessage.error('延期时间不能为0，请输入有效正数');
+      return false;
+    }
+  } else {
+    ElMessage.error('请设置权限时间');
+    return false;
+  }
+  return true;
+};
+
+// 禁止为小数
+const handleDelayInput = () => {
+  if (delayValue.value !== null && delayValue.value !== undefined) {
+    delayValue.value = Math.floor(delayValue.value);
+  }
+};
+
+// 校验备注
+const checkRemark = () => {
+  if (!remark.value.trim()) {
+    ElMessage.error('请输入备注');
+    return false;
+  }
+  return true;
+};
+
+// 防抖
+const Noshake = ref(false)
+
+// 提交表单
+const submitForm = async () => {
+  // 防抖
+  if (Noshake.value) return;
+  Noshake.value = true;
+
+  // 表单校验
+  if (!checkHlids() || !checkTime() || !checkRemark()) {
+    Noshake.value = false;
+    return;
+  }
+
+  try {
+    // 组装后端要求的参数格式
+    const requestParams = {
+      token: token,
+      // HLid
+      hlids: hlidsInput.value.split('\n')
+        .map(item => item.trim())
+        .filter(item => item)
+        .join('\n'),
+      // 备注
+      remark: remark.value.trim(),
+      // 操作人
+      ...(operator.value.trim() && { operator: operator.value.trim() }),
+      // 时间参数
+      ...(timeType.value === 'expire' 
+        ? { expire_time: formatDate(expireTime.value) }
+        : { 
+            [delayUnit.value]: Number(delayValue.value) 
+          })
+    };
+
+    console.log('传给后端的参数：', requestParams); 
+
+    // 调用后端接口
+    const res = await exitMApi(requestParams);
+    ElMessage.success('成功添加用户权限');
+
+    // 重置表单并关闭弹框
+    resetForm();
+    dialogVisible.value = false;
+    addOrUpdata.value = 0;
+
+    // 重新获取表格
+    fetchTableData();
+  } catch (error) {
+    ElMessage.error('添加权限失败，请重试');
+  } finally {
+    Noshake.value = false;
+  }
+};
+
+// 取消表单
+const cancel = () => {
+  resetForm();
+  dialogVisible.value = false;
+  addOrUpdata.value = 0;
+};
+
+// 重置表单数据
+const resetForm = () => {
+  hlidsInput.value = '';
+  timeType.value = '';
+  expireTime.value = '';
+  delayValue.value = '';
+  delayUnit.value = '';
+  remark.value = '';
+  operator.value = '';
+};
+
+// 获取地区列表
+const fetchRegionList = async () => {
+  try {
+    isRegionLoading.value = true;
+    const data = await marketListApi({
+      token: token,
+      app_form: "en"
+    });
+    regionList.value = data.list;
+  } catch (error) {
+    console.error('获取地区列表失败：', error);
+    regionList.value = [];
+  } finally {
+    isRegionLoading.value = false;
+  }
+};
+
+// 获取表格数据
+const fetchTableData = async () => {
+  try {
+    tableLoading.value = true;
+    const requestParams = {
+      token: token,
+      dccode: searchForm.dccode,
+      dcname: searchForm.dcname,
+      origin_id: searchForm.origin_id,
+      market: searchForm.market,
+      register_type: searchForm.register_type,
+      start_time: searchDate.value && searchDate.value[0] ? searchDate.value[0] : "",
+      end_time: searchDate.value && searchDate.value[1] ? searchDate.value[1] : "",
+      sort_field: sortProp.value,
+      sort_order: sortOrder.value,
+      page: currentPage.value,
+      page_size: pageSize.value     
+    };
+    const data = await userMListApi(requestParams);
+    tableData.value = data.list
+    datatotal.value = data.total
+  } catch (error) {
+    console.error('获取表格数据失败：', error);
+    tableData.value = [];
+    datatotal.value = 0
+  } finally {
+    tableLoading.value = false;
+  }
+};
+
+// 组件挂载时：获取地区列表 + 初始化表格数据
+onMounted(() => {
+  fetchRegionList();
+  fetchTableData();
+});
+
+// 搜索按钮
+const search = () => {
+  currentPage.value = 1; 
+  fetchTableData();
+};
+
+// 开通权限按钮
+const enableAccess = () => {
+  dialogVisible.value = true;
+  addOrUpdata.value = 1;
+};
+
+// 导出Excel列表按钮
+const exportExcel = async () => {
+  const requestParams = {
+    token: token,
+    dccode: searchForm.dccode,
+    dcname: searchForm.dcname,
+    origin_id: searchForm.origin_id,
+    market: searchForm.market,
+    register_type: searchForm.register_type,
+    start_time: searchDate.value && searchDate.value[0] ? searchDate.value[0] : "",
+    end_time: searchDate.value && searchDate.value[1] ? searchDate.value[1] : "",
+    sort_field: sortProp.value,
+    sort_order: sortOrder.value
+  };
+  const data = await exportMarketApi(requestParams); 
+  if (data != '') {
+    ElMessage.success('已导出'); 
+  } 
+};
+
+// 查看导出列表按钮
+const exportList = () => {
+  router.push({
+    path: "/userPermissions/export"
+  });
+};
+
+// 重置按钮
+const resetBn = () => {
+  searchForm.dccode = '';
+  searchForm.dcname = '';
+  searchForm.origin_id = '';
+  searchForm.market = '';
+  searchForm.register_type = '';
+  searchDate.value = [];
+  sortProp.value = null;
+  sortOrder.value = null;
+  currentPage.value = 1; 
+  pageSize.value = 10; 
+  fetchTableData();
+};
+
+// 编辑
+const handleEdit = (row) => {
+  dialogVisible.value = true;
+  hlidsInput.value = row.jwcode;
+  deadline.value = row.expire_time;
+};
+
+// 操作日志
+const handleLog = (jwcode) => {
+  router.push({
+    path: "/userPermissions/logMarket",
+    query: { dccode: jwcode }
+  });
+};
+
+// 分页方法
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+  fetchTableData();
+  console.log(`每页 ${val} 条`);
+};
+
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+  fetchTableData();
+  console.log(`当前页: ${val}`);
+};
+
+// 排序事件
+const handleSortChange = (sort) => {
+  const { prop, order } = sort;
+
+  // 仅允许注册时间和到期时间排序
+  if (!['regtime', 'expire_time'].includes(prop)) return;
+
+  // 覆盖排序状态（实现二选一）
+  sortProp.value = prop; // 保存当前排序字段
+  sortOrder.value = order; // 保存当前排序方式
+  
+  fetchTableData(); 
+  // console.log(`排序字段：${sortProp.value}，排序方式：${sortOrder.value}`);
+};
+
+// 时间快捷选项
+const shortcuts = [
+  {
+    text: '最近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '最近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+      return [start, end]
+    },
+  },
+  {
+    text: '最近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+      return [start, end]
+    },
+  },
+]
+</script>
+
+<style scoped>
+/* 父容器 */
+.page-container {
+  position: relative;
+  min-height: 600px; 
+}
+
+/* 搜索区域 */
+.search-container {
+  display: flex;
+  height: auto;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #FEFAF9;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); 
+  padding: 15px;
+  margin-bottom: 20px; 
+}
+
+/* 搜索表单 */
+.search-form {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 15px;
+  flex-wrap: wrap;
+  row-gap: 8px;
+}
+
+/* 搜索组 */
+.search-group {
+}
+
+.search-group1{
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.search-group2{
+  display: flex;
+  margin-top: 15px;
+  align-items: center;
+  gap: 15px;
+}
+
+
+
+/* 单个搜索项 */
+.search-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 搜索标签文字 */
+.form-label {
+  font-weight: 800 !important;
+  font-size: 15px;
+  text-align: left;
+  color: #333;
+  margin-top: 13px;
+  font-family: "SimHei", "Heiti SC", "Microsoft YaHei", sans-serif !important;
+}
+
+/* 按钮组 */
+.button-group {
+  display: flex;
+  align-items: center;
+  gap: 0px !important;
+  margin-left: auto;
+}
+
+/* 按钮样式 */
+.button-group .el-button {
+  padding: 6px 10px !important;
+  font-size: 14px !important;
+  height: 36px !important;
+}
+
+/* 表格样式 */
+.table-rounded {
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border: 1px solid #e4e7ed !important;
+  height: 700px;
+}
+
+.table-header {
+  text-align: center !important;
+  font-weight: 800 !important;
+  font-size: 15px !important;
+  color: #333 !important;
+  background-color: #f8f9fa !important;
+}
+
+.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__header th.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__row:hover .el-table__cell {
+  background-color: #fafafa !important;
+}
+
+.ellipsis-text {
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+/* 分页组件样式 */
+.demo-pagination-block {
+  display: flex;
+  width: 100%;
+  height: 44px;
+  padding: 0 16px;
+  align-items: center;
+  gap: 16px;
+  position: absolute;
+  margin-top: 10px;
+  border-radius: 0 0 3px 3px;
+  border-top: 1px solid #EAEAEA;
+  background: #FEFBFB;
+  box-sizing: border-box;
+}
+
+/* 添加/修改样式 */
+.form-item {
+  margin-bottom: 24px;
+  padding-left: 20px;
+  padding-right: 20px;
+  text-align: left;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.radio-item {
+  display: flex;
+  align-items: center;
+}
+
+.radio-item span {
+  margin-right: 8px;
+}
+
+.tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.inline-form-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.inline-form-item .form-label {
+  display: inline-block;
+  margin-bottom: 0;
+  width: 60px; 
+  text-align: left; 
+  padding-right: 12px;
+}
+
+.info-container {
+  display: flex;
+  align-items: center;
+  gap: 40px; 
+  padding: 0 20px 18px; 
+  color: #333; 
+  font-size: 16px; 
+}
+
+.info-item {
+  white-space: nowrap; 
+}
+</style>
diff --git a/src/views/UserPermissions/TemplateLimit.vue b/src/views/UserPermissions/TemplateLimit.vue
new file mode 100644
index 0000000..32231c6
--- /dev/null
+++ b/src/views/UserPermissions/TemplateLimit.vue
@@ -0,0 +1,1021 @@
+<template>
+  <div class="page-container">
+    <!-- 搜索区域 -->
+    <div class="search-containerDE" @keyup.enter="searchDE">
+      <!-- 输入项区域 -->
+      <div class="search-formDE">
+        <div class="search-groupDE">
+          <div class="search-groupDE1">
+            <div class="search-itemDE">
+              <span class="form-labelDE">账号</span>
+              <el-input 
+                v-model="searchFormDE.dccode" 
+                placeholder="请输入账号" 
+                clearable
+                style="height: 36px; width: 140px;"
+              />
+            </div>
+            <div class="search-itemDE">
+              <span class="form-labelDE">姓名</span>
+              <el-input 
+                v-model="searchFormDE.dcname" 
+                placeholder="请输入姓名" 
+                clearable
+                style="height: 36px; width: 180px;"
+              />
+            </div>
+            <div class="search-itemDE">
+              <span class="form-labelDE">归属</span>
+              <el-input 
+                v-model="searchFormDE.inviter" 
+                placeholder="请输入归属账号" 
+                clearable
+                style="height: 36px; width: 180px;"
+              />
+            </div>
+          </div>
+          <div class="search-groupDE2">
+            <div class="search-itemDE">
+              <span class="form-labelDE">客户类型</span> 
+              <el-select 
+                v-model="searchFormDE.user_role" 
+                placeholder="请选择客户类型" 
+                clearable
+                style="height: 36px; width: 160px;"
+              >
+                <el-option label="非网" value="2" />
+                <el-option label="会员" value="1" />
+              </el-select>
+            </div>
+            <div class="search-itemDE">
+              <span class="form-labelDE">地区</span>
+              <el-select 
+                v-model="searchFormDE.market" 
+                placeholder="请选择地区" 
+                clearable
+                filterable
+                style="height: 36px; width: 160px;"
+                :loading="isRegionLoading"
+              >
+                <el-option 
+                  v-for="region in regionList" 
+                  :key="region.ID" 
+                  :label="region.Name" 
+                  :value="region.ID" 
+                />
+              </el-select>
+            </div>
+            <div class="search-itemDE">
+              <span class="form-labelDE">指标名称</span>
+              <el-select 
+                v-model="searchFormDE.indicator_id"
+                placeholder="请选择指标名称" 
+                clearable  
+                style="height: 36px; width: 160px;" 
+              >
+                <el-option 
+                  v-for="item in indicatorOptions" 
+                  :key="item.id" 
+                  :label="item.name" 
+                  :value="item.id" 
+                />
+              </el-select>
+            </div>
+          </div>
+        </div>
+      
+        <!-- 按钮组 -->
+        <div class="button-groupDE">
+          <el-button type="primary" @click="searchDE">搜索</el-button>
+          <el-button type="danger" @click="enableAccessDE">开通权限</el-button>
+          <el-button type="success" @click="exportExcelDE">导出Excel列表</el-button>
+          <el-button color="#626aef" @click="exportListDE">查看导出列表</el-button>
+          <el-button type="primary" @click="resetBnDE">重置</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 数据 -->
+    <el-table 
+      :data="tableDataDE" 
+      style="width: 100%; margin-top: 20px;"
+      header-cell-class-name="table-header" 
+      @sort-change="handleSortChangeDE"
+      :default-sort="{ prop: null, order: null }"
+      class="table-roundedDE" 
+      :loading="tableLoadingDE" 
+    >
+      <el-table-column prop="id" label="序号" align="center" header-align="center" width="80">
+        <template #default="scope">
+          {{ (currentPageDE - 1) * pageSizeDE + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="dccode" label="账号" align="center" header-align="center"/>
+      <el-table-column prop="dcname" label="姓名" align="center" header-align="center"/>
+      <el-table-column prop="inviter" label="归属" align="center" header-align="center"/>
+      <el-table-column prop="name" label="指标名称" align="center" header-align="center" width="200">
+        <template #default="scope">
+          <el-tooltip 
+            effect="dark" 
+            :content="scope.row.name"  
+            placement="top" 
+          >
+            <span class="ellipsis-text">{{ scope.row.name }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column prop="created_at" label="开通时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column prop="expire_time" label="到期时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column label="操作" align="center" header-align="center" width="200">
+        <template #default="scope">
+          <el-button type="text" @click="handleEditDE(scope.row)">编辑</el-button>
+          <el-button type="text" @click="handleDetailsDE(scope.row.dccode)">权限详情</el-button>
+          <el-button type="text" @click="handleLogDE(scope.row.dccode)">操作日志</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <div class="demo-pagination-block">
+      <el-pagination
+        @size-change="handleSizeChangeDE"
+        @current-change="handleCurrentChangeDE"
+        :current-page="currentPageDE"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSizeDE"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total= "datatotalDE"
+      />
+    </div>
+
+    <!-- 开通/编辑 -->
+    <el-dialog v-model="dialogVisibleDE" :title="addOrUpdataDE === 1 ? '添加权限' : '设置'" width="550px" :before-close="cancelDE">
+      <!-- 设置用户 -->
+      <div class="form-item" v-if="addOrUpdataDE === 1">
+        <label class="form-label">设置用户</label>
+        <el-input type="textarea" v-model="hlidsInputDE" rows=10
+          placeholder="请输入HLid...
+示例：
+90048004
+90048005
+90048006"
+        />
+        <div class="tip">支持批量输入，每次最多1000个（手动/Excel粘贴均可）</div>
+      </div>
+
+      <!-- 编辑回显 -->
+      <div class="info-container" v-if="addOrUpdataDE === 0">
+        <span class="info-item">Homily ID：{{ hlidsInputDE }}</span>
+        <span class="info-item">当前到期时间：{{ deadline.split(' ')[0] }}</span>
+      </div>
+
+      <!-- 设置指标 -->
+      <div class="form-item">
+        <label class="form-label">选择模板</label>
+        <el-checkbox-group v-model="indicator_id" class="indicator-checkbox-group">
+          <el-checkbox 
+            v-for="item in indicatorOptions" 
+            :key="item.id" 
+            :label="item.id" 
+            class="indicator-checkbox-item"
+          >
+            {{ item.name }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+
+      <!-- 设置权限时间 -->
+      <div class="form-item">
+        <label class="form-label">设置权限时间</label>
+        <el-radio-group v-model="timeType" class="radio-group">
+          <el-radio label="expire" class="radio-item">
+            <span>到期时间</span>
+            <el-date-picker
+              v-model="expireTime"
+              type="date"
+              placeholder="请选择到期日期"
+              :disabled-date="disabledDate" 
+              style="width: 220px; margin-left: 8px;"
+            />
+          </el-radio>
+          <el-radio label="delay" class="radio-item">
+            <span>延期时间</span>
+            <el-input
+              v-model.number="delayValue"
+              type="number"
+              style="width: 60px; margin: 0 8px;"
+              placeholder="1"
+              @input="handleDelayInput" 
+            />
+            <el-select v-model="delayUnit" placeholder="请选择" style="width: 150px;">
+              <el-option label="年" value="year"></el-option>
+              <el-option label="月" value="month"></el-option>
+              <el-option label="周" value="week"></el-option>
+              <el-option label="日" value="day"></el-option>
+            </el-select>
+          </el-radio>
+        </el-radio-group>
+      </div>
+
+      <!-- 备注-->
+      <div class="form-item inline-form-item">
+        <label class="form-label">备注</label>
+        <el-input
+          type="textarea"
+          v-model="remark"
+          rows=3
+          placeholder="请输入备注..."
+          maxlength="150"
+          show-word-limit
+        />
+      </div>
+
+      <!-- 操作人 -->
+      <div class="form-item inline-form-item">
+        <label class="form-label">操作人</label>
+        <el-input v-model="operator" placeholder="请填写操作人"/>
+      </div>
+
+      <!-- 按钮区域 -->
+      <div class="dialog-footer">
+        <el-button type="default" plain @click="cancelDE">取消</el-button>
+        <el-button type="primary" @click="submitFormDE" style="background-color: #ff0000; border-color: #ff0000;">提交</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 权限详情 -->
+    <el-dialog 
+      v-model="showPermissionDetail" 
+      title="权限详情" 
+      width="400px" 
+      :close-on-click-modal="false" 
+      :show-close="true" 
+      class="permission-detail-dialog"
+    >
+      <div class="detail-container">
+        <!-- HLid 信息 -->
+        <div class="hlid-item">
+          <span class="label">Homily ID：</span>
+          <span class="value">{{ HLid }}</span>
+        </div>
+
+        <!-- 到期时间区域 -->
+        <div class="expire-section">
+          <h3 class="section-title">到期时间</h3>
+          <div class="indicator-list">
+            <div 
+              v-for="(item, index) in permissionData" 
+              :key="index" 
+              class="indicator-item"
+            >
+              <span class="indicator-name">{{ item.name }}：</span>
+              <template v-if="item.is_expired === 1">
+                <span class="expired-tag">已到期</span>
+              </template>
+              <template v-else>
+                <span class="expire-time">{{ item.expire_time.split(' ')[0] }}</span>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { marketListApi, indicatorListApi, userDEListApi, exportDeepExploreApi, exitDEApi, detailDEApi } from '../../api/userPermissions'
+import router from '../../router';
+
+// token
+const token = localStorage.getItem('token')
+
+// 地区下拉框
+const regionList = ref([]);
+const isRegionLoading = ref(false);
+
+// 获取地区列表
+const fetchRegionList = async () => {
+  try {
+    isRegionLoading.value = true;
+    const data = await marketListApi({
+      token: token,
+      app_form: "en"
+    });
+    regionList.value = data.list;
+  } catch (error) {
+    console.error('获取地区列表失败：', error);
+    regionList.value = [];
+  } finally {
+    isRegionLoading.value = false;
+  }
+};
+
+// 深度探索指标选项
+const indicatorOptions = ref([]);
+
+const indicatorList = async () => {
+  try {
+    const data = await indicatorListApi({token: token});
+    indicatorOptions.value = data.list;
+  } catch (error) {
+    console.error('获取指标列表失败：', error);
+    indicatorOptions.value = [];
+  } 
+}
+
+// 深度探索搜索表单
+const searchFormDE = reactive({
+  dccode: '',
+  dcname: '',
+  is_login:'',
+  inviter: '',
+  market: '',
+  user_role: '',
+  indicator_id: ''
+});
+
+// 深度探索排序参数
+const sortPropDE = ref(null);
+const sortOrderDE = ref(null);
+
+// 深度探索分页参数
+const currentPageDE = ref(1);
+const pageSizeDE = ref(10);
+
+// 深度探索表格数据
+const tableDataDE = ref([]);
+const tableLoadingDE = ref(false);
+const datatotalDE = ref(0)
+
+// 深度探索分页方法
+const handleSizeChangeDE = (val) => {
+  pageSizeDE.value = val;
+  DETableData();
+  console.log(`每页 ${val} 条`);
+};
+
+const handleCurrentChangeDE = (val) => {
+  currentPageDE.value = val;
+  DETableData();
+  console.log(`当前页: ${val}`);
+};
+
+// 深度探索排序事件
+const handleSortChangeDE = (sort) => {
+  const { prop, order } = sort;
+  if (!['created_at', 'expire_time'].includes(prop)) return;
+
+  sortPropDE.value = prop; // 保存当前排序字段
+  sortOrderDE.value = order; // 保存当前排序方式
+  
+  DETableData();
+};
+
+// 深度探索获取表格数据
+const DETableData = async () => {
+  try {
+    tableLoadingDE.value = true;
+    const requestParams = {
+      token: token,
+      dccode: searchFormDE.dccode,
+      dcname: searchFormDE.dcname,
+      is_login: searchFormDE.is_login,
+      inviter: searchFormDE.inviter,
+      market: searchFormDE.market,
+      user_role: searchFormDE.user_role,
+      indicator_id: searchFormDE.indicator_id,
+      sort_field: sortPropDE.value,
+      sort_order: sortOrderDE.value,
+      page: currentPageDE.value,
+      page_size: pageSizeDE.value     
+    };
+    const data = await userDEListApi(requestParams);
+    tableDataDE.value = data.list
+    datatotalDE.value = data.total
+  } catch (error) {
+    console.error('获取表格数据失败：', error);
+    tableDataDE.value = [];
+    datatotalDE.value = 0
+  } finally {
+    tableLoadingDE.value = false;
+  }
+};
+
+// 深度探索搜索按钮
+const searchDE = () => {
+  currentPageDE.value = 1; 
+  DETableData();
+};
+
+// 深度探索重置按钮
+const resetBnDE = () => {
+  searchFormDE.dccode = '';
+  searchFormDE.dcname = '';
+  searchFormDE.is_login = '';
+  searchFormDE.inviter = '';
+  searchFormDE.market = '';
+  searchFormDE.user_role = '';
+  searchFormDE.indicator_id = '';
+  sortPropDE.value = null;
+  sortOrderDE.value = null;
+  currentPageDE.value = 1; 
+  pageSizeDE.value = 10; 
+  DETableData();
+};
+
+// 深度探索导出Excel列表按钮
+const exportExcelDE = async () => {
+  const requestParams = {
+    token: token,
+    dccode: searchFormDE.dccode,
+    dcname: searchFormDE.dcname,
+    is_login: searchFormDE.is_login,
+    inviter: searchFormDE.inviter,
+    market: searchFormDE.market,
+    user_role: searchFormDE.user_role,
+    indicator_id: searchFormDE.indicator_id,
+    sort_field: sortPropDE.value,
+    sort_order: sortOrderDE.value
+  };
+  const data = await exportDeepExploreApi(requestParams); 
+  if (data != '') {
+    ElMessage.success('已导出'); 
+  } 
+};
+
+// 深度探索查看导出列表按钮
+const exportListDE = () => {
+  router.push({
+    path: "/userPermissions/export"
+  });
+};
+
+// 深度探索开通权限按钮
+const enableAccessDE = () => {
+  dialogVisibleDE.value = true;
+  addOrUpdataDE.value = 1;
+};
+
+// 深度探索编辑按钮
+const handleEditDE = (row) => {
+  dialogVisibleDE.value = true;
+  hlidsInputDE.value = row.dccode;
+  deadline.value = row.expire_time;
+  indicator_id.value = row.indicator_id.split("。").filter(Boolean).map(Number);
+};
+
+// 深度探索权限详情按钮
+const handleDetailsDE = (dccode) =>{
+  openDetail(dccode)
+}
+
+// 深度探索操作日志按钮
+const handleLogDE = (dccode) => {
+  router.push({
+    path: "/userPermissions/logDeepExplore",
+    query: { dccode: dccode }
+  });
+};
+
+// 弹框显隐控制
+const dialogVisibleDE = ref(false);
+
+// 开通权限表单
+const hlidsInputDE = ref(''); 
+const indicator_id = ref([]);
+const timeType = ref(''); 
+const expireTime = ref(''); 
+const delayValue = ref(''); 
+const delayUnit = ref('');
+const remark = ref(''); 
+const operator = ref(''); 
+
+// 判断开通还是编辑
+const addOrUpdataDE = ref(0);
+
+// 编辑回显内容
+const deadline = ref('');
+
+// 将数组转为顿号拼接的字符串
+const indicatorStr = computed(() => {
+  return indicator_id.value?.join('。') || '';
+});
+
+// 禁用当前日期之前的日期（当天0点之前的时间）
+const disabledDate = (time) => {
+  return time.getTime() < new Date().getTime() - 8.64e7;
+};
+
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return '';
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}/${month}/${day}`;
+};
+
+// 禁止为小数
+const handleDelayInput = () => {
+  if (delayValue.value !== null && delayValue.value !== undefined) {
+    delayValue.value = Math.floor(delayValue.value);
+  }
+};
+
+// 校验HLid
+const checkHlidsDE = () => {
+  // 非空
+  if (!hlidsInputDE.value.trim()) {
+    ElMessage.error('请输入HLid');
+    return false;
+  }
+  // 处理输入：去空、去重，转数组
+  const hlidList = hlidsInputDE.value.split('\n')
+    .map(item => item.trim())
+    .filter(item => item)
+    .filter((item, index, self) => self.indexOf(item) === index); // 去重
+  // 数量校验（最多1000个）
+  if (hlidList.length > 1000) {
+    ElMessage.error('HLid数量不能超过1000个');
+    return false;
+  }
+  // 格式校验（8位数字）
+  const hlidReg = /^\d{8}$/;
+  for (const hlid of hlidList) {
+    if (!hlidReg.test(hlid)) {
+      ElMessage.error(`有HLid格式错误：${hlid}，请重新输入`);
+      return false;
+    }
+  }
+  return true;
+};
+
+// 校验指标
+const checkmodel = () => {
+  if (indicator_id.value.length === 0) {
+    ElMessage.error('请至少选择一个指标');
+    return false;
+  }
+  return true;
+};
+
+// 校验时间
+const checkTime = () => {
+  if (timeType.value === 'expire') {
+    // 到期时间
+    if (!expireTime.value) {
+      ElMessage.error('请选择到期时间');
+      return false;
+    }
+  } else if (timeType.value === 'delay') {
+    // 延期时间
+    if (!delayValue.value || !delayUnit.value) {
+      ElMessage.error('延期时间必须填写完整(数值+单位)');
+      return false;
+    }
+    const delayNum = Number(delayValue.value);
+    if (isNaN(delayNum) || delayNum < 0) {
+      ElMessage.error('延期时间不能为负数，请输入有效正数');
+      return false;
+    }
+    if (delayNum === 0) {
+      ElMessage.error('延期时间不能为0，请输入有效正数');
+      return false;
+    }
+  } else {
+    ElMessage.error('请设置权限时间');
+    return false;
+  }
+  return true;
+};
+
+// 校验备注
+const checkRemark = () => {
+  if (!remark.value.trim()) {
+    ElMessage.error('请输入备注');
+    return false;
+  }
+  return true;
+};
+
+// 防抖
+const NoshakeDE = ref(false)
+
+// 提交表单
+const submitFormDE = async () => {
+  // 防抖
+  if (NoshakeDE.value) return;
+  NoshakeDE.value = true;
+
+  // 表单校验
+  if (!checkHlidsDE() || !checkmodel() || !checkTime() || !checkRemark()) {
+    NoshakeDE.value = false;
+    return;
+  }
+
+  try {
+    // 组装后端要求的参数格式
+    const requestParams = {
+      token: token,
+      // HLid
+      hlids: hlidsInputDE.value.split('\n')
+        .map(item => item.trim())
+        .filter(item => item)
+        .join('\n'),
+      // 指标
+      indicator_id: indicatorStr.value,
+      // 备注
+      remark: remark.value.trim(),
+      // 操作人
+      ...(operator.value.trim() && { operator: operator.value.trim() }),
+      // 时间参数
+      ...(timeType.value === 'expire' 
+        ? { expire_time: formatDate(expireTime.value) }
+        : { 
+            [delayUnit.value]: Number(delayValue.value) 
+          })
+    };
+    console.log('传给后端的参数：', requestParams); 
+
+    // 调用后端接口
+    await exitDEApi(requestParams);
+    ElMessage.success(addOrUpdataDE.value === 1 ? '成功添加用户权限' : '成功修改用户权限');
+
+    // 重置表单并关闭弹框
+    resetForm();
+    dialogVisibleDE.value = false;
+    addOrUpdataDE.value = 0;
+
+    // 重新获取表格
+    DETableData();
+  } catch (error) {
+    ElMessage.error('添加权限失败，请重试');
+  } finally {
+    NoshakeDE.value = false;
+  }
+};
+
+// 深度探索重置表单数据
+const resetForm = () => {
+  hlidsInputDE.value = '';
+  indicator_id.value = [];
+  timeType.value = '';
+  expireTime.value = '';
+  delayValue.value = '';
+  delayUnit.value = '';
+  remark.value = '';
+  operator.value = '';
+};
+
+// 深度探索取消表单
+const cancelDE = () => {
+  resetForm();
+  dialogVisibleDE.value = false;
+  addOrUpdataDE.value = 0;
+};
+
+// 深度探索权限详情弹窗开关
+const showPermissionDetail = ref(false);
+
+// 深度探索权限详情弹窗数据
+const HLid = ref('');
+const permissionData = ref([]);
+
+// 深度探索权限详情获取数据并开启弹窗
+const openDetail = async(dccode) => {
+  HLid.value = dccode
+
+  // 后端调用
+  const res = await detailDEApi({
+    token: token,
+    dccode: dccode
+  })
+  permissionData.value = res
+
+  // 显示弹窗
+  showPermissionDetail.value = true;
+};
+
+// 组件挂载时：获取地区列表 + 初始化表格数据
+onMounted(() => {
+  fetchRegionList();
+  indicatorList();
+  DETableData();
+});
+</script>
+
+<style scoped>
+/* 父容器 */
+.page-container {
+  position: relative;
+  min-height: 600px; 
+}
+
+/* 搜索区域（深度探索） */
+.search-containerDE {
+  display: flex;
+  height: auto; 
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start; 
+  gap: 12px; 
+  align-self: stretch;
+  border-radius: 8px;
+  background: #FEFAF9;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); 
+  padding: 15px; 
+  margin-bottom: 20px; 
+}
+
+/* 搜索表单（深度探索） */
+.search-formDE {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 15px; 
+  flex-wrap: wrap; 
+  row-gap: 8px; 
+}
+
+/* 搜索组 */
+.search-groupDE {
+}
+
+.search-groupDE1{
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+.search-groupDE2{
+  display: flex;
+  margin-top: 15px;
+  align-items: center;
+  gap: 15px;
+}
+
+/* 单个搜索项（深度探索） */
+.search-itemDE {
+  display: flex;
+  align-items: center;
+  gap: 6px; 
+}
+
+/* 搜索标签文字（深度探索） */
+.form-labelDE {
+  font-weight: 800 !important;
+  font-size: 15px;
+  text-align: left;
+  color: #333;
+  margin-top: 13px;
+  font-family: "SimHei", "Heiti SC", "Microsoft YaHei", sans-serif !important; 
+}
+
+/* 按钮组（深度探索） */
+.button-groupDE {
+  display: flex;
+  align-items: center;
+  gap: 0px !important;
+  margin-left: auto;
+}
+
+/* 按钮样式（深度探索） */
+.button-groupDE .el-button {
+  padding: 6px 10px !important;
+  font-size: 14px !important;
+  height: 36px !important;
+}
+
+/* 表格样式 */
+.table-roundedDE {
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border: 1px solid #e4e7ed !important;
+  height: 650px;
+}
+
+.table-header {
+  text-align: center !important;
+  font-weight: 800 !important;
+  font-size: 15px !important;
+  color: #333 !important;
+  background-color: #f8f9fa !important;
+}
+
+.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__header th.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__row:hover .el-table__cell {
+  background-color: #fafafa !important;
+}
+
+/* 分页组件样式 */
+.demo-pagination-block {
+  display: flex;
+  width: 100%;
+  height: 44px;
+  padding: 0 16px;
+  align-items: center;
+  gap: 16px;
+  position: absolute;
+  margin-top: 10px;
+  border-radius: 0 0 3px 3px;
+  border-top: 1px solid #EAEAEA;
+  background: #FEFBFB;
+  box-sizing: border-box;
+}
+
+/* 添加/修改样式 */
+.form-item {
+  margin-bottom: 24px;
+  padding-left: 20px;
+  padding-right: 20px;
+  text-align: left;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.radio-item {
+  display: flex;
+  align-items: center;
+}
+
+.radio-item span {
+  margin-right: 8px;
+}
+
+.tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.inline-form-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.inline-form-item .form-label {
+  display: inline-block;
+  margin-bottom: 0;
+  width: 60px; 
+  text-align: left; 
+  padding-right: 12px;
+}
+
+.info-container {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 0 20px 18px;
+  color: #333;
+  font-size: 14px;
+  flex-wrap: wrap;
+}
+
+.info-item {
+  white-space: nowrap;
+}
+
+/* 文本溢出省略样式（深度探索） */
+.ellipsis-text {
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap; 
+  overflow: hidden; 
+  text-overflow: ellipsis; 
+  vertical-align: middle;
+}
+
+/* 开通/编辑指标复选（深度探索） */
+.indicator-checkbox-group {
+  display: flex;
+  flex-wrap: wrap; 
+  gap: 8px; 
+  margin-top: 8px;
+  width: 100% 
+}
+
+.indicator-checkbox-item {
+  flex: 0 0 calc(20% - 5px);
+  box-sizing: border-box;
+  padding: 4px 0;
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background-color: #ff0000 !important;
+  border-color: #ff0000 !important; 
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
+  border-color: #fff !important;
+}
+
+:deep(.el-checkbox__input:hover .el-checkbox__inner) {
+  border-color: #ff0000 !important;
+}
+
+:deep(.el-checkbox__input:focus .el-checkbox__inner) {
+  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2) !important;
+}
+
+:deep(.el-checkbox__label) {
+  color: #333 !important;
+  font-size: 14px !important;
+}
+
+/* 权限详情（深度探索） */
+.permission-detail-dialog {
+  --el-dialog-padding-primary: 15px;
+}
+
+.detail-container {
+  background-color: #fff1f0; 
+  border-radius: 6px; 
+  padding: 15px;
+}
+
+.hlid-item {
+  margin-bottom: 25px; 
+}
+
+.label {
+  color: #666;
+  font-weight: 500;
+}
+
+.value {
+  color: #333;
+}
+
+.expire-section {
+  margin-top: 10px;
+}
+
+.section-title {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 10px;
+  font-weight: bold; 
+}
+
+.indicator-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.indicator-item {
+  padding: 6px 0;
+  display: flex; 
+  align-items: center;
+}
+
+.indicator-name {
+  color: #666;
+  font-size: 14px;
+}
+
+.expire-time {
+  color: #333;
+  font-size: 14px;
+  margin-left: 8px; 
+}
+
+.expired-tag {
+  background-color: #ffccd5; 
+  color: #f56c6c; 
+  font-size: 12px;
+  padding: 2px 8px; 
+  border-radius: 4px; 
+  margin-left: 8px;
+}
+</style>
diff --git a/src/views/UserPermissions/TokenManage.vue b/src/views/UserPermissions/TokenManage.vue
new file mode 100644
index 0000000..7958683
--- /dev/null
+++ b/src/views/UserPermissions/TokenManage.vue
@@ -0,0 +1,733 @@
+<template>
+  <div class="page-container">
+    <!-- 搜索区域 -->
+    <div class="search-container" @keyup.enter="searchDM">
+      <div class="search-form">
+        <div class="search-group">
+          <div class="search-group1">
+            <div class="search-item">
+              <span class="form-label">账号</span>
+              <el-input 
+                v-model="searchFormDM.dccode" 
+                placeholder="请输入账号" 
+                clearable
+                style="height: 36px; width: 140px;"
+              />
+            </div>
+            <div class="search-item">
+              <span class="form-label">姓名</span>
+              <el-input 
+                v-model="searchFormDM.dcname" 
+                placeholder="请输入姓名" 
+                clearable
+                style="height: 36px; width: 180px;"
+              />
+            </div>
+            <div class="search-item">
+              <span class="form-label">归属</span>
+              <el-input 
+                v-model="searchFormDM.inviter" 
+                placeholder="请输入归属账号" 
+                clearable
+                style="height: 36px; width: 140px;"
+              />
+            </div>
+          </div>
+          <div class="search-group2">
+            <div class="search-item">
+              <span class="form-label">客户类型</span> 
+              <el-select 
+                v-model="searchFormDM.user_role" 
+                placeholder="请选择客户类型" 
+                clearable
+                style="height: 36px; width: 160px;"
+              >
+                <el-option label="非网" value="2" />
+                <el-option label="会员" value="1" />
+              </el-select>
+            </div>
+            <div class="search-item">
+              <span class="form-label">地区</span>
+              <el-select 
+                v-model="searchFormDM.market" 
+                placeholder="请选择地区" 
+                clearable
+                filterable
+                style="height: 36px; width: 160px;"
+                :loading="isRegionLoading"
+              >
+                <el-option 
+                  v-for="region in regionList" 
+                  :key="region.ID" 
+                  :label="region.Name" 
+                  :value="region.ID" 
+                />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="button-group">
+          <el-button type="primary" @click="searchDM">搜索</el-button>
+          <el-button type="danger" @click="enableAccessDM">开通权限</el-button>
+          <el-button type="success" @click="exportExcelDM">导出Excel列表</el-button>
+          <el-button color="#626aef" @click="exportListDM">查看导出列表</el-button>
+          <el-button type="primary" @click="resetBnDM">重置</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 数据 -->
+    <el-table 
+      :data="tableDataDM" 
+      style="width: 100%; margin-top: 20px;"
+      header-cell-class-name="table-header" 
+      @sort-change="handleSortChangeDM"
+      :default-sort="{ order: null }"
+      class="table-rounded" 
+      :loading="tableLoadingDM" 
+    >
+      <el-table-column prop="id" label="序号" align="center" header-align="center" width="80">
+        <template #default="scope">
+          {{ (currentPageDM - 1) * pageSizeDM + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="dccode" label="账号" align="center" header-align="center"/>
+      <el-table-column prop="dcname" label="姓名" align="center" header-align="center"/>
+      <el-table-column prop="inviter" label="归属" align="center" header-align="center"/>
+      <el-table-column prop="module_name" label="模块名称" align="center" header-align="center"/>
+      <el-table-column prop="remain_num" label="token数量" align="center" header-align="center"/>
+      <el-table-column prop="remain_free_num" label="免费token" align="center" header-align="center"/>
+      <el-table-column prop="remain_pay_num" label="付费token" align="center" header-align="center"/>
+      <el-table-column prop="updated_at" label="操作时间" align="center" header-align="center" sortable="custom"/>
+      <el-table-column label="操作" align="center" header-align="center">
+        <template #default="scope">
+          <el-button type="text" @click="handleEditDM(scope.row)">编辑</el-button>
+          <el-button type="text" @click="handleLogDM(scope.row.dccode)">操作日志</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <div class="demo-pagination-block">
+      <el-pagination
+        @size-change="handleSizeChangeDM"
+        @current-change="handleCurrentChangeDM"
+        :current-page="currentPageDM"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSizeDM"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total= "datatotalDM"
+      />
+    </div>
+
+    <!-- 开通/编辑弹窗 -->
+    <el-dialog v-model="dialogVisibleDM" :title="addOrUpdataDM === 1 ? '添加权限' : '修改'" width="500px" :before-close="cancelDM">
+      <!-- 设置用户 -->
+      <div class="form-item" v-if="addOrUpdataDM === 1">
+        <label class="form-label">设置用户</label>
+        <el-input type="textarea" v-model="hlidsInput" rows=10
+          placeholder="请输入HLid...
+示例：
+90048004
+90048005
+90048006"
+        />
+        <div class="tip">支持批量输入，每次最多1000个（手动/Excel粘贴均可）</div>
+      </div>
+
+      <!-- 编辑回显 -->
+      <div class="info-container" v-if="addOrUpdataDM === 0">
+        <span class="info-item">HLid: {{ hlidsInput }}</span>
+        <span class="info-item">剩余次数：{{ deadtoken }}</span>
+        <span class="info-item">免费token：{{ deadtokenFree }}</span>
+        <span class="info-item">付费token：{{ deadtokenPay }}</span>
+      </div>
+
+      <!-- 设置数量 -->
+      <div class="form-item" v-if="addOrUpdataDM === 1">
+        <label class="form-label">设置用户次数</label>
+        <div class="count-group">
+          <!-- Deep Mate：不可编辑文本框 -->
+          <el-input v-model="dmText" disabled style="width: 120px; margin-right: 16px;"/>
+          <!-- token类型下拉框 -->
+          <el-select v-model="token_type" style="width: 100px; margin-right: 16px;">
+            <el-option label="免费token" value="free_num" />
+            <el-option label="付费token" value="pay_num" />
+          </el-select>
+          <!-- token数量：只能正整数 -->
+          <el-input v-model.number="token_num" type="number" style="width: 140px;" placeholder="请输入次数" title="请输入次数(只能为正)"/>
+        </div>
+      </div>
+
+      <div class="form-item" v-if="addOrUpdataDM === 0">
+        <label class="form-label">修改用户次数</label>
+        <div class="count-group">
+          <!-- Deep Mate：不可编辑文本框 -->
+          <el-input v-model="dmText" disabled style="width: 120px; margin-right: 16px;"/>
+          <!-- token类型下拉框 -->
+          <el-select v-model="token_type" style="width: 120px; margin-right: 16px;">
+            <el-option label="免费token" value="free_num" />
+            <el-option label="付费token" value="pay_num" />
+          </el-select>
+          <!-- token数量：支持正负整数 -->
+          <el-input v-model.number="token_num" type="number" style="width: 140px;" placeholder="请输入次数(可正负)" title="请输入次数(可正负)"/>
+        </div>
+      </div>
+
+      <!-- 备注-->
+      <div class="form-item inline-form-item">
+        <label class="form-label">备注</label>
+        <el-input
+          type="textarea"
+          v-model="remark"
+          rows=3
+          placeholder="请输入备注..."
+          maxlength="150"
+          show-word-limit
+        />
+      </div>
+
+      <!-- 操作人 -->
+      <div class="form-item inline-form-item">
+        <label class="form-label">操作人</label>
+        <el-input v-model="operator" placeholder="请填写操作人"/>
+      </div>
+      <!-- 按钮区域 -->
+      <div class="dialog-footer">
+        <el-button type="default" plain @click="cancelDM">取消</el-button>
+        <el-button type="primary" @click="submitFormDM" style="background-color: #ff0000; border-color: #ff0000;">提交</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { marketListApi, userDMListApi, exportDeepMateApi, exitDMApi } from '../../api/userPermissions'
+import router from '../../router';
+
+// token
+const token = localStorage.getItem('token')
+
+// 地区下拉框
+const regionList = ref([]);
+const isRegionLoading = ref(false);
+
+// 获取地区列表
+const fetchRegionList = async () => {
+  try {
+    isRegionLoading.value = true;
+    const data = await marketListApi({
+      token: token,
+      app_form: "en"
+    });
+    regionList.value = data.list;
+  } catch (error) {
+    console.error('获取地区列表失败：', error);
+    regionList.value = [];
+  } finally {
+    isRegionLoading.value = false;
+  }
+};
+
+// DeepMate搜索表单
+const searchFormDM = reactive({
+  dccode: '',
+  dcname: '',
+  is_login:'',
+  inviter:'',
+  market: '',
+  user_role: ''
+});
+
+// DeepMate排序参数
+const sortOrderDM = ref(null);
+
+// DeepMate表格数据
+const tableDataDM = ref([]);
+const tableLoadingDM = ref(false);
+const datatotalDM = ref(0)
+
+// DeepMate分页参数
+const currentPageDM = ref(1);
+const pageSizeDM = ref(10);
+
+// DeepMate获取表格数据
+const DMTableData = async () => {
+  try {
+    tableLoadingDM.value = true;
+    const requestParams = {
+      token: token,
+      dccode: searchFormDM.dccode,
+      dcname: searchFormDM.dcname,
+      is_login: searchFormDM.is_login,
+      inviter: searchFormDM.inviter,
+      market: searchFormDM.market,
+      user_role: searchFormDM.user_role,
+      sort_order: sortOrderDM.value,
+      page: currentPageDM.value,
+      page_size: pageSizeDM.value     
+    };
+    const data = await userDMListApi(requestParams);
+    tableDataDM.value = data.list
+    datatotalDM.value = data.total
+  } catch (error) {
+    console.error('获取表格数据失败：', error);
+    tableDataDM.value = [];
+    datatotalDM.value = 0
+  } finally {
+    tableLoadingDM.value = false;
+  }
+};
+
+// DeepMate分页方法
+const handleSizeChangeDM = (val) => {
+  pageSizeDM.value = val;
+  DMTableData();
+  console.log(`每页 ${val} 条`);
+};
+
+const handleCurrentChangeDM = (val) => {
+  currentPageDM.value = val;
+  DMTableData();
+  console.log(`当前页: ${val}`);
+};
+
+// DeepMate排序事件
+const handleSortChangeDM = (sort) => {
+  const { order } = sort;
+  sortOrderDM.value = order; // 保存当前排序方式
+  DMTableData(); 
+};
+
+// DeepMate搜索按钮
+const searchDM = () => {
+  currentPageDM.value = 1; 
+  DMTableData();
+};
+
+// DeepMate重置按钮
+const resetBnDM = () => {
+  searchFormDM.dccode = '';
+  searchFormDM.dcname = '';
+  searchFormDM.is_login = '';
+  searchFormDM.inviter = '';
+  searchFormDM.market = '';
+  searchFormDM.user_role = '';
+  sortOrderDM.value = null;
+  currentPageDM.value = 1; 
+  pageSizeDM.value = 10; 
+  DMTableData();
+};
+
+// DeepMate开通权限按钮
+const enableAccessDM = () => {
+  dialogVisibleDM.value = true;
+  addOrUpdataDM.value = 1;
+};
+
+// DeepMate导出Excel列表按钮
+const exportExcelDM = async () => {
+  const requestParams = {
+    token: token,
+    dccode: searchFormDM.dccode,
+    dcname: searchFormDM.dcname,
+    is_login: searchFormDM.is_login,
+    inviter: searchFormDM.inviter,
+    market: searchFormDM.market,
+    user_role: searchFormDM.user_role,
+    sort_order: sortOrderDM.value
+  };
+  const data = await exportDeepMateApi(requestParams); 
+  if (data != '') {
+    ElMessage.success('已导出'); 
+  } 
+};
+
+// DeepMate查看导出列表按钮
+const exportListDM = () => {
+  router.push({
+    path: "/userPermissions/export"
+  });
+};
+
+// DeepMate编辑按钮
+const handleEditDM = (row) => {
+  dialogVisibleDM.value = true;
+  hlidsInput.value = row.dccode;
+  deadtoken.value = row.remain_num;
+  deadtokenFree.value = row.remain_free_num;
+  deadtokenPay.value = row.remain_pay_num;
+};
+
+// DeepMate操作日志按钮
+const handleLogDM = (dccode) => {
+  router.push({
+    path: "/userPermissions/logDeepMate",
+    query: { dccode: dccode }
+  });
+};
+
+// DeepMate弹框显隐控制
+const dialogVisibleDM = ref(false);
+
+// DeepMate开通权限表单
+const hlidsInput = ref(''); 
+const dmText = ref('Deep Mate');
+const token_num = ref('');
+const token_type = ref('free_num'); // token类型：free_num-免费token, pay_num-付费token
+
+// DeepMate编辑回显内容
+const deadtoken = ref('');
+const deadtokenFree = ref('');
+const deadtokenPay = ref('');
+
+// DeepMate判断开通还是编辑
+const addOrUpdataDM = ref(0);
+
+// 校验HLid
+const checkHlids = () => {
+  // 非空
+  if (!hlidsInput.value.trim()) {
+    ElMessage.error('请输入HLid');
+    return false;
+  }
+  // 处理输入：去空、去重，转数组
+  const hlidList = hlidsInput.value.split('\n')
+    .map(item => item.trim())
+    .filter(item => item)
+    .filter((item, index, self) => self.indexOf(item) === index); // 去重
+  // 数量校验（最多1000个）
+  if (hlidList.length > 1000) {
+    ElMessage.error('HLid数量不能超过1000个');
+    return false;
+  }
+  // 格式校验（8位数字）
+  const hlidReg = /^\d{8}$/;
+  for (const hlid of hlidList) {
+    if (!hlidReg.test(hlid)) {
+      ElMessage.error(`有HLid格式错误：${hlid}，请重新输入`);
+      return false;
+    }
+  }
+  return true;
+};
+
+// 校验token数量
+const checkTokenNum = () => {
+  // 添加权限场景
+  if (addOrUpdataDM.value === 1) {
+    if (token_num.value === null || token_num.value === '') {
+      ElMessage.error('请输入token数量');
+      return false;
+    }
+    if (!Number.isInteger(token_num.value) || token_num.value <= 0) {
+      ElMessage.error('token数量必须为正整数');
+      return false;
+    }
+  } 
+  // 修改场景
+  else if (addOrUpdataDM.value === 0) {
+    if (token_num.value === null || token_num.value === '') {
+      ElMessage.error('请输入token数量');
+      return false;
+    }
+    if (!Number.isInteger(token_num.value)) {
+      ElMessage.error('token数量必须为整数');
+      return false;
+    }
+    if (token_num.value < 0 && Math.abs(token_num.value) > deadtoken.value) {
+      ElMessage.error('扣除次数大于当前总次数，请重新输入次数');
+      return false;
+    }
+  }
+  return true;
+};
+
+// 校验备注
+const checkRemark = () => {
+  if (!remark.value.trim()) {
+    ElMessage.error('请输入备注');
+    return false;
+  }
+  return true;
+};
+
+// 防抖
+const NoshakeDM = ref(false)
+
+// DeepMate提交表单
+const submitFormDM = async () => {
+  // 防抖
+  if (NoshakeDM.value) return;
+  NoshakeDM.value = true;
+
+  // 表单校验
+  if (!checkHlids() || !checkTokenNum() || !checkRemark()) {
+    NoshakeDM.value = false;
+    return;
+  }
+
+  try {
+    const requestParams = {
+      token: token,
+      // HLid
+      hlids: hlidsInput.value.split('\n')
+        .map(item => item.trim())
+        .filter(item => item)
+        .join('\n'),
+      // token数量根据类型分别传递
+      ...(token_type.value === 'free_num' 
+        ? { free_num: token_num.value } 
+        : { pay_num: token_num.value }),
+      // 备注
+      remark: remark.value.trim(),
+      // 操作人
+      ...(operator.value.trim() && { operator: operator.value.trim() }),
+    };
+    console.log('传给后端的参数：', requestParams); 
+
+    // 调用后端接口
+    await exitDMApi(requestParams);
+    ElMessage.success(addOrUpdataDM.value === 1 ? '用户次数设置成功' : '用户次数修改成功');
+
+    // 重置表单并关闭弹框
+    resetFormDM();
+    dialogVisibleDM.value = false;
+    addOrUpdataDM.value = 0;
+
+    // 重新获取表格
+    DMTableData();
+  } catch (error) {
+    ElMessage.error('添加权限失败，请重试');
+  } finally {
+    NoshakeDM.value = false;
+  }
+};
+
+// DeepMate取消表单
+const cancelDM = () => {
+  resetFormDM();
+  dialogVisibleDM.value = false;
+  addOrUpdataDM.value = 0;
+};
+
+// DeepMate重置表单数据
+const resetFormDM = () => {
+  hlidsInput.value = '';
+  token_num.value = '';
+  token_type.value = 'free_num';
+  remark.value = '';
+  operator.value = '';
+};
+
+// 备注
+const remark = ref(''); 
+const operator = ref(''); 
+
+// 组件挂载时：获取地区列表 + 初始化表格数据
+onMounted(() => {
+  fetchRegionList();
+  DMTableData();
+});
+</script>
+
+<style scoped>
+/* 父容器 */
+.page-container {
+  position: relative;
+  min-height: 600px; 
+}
+
+/* 搜索区域 */
+.search-container {
+  display: flex;
+  height: auto;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #FEFAF9;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); 
+  padding: 15px;
+  margin-bottom: 20px; 
+}
+
+/* 搜索表单 */
+.search-form {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 15px;
+  flex-wrap: wrap;
+  row-gap: 8px;
+}
+
+/* 搜索组 */
+.search-group {
+}
+
+.search-group1{
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+.search-group2{
+  display: flex;
+  margin-top: 15px;
+  align-items: center;
+  gap: 15px;
+}
+
+/* 单个搜索项 */
+.search-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 搜索标签文字 */
+.form-label {
+  font-weight: 800 !important;
+  font-size: 15px;
+  text-align: left;
+  color: #333;
+  margin-top: 13px;
+  font-family: "SimHei", "Heiti SC", "Microsoft YaHei", sans-serif !important;
+}
+
+/* 按钮组 */
+.button-group {
+  display: flex;
+  align-items: center;
+  gap: 0px !important;
+  margin-left: auto;
+}
+
+/* 按钮样式 */
+.button-group .el-button {
+  padding: 6px 10px !important;
+  font-size: 14px !important;
+  height: 36px !important;
+}
+
+/* 表格样式 */
+.table-rounded {
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border: 1px solid #e4e7ed !important;
+  height: 650px;
+}
+
+.table-header {
+  text-align: center !important;
+  font-weight: 800 !important;
+  font-size: 15px !important;
+  color: #333 !important;
+  background-color: #f8f9fa !important;
+}
+
+.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__header th.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__row:hover .el-table__cell {
+  background-color: #fafafa !important;
+}
+
+/* 分页组件样式 */
+.demo-pagination-block {
+  display: flex;
+  width: 100%;
+  height: 44px;
+  padding: 0 16px;
+  align-items: center;
+  gap: 16px;
+  position: absolute;
+  margin-top: 10px;
+  border-radius: 0 0 3px 3px;
+  border-top: 1px solid #EAEAEA;
+  background: #FEFBFB;
+  box-sizing: border-box;
+}
+
+/* 添加/修改样式 */
+.form-item {
+  margin-bottom: 24px;
+  padding-left: 20px;
+  padding-right: 20px;
+  text-align: left;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.radio-item {
+  display: flex;
+  align-items: center;
+}
+
+.radio-item span {
+  margin-right: 8px;
+}
+
+.tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.inline-form-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.inline-form-item .form-label {
+  display: inline-block;
+  margin-bottom: 0;
+  width: 60px; 
+  text-align: left; 
+  padding-right: 12px;
+}
+
+.info-container {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 0 20px 18px;
+  color: #333;
+  font-size: 14px;
+  flex-wrap: wrap;
+}
+
+.info-item {
+  white-space: nowrap;
+}
+</style>