diff --git a/frontend/src/api/device/interface/report.ts b/frontend/src/api/device/interface/report.ts
new file mode 100644
index 0000000..eb1b8bc
--- /dev/null
+++ b/frontend/src/api/device/interface/report.ts
@@ -0,0 +1,38 @@
+import type { ReqPage, ResPage } from '@/api/interface'
+
+// 报告模版接口
+export namespace PqReport {
+
+  /**
+   * 报告模版表格分页查询参数
+   */
+  export interface ReqReportParams extends ReqPage {
+    id: string; // 装置序号id 必填
+    name?: string; // 设备名称
+    createTime?: string; //创建时间
+  }
+
+  /**
+   * 报告模版新增、修改、根据id查询返回的对象
+   */
+  export interface ResReport {
+    id: string;     //报告模板id
+    name: string;//报告模板名称
+    version:string;//版本号
+    basePath:string;//基础模板文件路径
+    detailPath:string;//检测项模版文件路径
+    desc:string;//描述信息
+    enable:number;//状态:8-删除 1-激活 2-未激活
+    createBy?: string| null; //创建用户
+    createTime?: string| null; //创建时间
+    updateBy?: string| null; //更新用户
+    updateTime?: string| null; //更新时间
+  }
+
+  /**
+   * 报告模版表格查询分页返回的对象；
+   */
+  export interface ResReportPage extends ResPage<ResReport> {
+
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/layouts/components/Header/components/ThemeDialog.vue b/frontend/src/layouts/components/Header/components/ThemeDialog.vue
index 8aec3e3..7d2d1be 100644
--- a/frontend/src/layouts/components/Header/components/ThemeDialog.vue
+++ b/frontend/src/layouts/components/Header/components/ThemeDialog.vue
@@ -22,6 +22,9 @@ import { on } from "events";
 
   const dialogVisible = ref(false);
   const openDialog = () => {
+      // 修复：使用可选链和空值合并运算符确保不会出现 null 或 undefined
+    const storedColor = JSON.parse(localStorage.getItem('cn-global') ?? '{}').primary;
+    color.value = storedColor ?? '#526ADE'; // 默认值为 '#526ADE'
     dialogVisible.value = true;
   };
 
@@ -30,11 +33,12 @@ import { on } from "events";
     dialogVisible.value = false;
   };
 
-  onMounted(() => {
-   // 修复：使用可选链和空值合并运算符确保不会出现 null 或 undefined
-  const storedColor = JSON.parse(localStorage.getItem('cn-global') ?? '{}').primary;
-  color.value = storedColor ?? '#526ADE'; // 默认值为 '#526ADE'
-  })
+  // onMounted(() => {
+  //  // 修复：使用可选链和空值合并运算符确保不会出现 null 或 undefined
+  // const storedColor = JSON.parse(localStorage.getItem('cn-global') ?? '{}').primary;
+  // console.log('123',storedColor)
+  // color.value = storedColor ?? '#526ADE'; // 默认值为 '#526ADE'
+  // })
   
   defineExpose({ openDialog });
   </script>
diff --git a/frontend/src/views/system/template/components/reportPopup.vue b/frontend/src/views/system/template/components/reportPopup.vue
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/views/system/template/index.vue b/frontend/src/views/system/template/index.vue
new file mode 100644
index 0000000..1f3791e
--- /dev/null
+++ b/frontend/src/views/system/template/index.vue
@@ -0,0 +1,146 @@
+<template>
+    <div class='table-box' ref='popupBaseView'>
+      <ProTable
+          ref='proTable'
+          :columns='columns'
+          :request-api='getTableList'
+      >
+        <!-- :requestApi="getRoleList" -->
+        <!-- 表格 header 按钮 -->
+        <template #tableHeader='scope'>
+          <el-button v-auth.device="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
+          <el-button v-auth.device="'export'" type='primary' :icon='Upload' plain @click='downloadFile()'>导出</el-button>
+          <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('')"
+                     v-if='modeStore.currentMode != "比对式"'>导入
+          </el-button>
+          <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('比对式')"
+                     v-if='modeStore.currentMode === "比对式"'>导入
+          </el-button>
+          <el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
+                     @click='batchDelete(scope.selectedListIds)'>
+            删除
+          </el-button>
+        </template>
+        <!-- 表格操作 -->
+        <template #operation='scope'>
+          <el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value='false'
+                     @click="openDialog('edit', scope.row)">编辑
+          </el-button>
+          <el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除
+          </el-button>
+        </template>
+  
+      </ProTable>
+    </div>
+    <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup'/>
+    <ImportExcel ref='deviceImportExcel'/>
+  </template>
+  
+  <script setup lang='tsx' name='useRole'>
+  import TimeControl from '@/components/TimeControl/index.vue'
+  import {type PqReport} from '@/api/device/interface/report.ts'
+  import {useHandleData} from '@/hooks/useHandleData'
+  import {useDownload} from '@/hooks/useDownload'
+  import ProTable from '@/components/ProTable/index.vue'
+  import ImportExcel from '@/components/ImportExcel/index.vue'
+  import {type ColumnProps, type ProTableInstance} from '@/components/ProTable/interface'
+  import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
+  import {CirclePlus, Delete, Download, EditPen, Upload} from '@element-plus/icons-vue'
+  import {useDictStore} from '@/stores/modules/dict'
+  import {deletePqDev, downloadTemplate, exportPqDev, getPqDev, getPqDevList, importPqDev} from '@/api/device/device/index.ts'
+  import {ElMessageBox} from 'element-plus'
+  import {onBeforeMount, reactive, ref} from 'vue'
+  import {useAppSceneStore, useModeStore} from '@/stores/modules/mode'
+  
+  // defineOptions({
+  //   name: 'device',
+  // })
+  const modeStore = useModeStore()
+  const dictStore = useDictStore()
+  const appSceneStore = useAppSceneStore()
+  // ProTable 实例
+  const proTable = ref<ProTableInstance>()
+  const devicePopup = ref()
+
+  
+  const getTableList = async (params: any) => {
+    // let newParams = JSON.parse(JSON.stringify(params))
+    // const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
+    // newParams.pattern = patternId
+    // return getPqDevList(newParams)
+  }
+  
+  
+  // 表格配置项
+  const columns = reactive<ColumnProps<PqReport.ResReport>[]>([
+    {type: 'selection', fixed: 'left', width: 70},
+    {type: 'index', fixed: 'left', width: 70, label: '序号'},
+    {
+      prop: 'name',
+      label: '名称',
+      search: {el: 'input'},
+      minWidth: 100,
+    },
+    
+    {
+      prop: 'version',
+      label: '版本号',
+      minWidth: 100,
+  
+    },
+    {
+      prop: 'basePath',
+      label: '基础模板文件路径',
+      minWidth: 150,
+  
+    },
+    {
+      prop: 'detailPath',
+      label: '检测项模版文件路径',
+      minWidth: 150,
+  
+    },
+    {
+    prop: 'createTime',
+    label: '创建时间',
+    width: 200,
+    render: scope => {
+      if (scope.row.createTime) {
+        const date = new Date(scope.row.createTime);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      }
+      return '';
+    }
+  },
+   
+    {prop: 'operation', label: '操作', fixed: 'right', width: 200},
+  ])
+  
+  
+ 
+  // 打开 drawer(新增、编辑)
+  const openDialog = (titleType: string, row: Partial<PqReport.ResReport> = {}) => {
+    
+  }
+  
+  
+  // 批量删除报告模版
+  const batchDelete = async (id: string[]) => {
+  
+  }
+  
+  // 删除报告模版
+  const handleDelete = async (params:PqReport.ResReport) => {
+    
+  
+  }
+  
+
+  </script>
+    
\ No newline at end of file