# blt-re-zhongkong

**Repository Path**: zhejiang_blandu_smart_energy/blt-re-zhongkong

## Basic Information

- **Project Name**: blt-re-zhongkong
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-12
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: zz 1256567694@qq.com
 * @Date: 2026-01-12 11:28:39
 * @LastEditors: zz 1256567694@qq.com
 * @LastEditTime: 2026-01-12 11:29:13
 * @FilePath: \bltrevue3\README.zh-CN.md
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

# 🚀 开发

```bash
# 配置
1. 一键安装 .vscode 目录中推荐的插件
2. node 版本 18.x 或 20+
3. pnpm 版本 8.x 或最新版


# 安装依赖
pnpm i

# 初始化 Husky（首次安装后执行）
pnpm prepare

# 启动服务
pnpm dev
```

## ⚠️ 常见问题

### Husky / ESLint 在 Git 提交时不生效

如果首次安装依赖后，git commit 时没有触发代码检查和格式化，请按以下步骤排查：

```bash
# 1. 手动初始化 husky
pnpm prepare

# 2. 检查 .husky/pre-commit 文件是否存在且可执行
# Windows 用户需要确保文件以 LF（而不是 CRLF）作为行尾符

# 3. 测试 lint-staged 是否正常工作
npx lint-staged

# 4. 如果还不行，重新初始化 git hooks
rm -rf .git/hooks
pnpm prepare
```

## ✔️ 预览

```bash
# 预览预发布环境
pnpm preview:stage

# 预览正式环境
pnpm preview:prod
```

## 📦️ 多环境打包

```bash
# 构建预发布环境
pnpm build:stage

# 构建正式环境
pnpm build:prod
```

## 🔧 代码检查

```bash
# 代码格式化
pnpm lint

# 单元测试
pnpm test
```

## Git 提交规范参考

- `feat` 增加新的业务功能
- `fix` 修复业务问题/BUG
- `perf` 优化性能
- `style` 更改代码风格, 不影响运行结果
- `refactor` 重构代码
- `revert` 撤销更改
- `test` 测试相关, 不涉及业务代码的更改
- `docs` 文档和注释相关
- `chore` 更新依赖/修改脚手架配置等琐事
- `workflow` 工作流改进
- `ci` 持续集成相关
- `types` 类型定义文件更改
- `wip` 开发中

## 部分公共样式

普通蓝色背景颜色
el组件直接使用primary

```css
background:var(--el-color-primary); //背景色
color: var(--v3-primary-text-color);  // 文字蓝
```

table

```js
import { useTable } from "@/composables/useTable"

// 初始化表格相关数据和方法
const { queryParams, loading, total, list, resetQuery, setFetchData, loadData } = useTable({
  initParams: {
    name: ""
  }
})
const getList = async () => {}
// 注册数据加载函数
setFetchData(getList)

onMounted(() => {
  loadData()
})
```

普通卡片统一样式

```css
.m-12-28-block {
  margin: 0 28px 12px 12px;
  background: var(--v3-body-main-bg-color);
  border-radius: 8px;
}
```

普通详情头部

```html
<div class="page-header">
  <el-icon class="back-icon" @click="handleCancel">
    <ArrowLeft />
  </el-icon>
  <span class="title">{{ detail.productName }}</span>
  <div class="operation-buttons">
    <el-button type="primary" @click="handleCopy(detail.productId)">应用配置</el-button>
  </div>
</div>
```

普通搜索头部

```html
    <div class="search-wrapper">
      <div class="search-title">产品管理</div>
        <el-form ref="queryForm" :model="queryParams" inline>
        </el-form>
      </div>
    </div>
```

普通表格外框

```html
<div class="table-wrapper">
  <div class="toolbar-wrapper">
    <el-button type="primary">创建 </el-button>
  </div>

  <el-table :data="list" v-loading="loading"> </el-table>
</div>
```

# CommonSearch 使用示例

## 示例 1: 基础单项搜索

最简单的单项搜索配置：

```vue
<template>
  <common-search title="用户搜索" mode="single" :search-options="searchOptions" @search="handleSearch" />
</template>

<script setup>
import { ref } from "vue"
import CommonSearch from "@/components/common-search/index.vue"

const searchOptions = ref([
  {
    label: "用户名",
    prop: "username",
    type: "input",
    comparator: ["contains", "equals"]
  },
  {
    label: "邮箱",
    prop: "email",
    type: "input",
    comparator: ["contains", "equals"]
  },
  {
    label: "手机号",
    prop: "phone",
    type: "input",
    comparator: ["contains", "equals"]
  }
])

const handleSearch = (searchData) => {
  // 使用单个过滤条件
  const { singleFilter } = searchData
  console.log("搜索:", singleFilter)
  // { searchProp: "username", comparator: "contains", searchValue: "张三" }
}
</script>
```

## 示例 2: 带接口数据的 Select

使用 `useFetchSelect` 动态获取选项：

```vue
<template>
  <common-search title="产品搜索" mode="single" :search-options="searchOptions" @search="handleSearch" />
</template>

<script setup>
import { computed } from "vue"
import CommonSearch from "@/components/common-search/index.vue"
import { useFetchSelect } from "@/hooks/useFetchSelect"
import { getCategoryList, getBrandList } from "@/api/product"

// 获取分类选项
const { options: categoryOptions } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 }
})

// 获取品牌选项
const { options: brandOptions } = useFetchSelect({
  api: getBrandList,
  params: { page: 1, limit: 100 }
})

const searchOptions = computed(() => [
  {
    label: "产品名称",
    prop: "productName",
    type: "input",
    comparator: ["contains", "equals"]
  },
  {
    label: "产品分类",
    prop: "categoryId",
    type: "select",
    options: categoryOptions.value,
    comparator: ["equals", "notEquals"]
  },
  {
    label: "品牌",
    prop: "brandId",
    type: "select",
    options: brandOptions.value,
    comparator: ["equals"]
  }
])

const handleSearch = (searchData) => {
  // 发送请求...
}
</script>
```

## 示例 3: 日期范围搜索（多项模式）

使用多项模式实现日期范围搜索，支持展开/收起功能：

```vue
<template>
  <common-search title="订单搜索" mode="multiple" :search-options="searchOptions" @search="handleSearch" />
</template>

<script setup>
import { ref } from "vue"
import CommonSearch from "@/components/common-search/index.vue"

const searchOptions = ref([
  {
    label: "订单号",
    prop: "orderNo",
    type: "input",
    comparator: ["contains", "equals"]
  },
  {
    label: "订单状态",
    prop: "status",
    type: "select",
    options: [
      { label: "待支付", value: "pending" },
      { label: "已支付", value: "paid" },
      { label: "已完成", value: "completed" },
      { label: "已取消", value: "cancelled" }
    ],
    comparator: ["equals"]
  },
  {
    label: "创建时间",
    prop: "createTime",
    type: "date",
    comparator: ["greaterThanOrEqual", "lessThanOrEqual"]
  }
])

const handleSearch = (searchData) => {
  // 多项模式返回过滤条件数组
  const { filter } = searchData
  console.log("搜索条件:", filter)
  // [
  //   { searchProp: "status", comparator: "equals", searchValue: "paid" },
  //   { searchProp: "createTime", comparator: "greaterThanOrEqual", searchValue: "2024-01-01" }
  // ]
}
</script>
```

**多项模式特性：**

- 每个搜索条件独占一行，清晰展示
- 带序号标识（1、2、3...）
- 当有多个条件时，自动显示"展开/收起"按钮
- 收起状态下只显示第一个条件，便于节省空间
- 点击圆形 ➕ 按钮添加新条件
- 点击圆形 ➖ 按钮删除当前条件

## 示例 4: 带统计信息的搜索

使用插槽添加统计信息：

```vue
<template>
  <common-search
    title="设备管理"
    mode="single"
    :search-options="searchOptions"
    :loading="loading"
    @search="handleSearch"
    @reset="handleReset"
  >
    <!-- 统计信息 -->
    <div class="statistics-wrapper">
      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><Monitor /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-label">总设备</div>
          <div class="stat-value">{{ statistics.total }}</div>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon online">
          <el-icon><CircleCheck /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-label">在线</div>
          <div class="stat-value text-green">{{ statistics.online }}</div>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon offline">
          <el-icon><CircleClose /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-label">离线</div>
          <div class="stat-value text-red">{{ statistics.offline }}</div>
        </div>
      </div>
    </div>
  </common-search>
</template>

<script setup>
import { ref, reactive } from "vue"
import { Monitor, CircleCheck, CircleClose } from "@element-plus/icons-vue"
import CommonSearch from "@/components/common-search/index.vue"

const loading = ref(false)
const statistics = reactive({
  total: 2548,
  online: 1314,
  offline: 1234
})

const searchOptions = ref([
  {
    label: "设备名称",
    prop: "deviceName",
    type: "input"
  }
])

const handleSearch = (searchData) => {
  loading.value = true
  // 执行搜索...
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const handleReset = () => {
  // 重置统计信息等
}
</script>

<style scoped>
.statistics-wrapper {
  position: absolute;
  display: flex;
  gap: 24px;
  right: 16px;
  top: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--el-bg-color-overlay);
  border-radius: 8px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  font-size: 20px;

  &.online {
    background: #f0f9ff;
    color: #67c23a;
  }

  &.offline {
    background: #fef0f0;
    color: #f56c6c;
  }
}

.stat-content {
  text-align: left;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.text-green {
  color: #67c23a;
}

.text-red {
  color: #f56c6c;
}
</style>
```

## 示例 5: 切换搜索模式

动态切换单项和多项模式：

```vue
<template>
  <div>
    <!-- 模式切换按钮 -->
    <div class="mode-switch">
      <el-radio-group v-model="searchMode" size="small">
        <el-radio-button label="single">单项搜索</el-radio-button>
        <el-radio-button label="multiple">多项搜索</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 搜索组件 -->
    <common-search title="商品搜索" :mode="searchMode" :search-options="searchOptions" @search="handleSearch" />
  </div>
</template>

<script setup>
import { ref } from "vue"
import CommonSearch from "@/components/common-search/index.vue"

const searchMode = ref("single")

const searchOptions = ref([
  {
    label: "商品名称",
    prop: "goodsName",
    type: "input"
  },
  {
    label: "商品分类",
    prop: "categoryId",
    type: "select",
    options: [
      { label: "电子产品", value: 1 },
      { label: "服装", value: 2 },
      { label: "食品", value: 3 }
    ]
  },
  {
    label: "价格",
    prop: "price",
    type: "input",
    comparator: ["equals", "greaterThan", "lessThan"]
  },
  {
    label: "上架时间",
    prop: "publishTime",
    type: "date"
  }
])

const handleSearch = (searchData) => {
  if (searchMode.value === "single") {
    console.log("单项搜索:", searchData.singleFilter)
  } else {
    console.log("多项搜索:", searchData.filter)
  }
}
</script>

<style scoped>
.mode-switch {
  margin-bottom: 16px;
}
</style>
```

## 示例 6: 与表格联动

完整的搜索+表格示例：

```vue
<template>
  <div class="page-container">
    <!-- 搜索组件 -->
    <common-search
      title="用户管理"
      mode="single"
      :search-options="searchOptions"
      :loading="loading"
      @search="handleSearch"
      @reset="handleReset"
    />

    <!-- 表格 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="createTime" label="创建时间" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.limit"
      :total="pagination.total"
      @current-change="loadData"
      @size-change="loadData"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import CommonSearch from "@/components/common-search/index.vue"
import { getUserList } from "@/api/user"

const loading = ref(false)
const tableData = ref([])

const pagination = reactive({
  page: 1,
  limit: 10,
  total: 0
})

const queryParams = reactive({
  page: 1,
  limit: 10,
  filter: []
})

const searchOptions = ref([
  {
    label: "用户名",
    prop: "username",
    type: "input"
  },
  {
    label: "邮箱",
    prop: "email",
    type: "input"
  },
  {
    label: "手机号",
    prop: "phone",
    type: "input"
  }
])

const loadData = async () => {
  try {
    loading.value = true
    const res = await getUserList(queryParams)
    tableData.value = res.data.list
    pagination.total = res.data.total
  } catch (error) {
    console.error("加载数据失败:", error)
  } finally {
    loading.value = false
  }
}

const handleSearch = (searchData) => {
  // 更新查询参数
  queryParams.filter = searchData.filter
  queryParams.page = 1
  loadData()
}

const handleReset = () => {
  queryParams.filter = []
  queryParams.page = 1
  loadData()
}

onMounted(() => {
  loadData()
})
</script>
```

# useFetchSelect Hook 使用说明

一个灵活的 Hook，用于从接口获取数据并转换为 Select 组件需要的选项格式。

## 基础用法

### 场景 1: 标准格式接口

接口返回数据已经是标准的 `{ label, value }` 格式：

```javascript
// 接口返回：
{
  code: 200,
  data: [
    { label: "选项1", value: "1" },
    { label: "选项2", value: "2" }
  ]
}
```

```vue
<script setup>
import { useFetchSelect } from "@/hooks/useFetchSelect"
import { getCategoryList } from "@/api/category"

const { options, loading } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 }
})
</script>

<template>
  <el-select v-model="value" :loading="loading">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>
```

### 场景 2: 非标准格式 - 简单映射

接口返回的数据字段名不是 `label` 和 `value`：

```javascript
// 接口返回：
{
  code: 200,
  data: [
    { name: "分类1", id: "1" },
    { name: "分类2", id: "2" }
  ]
}
```

```vue
<script setup>
const { options } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 },
  labelField: "name", // 映射 name 字段为 label
  valueField: "id" // 映射 id 字段为 value
})
</script>
```

### 场景 3: 嵌套数据路径

数据在深层嵌套的路径中：

```javascript
// 接口返回：
{
  code: 200,
  data: {
    list: [
      { categoryName: "分类1", categoryId: "1" },
      { categoryName: "分类2", categoryId: "2" }
    ],
    total: 100
  }
}
```

```vue
<script setup>
const { options } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 },
  dataPath: "data.list", // 指定数据路径
  labelField: "categoryName",
  valueField: "categoryId"
})
</script>
```

### 场景 4: 更深层的嵌套

```javascript
// 接口返回：
{
  code: 200,
  data: {
    data: [
      { categoryName: "分类1", categoryId: "1" },
      { categoryName: "分类2", categoryId: "2" }
    ]
  }
}
```

```vue
<script setup>
const { options } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 },
  dataPath: "data.data", // 嵌套路径
  labelField: "categoryName",
  valueField: "categoryId"
})
</script>
```

### 场景 5: 带禁用状态

```javascript
// 接口返回：
{
  code: 200,
  data: [
    { name: "分类1", id: "1", isDisabled: false },
    { name: "分类2", id: "2", isDisabled: true }
  ]
}
```

```vue
<script setup>
const { options } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 },
  labelField: "name",
  valueField: "id",
  disabledField: "isDisabled" // 映射禁用状态字段
})
</script>
```

### 场景 6: 自定义转换函数

对于复杂的数据格式，可以使用自定义转换函数：

```javascript
// 接口返回：
{
  code: 200,
  data: {
    categories: [
      {
        info: { name: "分类1", code: "C001" },
        status: 1
      },
      {
        info: { name: "分类2", code: "C002" },
        status: 0
      }
    ]
  }
}
```

```vue
<script setup>
const { options } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 },
  transform: (res) => {
    return res.data.categories.map((item) => ({
      label: `${item.info.name} (${item.info.code})`,
      value: item.info.code,
      disabled: item.status === 0
    }))
  }
})
</script>
```

### 场景 7: 手动刷新数据

```vue
<script setup>
const { options, loading, refresh } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 },
  labelField: "name",
  valueField: "id"
})

// 手动刷新数据
const handleRefresh = () => {
  refresh()
}
</script>

<template>
  <div>
    <el-button @click="handleRefresh" :loading="loading">刷新</el-button>
    <el-select v-model="value">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>
```

### 场景 8: 延迟加载

不在组件挂载时自动加载数据：

```vue
<script setup>
const { options, loading, loadData } = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 },
  labelField: "name",
  valueField: "id",
  immediate: false // 不自动加载
})

// 在需要时手动加载
const handleClick = () => {
  loadData()
}
</script>
```

## API 参数说明

| 参数          | 说明                   | 类型     | 默认值  | 必填 |
| ------------- | ---------------------- | -------- | ------- | ---- |
| api           | API 函数               | Function | -       | 是   |
| params        | API 参数               | Object   | -       | 否   |
| dataPath      | 数据路径，支持点号分隔 | String   | "data"  | 否   |
| labelField    | label 字段名           | String   | "label" | 否   |
| valueField    | value 字段名           | String   | "value" | 否   |
| disabledField | disabled 字段名        | String   | -       | 否   |
| transform     | 自定义转换函数         | Function | -       | 否   |
| immediate     | 是否立即加载           | Boolean  | true    | 否   |

## 返回值

| 属性     | 说明         | 类型                  |
| -------- | ------------ | --------------------- |
| options  | 选项数组     | Ref<SelectOption[]>   |
| loading  | 加载状态     | Ref<Boolean>          |
| value    | 当前选中值   | Ref<String \| Number> |
| loadData | 加载数据方法 | Function              |
| refresh  | 刷新数据方法 | Function              |

## 常见问题

### Q1: 如何知道我的接口数据在哪个路径？

在浏览器控制台查看接口返回，然后用点号连接路径。例如：

- `res.data` → `dataPath: "data"`
- `res.data.list` → `dataPath: "data.list"`
- `res.data.data` → `dataPath: "data.data"`

### Q2: 我的接口返回数据很复杂，怎么办？

使用 `transform` 自定义转换函数，可以处理任何复杂的数据格式。

## 完整示例

```vue
<template>
  <div class="select-demo">
    <el-form>
      <el-form-item label="产品分类">
        <el-select v-model="categoryId" placeholder="请选择分类" :loading="categoryLoading" clearable>
          <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="产品品牌">
        <el-select v-model="brandId" placeholder="请选择品牌" :loading="brandLoading">
          <el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleRefresh">刷新选项</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useFetchSelect } from "@/hooks/useFetchSelect"
import { getCategoryList, getBrandList } from "@/api/product"

const categoryId = ref("")
const brandId = ref("")

// 获取分类选项
const {
  options: categoryOptions,
  loading: categoryLoading,
  refresh: refreshCategory
} = useFetchSelect({
  api: getCategoryList,
  params: { page: 1, limit: 100 },
  dataPath: "data.data",
  labelField: "categoryName",
  valueField: "categoryId",
  disabledField: "isDisabled"
})

// 获取品牌选项
const {
  options: brandOptions,
  loading: brandLoading,
  refresh: refreshBrand
} = useFetchSelect({
  api: getBrandList,
  params: { page: 1, limit: 100 },
  transform: (res) => {
    return res.data.map((item) => ({
      label: `${item.brandName} (${item.brandCode})`,
      value: item.brandId
    }))
  }
})

const handleSubmit = () => {
  console.log("分类:", categoryId.value)
  console.log("品牌:", brandId.value)
}

const handleRefresh = () => {
  refreshCategory()
  refreshBrand()
}
</script>
```

## 迁移指南

### 从旧版迁移到新版

**旧版写法：**

```javascript
const { options } = useFetchSelect(
  {
    api: getList,
    params: { page: 1, limit: 1000 }
  },
  true,
  "id",
  "name"
)
```

**新版写法：**

```javascript
const { options } = useFetchSelect({
  api: getList,
  params: { page: 1, limit: 1000 },
  dataPath: "data.data",
  labelField: "name",
  valueField: "id"
})
```

# 自定义表头 使用示例

一个功能强大的表格列自定义组件，支持列的显示/隐藏、拖拽排序、固定列等功能，配置自动保存到后端。

## ✨ 功能特性

- 🎯 **列选择** - 自由选择需要显示的列
- 🔄 **拖拽排序** - 支持拖拽调整列的显示顺序
- 📌 **固定列** - 部分列可设置为固定不可删除
- 💾 **配置保存** - 自动保存到后端，刷新页面后配置保持
- 🎨 **美观界面** - 现代化的 UI 设计，操作直观

## 📦 快速开始

### 第一步：在 useTable 中获取表头功能

```javascript
import { useTable } from "@/composables/useTable"

const {
  // ... 其他功能

  // 表头配置相关
  availableColumns, // 当前显示的列（用于 el-table-column 渲染）
  selectedProps, // 选中的列的 prop 数组
  fixedProps, // 固定的列的 prop 数组
  tableKey, // 表格 key（用于强制刷新）
  setTableHeader, // 保存表头配置
  getTableHeader, // 获取表头配置
  initTableColumns // 初始化表格列
} = useTable({
  /* ... */
})
```

### 第二步：定义默认配置

```javascript
// 定义默认表头配置
const defaultColumnConfig = {
  columnOptions: [
    { label: "主体名称", prop: "name" },
    { label: "用户名称", prop: "customerName" },
    { label: "详细地址", prop: "address" },
    { label: "负责人数量", prop: "userNumber" },
    { label: "服务到期时间", prop: "expireTime" },
    { label: "创建时间", prop: "createTime", width: 160 }
  ],
  // 默认显示的列
  selectedProps: ["name", "customerName", "address", "userNumber", "expireTime", "createTime"],
  // 固定不可删除的列
  fixedProps: ["name", "customerName"]
}
```

### 第三步：使用组件

```vue
<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table ref="tableRef" :key="tableKey" :data="list" v-loading="loading">
      <!-- 使用 availableColumns 动态渲染列 -->
      <el-table-column
        v-for="item in availableColumns"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :fixed="item.fixed"
      >
        <template #default="{ row }">
          {{ row[item.prop] }}
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column fixed="right" label="操作" width="200">
        <template #header>
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <span>操作</span>
            <!-- 列设置图标 -->
            <img
              src="@/assets/columnSetting.png"
              style="cursor: pointer; width: 20px; height: 20px;"
              @click="showColumnSetting"
            />
          </div>
        </template>
        <!-- 操作按钮 -->
      </el-table-column>
    </el-table>

    <!-- 列设置组件 -->
    <ColumnSetting
      ref="columnSetting"
      :column-options="defaultColumnConfig.columnOptions"
      :selected-columns="selectedProps"
      :fixed-props="fixedProps"
      @update="handleUpdate"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useTable } from "@/composables/useTable"
import ColumnSetting from "@/components/column-setting/index.vue"

const tableRef = ref(null)
const columnSetting = ref(null)

// 从 useTable 获取表头配置功能
const {
  queryParams,
  loading,
  list,
  loadData,
  // 表头配置
  availableColumns,
  selectedProps,
  fixedProps,
  tableKey,
  setTableHeader,
  getTableHeader
} = useTable({
  initParams: {
    /* 初始参数 */
  }
})

// 默认配置
const defaultColumnConfig = {
  columnOptions: [
    { label: "主体名称", prop: "name" },
    { label: "用户名称", prop: "customerName" },
    { label: "详细地址", prop: "address" },
    { label: "负责人数量", prop: "userNumber" },
    { label: "服务到期时间", prop: "expireTime" },
    { label: "创建时间", prop: "createTime", width: 160 }
  ],
  selectedProps: ["name", "customerName", "address", "userNumber", "expireTime", "createTime"],
  fixedProps: ["name", "customerName"]
}

// 更新表头配置
const handleUpdate = (newColumns) => {
  setTableHeader(newColumns, "menuName", "tableId", tableRef, columnSetting)
}

// 显示列设置弹窗
const showColumnSetting = () => {
  columnSetting.value?.initColumnData()
  columnSetting.value?.show()
}

onMounted(() => {
  // 加载表头配置
  getTableHeader("menuName", "tableId", defaultColumnConfig, columnSetting)
  // 加载数据
  loadData()
})
</script>
```

## 📖 详细说明

### columnOptions 配置项

每个列配置对象支持以下属性：

| 属性          | 说明         | 类型    | 必填 | 示例             |
| ------------- | ------------ | ------- | ---- | ---------------- |
| label         | 列标题       | String  | 是   | "用户名称"       |
| prop          | 列字段名     | String  | 是   | "userName"       |
| width         | 列宽度       | Number  | 否   | 160              |
| fixed         | 固定列位置   | String  | 否   | "left" / "right" |
| sortable      | 是否可排序   | Boolean | 否   | true             |
| needAutoWidth | 是否自动宽度 | Boolean | 否   | true             |

```javascript
const columnOptions = [
  {
    label: "序号",
    prop: "index",
    fixed: "left",
    needAutoWidth: false,
    width: 50
  },
  {
    label: "设备名称",
    prop: "devName",
    needAutoWidth: true,
    width: 150
  },
  {
    label: "总用量",
    prop: "totalUsage",
    width: 110,
    sortable: true
  }
]
```

### API 方法说明

#### getTableHeader(menu, tableId, config, columnSettingRef)

获取表头配置（首次加载时调用）

**参数：**

- `menu` (String) - 菜单标识，用于区分不同页面
- `tableId` (String) - 表格ID，用于区分同一页面的不同表格
- `config` (Object) - 默认配置对象
  - `columnOptions` - 所有可选列配置
  - `selectedProps` - 默认选中的列
  - `fixedProps` - 固定的列
- `columnSettingRef` (Ref) - 列设置组件引用（可选）

**示例：**

```javascript
onMounted(() => {
  getTableHeader("deviceManage", "deviceTable", defaultColumnConfig, columnSetting)
})
```

#### setTableHeader(newColumns, menu, tableId, tableRef, columnSettingRef)

保存表头配置（用户修改后调用）

**参数：**

- `newColumns` (Object) - 新的列配置（由 ColumnSetting 组件传出）
- `menu` (String) - 菜单标识
- `tableId` (String) - 表格ID
- `tableRef` (Ref) - 表格引用（可选，用于刷新布局）
- `columnSettingRef` (Ref) - 列设置组件引用（可选）

**示例：**

```javascript
const handleUpdate = (newColumns) => {
  setTableHeader(newColumns, "deviceManage", "deviceTable", tableRef, columnSetting)
}
```

## 🎯 完整示例

```vue
<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <common-search title="用户管理" mode="single" :search-options="searchOptions" @search="handleSearch" />

    <!-- 表格区域 -->
    <div class="table-wrapper">
      <div class="toolbar-wrapper">
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </div>

      <el-table ref="tableRef" :key="tableKey" :data="list" v-loading="loading" border stripe>
        <!-- 动态列 -->
        <el-table-column
          v-for="item in availableColumns"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :sortable="item.sortable"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <!-- 自定义列内容 -->
            <span v-if="item.prop === 'status'">
              <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                {{ row.status === 1 ? "启用" : "禁用" }}
              </el-tag>
            </span>
            <span v-else-if="item.prop === 'createTime'">
              {{ formatDate(row.createTime) }}
            </span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="200">
          <template #header>
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>操作</span>
              <img
                src="@/assets/columnSetting.png"
                style="cursor: pointer; width: 20px; height: 20px;"
                @click="showColumnSetting"
                title="列设置"
              />
            </div>
          </template>
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleEdit(row)"> 编辑 </el-button>
            <el-button link type="danger" size="small" @click="handleDelete(row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.limit"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="loadData"
        @current-change="loadData"
      />
    </div>

    <!-- 列设置组件 -->
    <ColumnSetting
      ref="columnSetting"
      :column-options="defaultColumnConfig.columnOptions"
      :selected-columns="selectedProps"
      :fixed-props="fixedProps"
      @update="handleUpdate"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue"
import { useTable } from "@/composables/useTable"
import { getUserList } from "@/api/user"
import CommonSearch from "@/components/common-search/index.vue"
import ColumnSetting from "@/components/column-setting/index.vue"

const tableRef = ref(null)
const columnSetting = ref(null)

// 初始化表格
const {
  queryParams,
  loading,
  total,
  list,
  setFetchData,
  loadData,
  handleCommonSearch,
  // 表头配置
  availableColumns,
  selectedProps,
  fixedProps,
  tableKey,
  setTableHeader,
  getTableHeader
} = useTable({
  initParams: {
    userName: "",
    status: ""
  }
})

// 默认表头配置
const defaultColumnConfig = {
  columnOptions: [
    { label: "用户ID", prop: "userId", width: 100 },
    { label: "用户名", prop: "userName", width: 150 },
    { label: "真实姓名", prop: "realName", width: 120 },
    { label: "手机号", prop: "phone", width: 130 },
    { label: "邮箱", prop: "email", width: 180 },
    { label: "部门", prop: "deptName", width: 150 },
    { label: "角色", prop: "roleName", width: 120 },
    { label: "状态", prop: "status", width: 100 },
    { label: "创建时间", prop: "createTime", width: 160 }
  ],
  selectedProps: ["userId", "userName", "realName", "phone", "email", "status", "createTime"],
  fixedProps: ["userId", "userName"]
}

// 搜索配置
const searchOptions = computed(() => [
  {
    label: "用户名",
    prop: "userName",
    type: "input",
    comparator: ["contains", "equals"]
  },
  {
    label: "状态",
    prop: "status",
    type: "select",
    options: [
      { label: "启用", value: 1 },
      { label: "禁用", value: 0 }
    ],
    comparator: ["equals"]
  }
])

// 获取列表数据
const getList = async () => {
  try {
    loading.value = true
    const res = await getUserList(queryParams.value)
    list.value = res.data.data || []
    total.value = res.data.total || 0
  } finally {
    loading.value = false
  }
}

// 更新表头配置
const handleUpdate = (newColumns) => {
  setTableHeader(newColumns, "userManage", "userTable", tableRef, columnSetting)
}

// 显示列设置
const showColumnSetting = () => {
  columnSetting.value?.initColumnData()
  columnSetting.value?.show()
}

// 搜索
const handleSearch = (searchData) => {
  handleCommonSearch(searchData)
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return "-"
  return new Date(date).toLocaleString("zh-CN")
}

// 注册数据加载函数
setFetchData(getList)

onMounted(() => {
  // 加载表头配置
  getTableHeader("userManage", "userTable", defaultColumnConfig, columnSetting)
  // 加载数据
  loadData()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.table-wrapper {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.toolbar-wrapper {
  margin-bottom: 16px;
}
</style>
```

## 💡 使用技巧

### 1. 同一页面多个表格

```javascript
// 表格1
getTableHeader("userManage", "mainTable", config1, columnSetting1)

// 表格2
getTableHeader("userManage", "subTable", config2, columnSetting2)
```

### 2. 动态更新可选列

```javascript
// 根据不同条件显示不同的列
const getColumnOptions = computed(() => {
  if (userType.value === "admin") {
    return [
      { label: "用户ID", prop: "userId" },
      { label: "权限", prop: "permission" } // 管理员专属
      // ...
    ]
  } else {
    return [
      { label: "用户ID", prop: "userId" },
      { label: "姓名", prop: "name" }
      // ...
    ]
  }
})
```

### 3. 自定义列内容渲染

```vue
<el-table-column v-for="item in availableColumns" :key="item.prop" :label="item.label" :prop="item.prop">
  <template #default="{ row }">
    <!-- 状态 -->
    <el-tag v-if="item.prop === 'status'" :type="getStatusType(row.status)">
      {{ getStatusText(row.status) }}
    </el-tag>
    
    <!-- 图片 -->
    <el-image 
      v-else-if="item.prop === 'avatar'" 
      :src="row.avatar" 
      style="width: 40px; height: 40px;"
    />
    
    <!-- 金额 -->
    <span v-else-if="item.prop === 'amount'" style="color: #f56c6c;">
      ¥{{ row.amount.toFixed(2) }}
    </span>
    
    <!-- 默认 -->
    <span v-else>{{ row[item.prop] }}</span>
  </template>
</el-table-column>
```

## ⚠️ 注意事项

1. **菜单标识和表格ID** - `menu` 和 `tableId` 的组合必须唯一，用于区分不同表格的配置
2. **固定列限制** - `fixedProps` 中指定的列无法在列设置中删除
3. **表格刷新** - 修改配置后会自动刷新表格布局，无需手动处理
4. **配置持久化** - 配置会自动保存到后端，刷新页面后仍然保持
5. **列宽度** - 如果设置了 `width`，列将使用固定宽度；否则使用默认宽度

## 🐛 常见问题

### Q1: 列设置弹窗不显示？

确保正确初始化了列数据：

```javascript
const showColumnSetting = () => {
  columnSetting.value?.initColumnData() // 先初始化
  columnSetting.value?.show() // 再显示
}
```

### Q2: 配置保存后表格不更新？

确保传递了 `tableRef` 参数：

```javascript
setTableHeader(newColumns, "menu", "tableId", tableRef, columnSetting)
```

### Q3: 如何重置到默认配置？

在列设置弹窗中点击"重置"按钮，或者清空后端保存的配置。

### Q4: 列顺序如何保存？

列的顺序通过 `availableColumns` 自动保存，支持拖拽调整顺序。

# UploadImg 图片上传组件

一个基于 Element Plus Upload 组件封装的图片上传公共组件。

## 功能特性

- ✅ 支持图片预览
- ✅ 支持上传数量限制
- ✅ 支持自定义提示文本
- ✅ 自动处理上传成功/失败状态
- ✅ 达到限制数量后自动隐藏上传按钮
- ✅ 完整的事件回调机制

## 基础使用

```vue
<template>
  <el-form-item label="图片" prop="icon">
    <upload-img
      :upload-api-url="uploadApiUrl"
      :file-list="imageFile"
      @success="handleUploadSuccess"
      @remove="handleRemove"
    />
  </el-form-item>
</template>

<script setup>
import { ref, reactive } from "vue"
import { uploadApi } from "@/api/login"
import UploadImg from "@/layouts/components/uploadImg/index.vue"

const uploadApiUrl = uploadApi()
const imageFile = ref([])
const form = reactive({
  icon: ""
})

// 上传成功回调
const handleUploadSuccess = ({ url, file, response }) => {
  form.icon = url
  imageFile.value = [file]
}

// 删除图片回调
const handleRemove = () => {
  form.icon = ""
  imageFile.value = []
}
</script>
```

## 完整示例（参考 configuration/add.vue）

```vue
<template>
  <el-form-item label="菜单分组图标" prop="groupIcon">
    <el-radio-group v-model="iconType" style="width: 100%; margin-bottom: 12px">
      <el-radio :value="1">系统图片</el-radio>
      <el-radio :value="2">本地图片</el-radio>
    </el-radio-group>

    <!-- 系统图标选择 -->
    <div v-if="iconType === 1">
      <!-- 系统图标列表 -->
    </div>

    <!-- 本地图片上传 -->
    <upload-img
      v-else
      :upload-api-url="uploadApiUrl"
      :file-list="imageFile"
      :limit="1"
      tip="建议上传60*60px大小的png图片"
      upload-text="点击上传"
      @success="handleUploadSuccess"
      @remove="handleRemove"
      @error="handleError"
    />
  </el-form-item>
</template>

<script setup>
import { ref, reactive, computed } from "vue"
import { uploadApi } from "@/api/login"
import UploadImg from "@/layouts/components/uploadImg/index.vue"

const uploadApiUrl = uploadApi()
const imageFile = ref([])
const iconType = ref(1)

const form = reactive({
  groupIcon: ""
})

// 上传成功
const handleUploadSuccess = ({ url, file, response }) => {
  form.groupIcon = url
  imageFile.value = [file]
  // 如果在 el-form 中，可以清除验证
  // formRef.value?.clearValidate("groupIcon")
}

// 删除图片
const handleRemove = () => {
  form.groupIcon = ""
  imageFile.value = []
}

// 上传失败
const handleError = (error) => {
  console.error("上传失败:", error)
}
</script>
```

## Props

| 参数         | 说明         | 类型   | 默认值                          | 必填 |
| ------------ | ------------ | ------ | ------------------------------- | ---- |
| uploadApiUrl | 上传接口地址 | String | -                               | 是   |
| fileList     | 文件列表     | Array  | []                              | 否   |
| limit        | 最大上传数量 | Number | 1                               | 否   |
| tip          | 提示文本     | String | "建议上传60\*60px大小的png图片" | 否   |
| uploadText   | 上传按钮文本 | String | "点击上传"                      | 否   |

## Events

| 事件名  | 说明           | 回调参数                                      |
| ------- | -------------- | --------------------------------------------- |
| success | 上传成功时触发 | { url: string, file: File, response: Object } |
| error   | 上传失败时触发 | error: Error \| Object                        |
| remove  | 删除文件时触发 | uploadFile: Object                            |

## 注意事项

1. **fileList 的管理**：组件本身不维护 fileList 状态，需要父组件通过 @success 和 @remove 事件来维护

2. **上传接口格式**：组件期望上传接口返回格式为：

   ```json
   {
     "status": 200,
     "data": {
       "link": "图片链接地址"
     },
     "msg": "上传成功"
   }
   ```

3. **表单验证**：如果需要清除表单验证，可以在 success 回调中手动调用：

   ```javascript
   formRef.value?.clearValidate("fieldName")
   ```

4. **编辑时回显图片**：需要构造符合 Element Plus Upload 组件的 fileList 格式：
   ```javascript
   // 如果有已上传的图片URL
   if (form.groupIcon) {
     imageFile.value = [
       {
         name: "image",
         url: form.groupIcon
       }
     ]
   }
   ```

## 样式定制

组件已包含基础样式，如需定制可以通过以下方式：

```vue
<style scoped>
:deep(.upload-picture-wrapper) {
  /* 自定义样式 */
}
</style>
```

# SvgIcon 图标组件

一个支持多种图标类型的 Vue3 图标组件，支持本地 Symbol、在线 URL、以及自动识别本地图片流的场景。

## 功能特性

- ✅ 支持本地 Symbol 图标（iconfont）
- ✅ 支持在线 URL 图片
- ✅ 支持颜色遮罩（mask）方式渲染
- ✅ **自动识别并获取本地图片流**（包含 `/uploadFile/` 的路径）
- ✅ 自动处理加载状态
- ✅ 响应式更新

## 使用场景

### 1. 本地 Symbol 图标（默认）

适用于 iconfont 等 SVG symbol 图标。

```vue
<template>
  <!-- 默认使用 icon 前缀 -->
  <svg-icon name="user" />

  <!-- 自定义前缀 -->
  <svg-icon prefix="custom" name="menu" />
</template>
```

### 2. 在线 URL 图片

适用于 CDN 或完整 URL 路径的图片。

```vue
<template>
  <!-- 普通图片 -->
  <svg-icon name="https://example.com/icon.png" />

  <!-- 使用 mask 方式（支持颜色修改） -->
  <svg-icon name="https://example.com/icon.svg" :use-mask="true" style="color: red;" />
</template>
```

### 3. 本地图片流（自动识别）⭐

组件会**自动识别**包含 `/uploadFile/` 的路径，并通过 `getImageStream` 获取本地存储的图片。

```vue
<template>
  <!-- 自动识别本地图片流（无需额外配置） -->
  <svg-icon name="/uploadFile/logo_1234567890.png" />

  <!-- 在表格中使用 -->
  <el-table :data="list">
    <el-table-column label="图标">
      <template #default="{ row }">
        <svg-icon :name="row.icon" style="width: 40px; height: 40px;" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from "vue"
import SvgIcon from "@/components/SvgIcon/index.vue"

const list = ref([
  { id: 1, name: "项目A", icon: "menu_icon" }, // Symbol 图标
  { id: 2, name: "项目B", icon: "/uploadFile/logo_abc.png" }, // 自动获取本地流
  { id: 3, name: "项目C", icon: "https://cdn.com/icon.png" } // 在线 URL
])
</script>
```

## Props

| 参数    | 说明                               | 类型    | 默认值 | 必填 |
| ------- | ---------------------------------- | ------- | ------ | ---- |
| prefix  | Symbol 图标前缀                    | String  | "icon" | 否   |
| name    | 图标名称或 URL                     | String  | -      | 是   |
| useMask | 是否使用颜色遮罩（适用于单色 SVG） | Boolean | false  | 否   |

## 自动判断逻辑

组件会按以下优先级自动判断图标类型：

1. **在线 URL + Mask**：`name` 以 `http://` 或 `https://` 开头，且 `useMask = true`

   - 使用 `<div>` + CSS mask 渲染，支持颜色修改

2. **在线 URL**：`name` 以 `http://` 或 `https://` 开头

   - 使用 `<img>` 标签渲染，性能更好

3. **本地图片流**：`name` 包含 `/uploadFile/` ⭐

   - 自动调用 `getImageStream` 获取图片 URL
   - 显示加载动画
   - 使用 `<img>` 标签渲染

4. **本地 Symbol**：其他情况
   - 使用 `<svg><use>` 渲染

## 实际应用示例

### 菜单配置表格

```vue
<template>
  <el-table :data="menuList">
    <el-table-column label="图标" width="80">
      <template #default="{ row }">
        <svg-icon v-if="row.groupIcon" :name="row.groupIcon" style="width: 40px; height: 40px;" />
      </template>
    </el-table-column>
    <el-table-column prop="groupName" label="菜单名称" />
  </el-table>
</template>

<script setup>
import { ref } from "vue"
import SvgIcon from "@/components/SvgIcon/index.vue"

const menuList = ref([
  { id: 1, groupName: "系统设置", groupIcon: "menu_xtsz" }, // Symbol 图标
  { id: 2, groupName: "用户管理", groupIcon: "/uploadFile/icon_123.png" }, // 自动识别并获取本地流
  { id: 3, groupName: "外部链接", groupIcon: "https://cdn.com/icon.png" } // 在线 URL
])
// 无需额外判断逻辑，组件会自动识别！
</script>
```

### 项目列表卡片

```vue
<template>
  <div class="project-card">
    <div class="icon-wrapper">
      <!-- 组件会自动识别图标类型，无需手动判断 -->
      <svg-icon :name="project.logo" style="width: 60px; height: 60px;" />
    </div>
    <div class="info">
      <h3>{{ project.name }}</h3>
      <p>{{ project.description }}</p>
    </div>
  </div>
</template>

<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue"

const props = defineProps({
  project: {
    type: Object,
    required: true
  }
})
// 不需要额外的判断逻辑
</script>
```

## 注意事项

1. **自动识别规则**：

   - 包含 `/uploadFile/` 的路径会自动获取本地图片流
   - 例如：`/uploadFile/logo.png`、`path/uploadFile/icon.jpg` 等

2. **性能优化**：

   - 本地图片流获取会发起异步请求
   - 建议结合虚拟滚动或分页使用大列表
   - 组件会自动缓存已加载的图片

3. **图片路径格式**：

   - 本地流：必须包含 `/uploadFile/`，例如 `/uploadFile/abc.png`
   - 在线 URL：以 `http://` 或 `https://` 开头
   - Symbol 图标：其他格式，例如 `menu_icon`

4. **加载状态**：

   - 组件内置加载动画，无需额外处理
   - 加载失败时不会显示任何内容

5. **Symbol 图标前缀**：
   - 默认使用 `icon` 作为前缀
   - 如果你的 Symbol 图标有其他前缀，请使用 `prefix` prop

## 样式定制

```vue
<template>
  <!-- 自定义大小 -->
  <svg-icon name="user" style="width: 32px; height: 32px;" />

  <!-- 自定义颜色（仅对 Symbol 和 Mask 方式有效） -->
  <svg-icon name="user" style="color: #1890ff; font-size: 24px;" />

  <!-- 自定义类名 -->
  <svg-icon name="user" class="custom-icon" />
</template>

<style scoped>
.custom-icon {
  width: 48px;
  height: 48px;
  color: var(--el-color-primary);
}
</style>
```

## TypeScript 支持

组件使用 TypeScript 编写，提供完整的类型支持：

```typescript
interface Props {
  prefix?: string // Symbol 图标前缀
  name: string // 图标名称或 URL（必填）
  useMask?: boolean // 是否使用颜色遮罩
}
```

## 识别规则总结

| name 格式                     | 识别为      | 渲染方式                      |
| ----------------------------- | ----------- | ----------------------------- |
| `http://...` 或 `https://...` | 在线 URL    | `<img>` 或 `<div>` (mask)     |
| 包含 `/uploadFile/`           | 本地图片流  | `<img>` (通过 getImageStream) |
| 其他                          | Symbol 图标 | `<svg><use>`                  |

# 数据格式转换

### 输入格式（Router dynamicRoutes）

```typescript
{
  path: "/device-manage",
  component: Layouts,
  name: "Device-Manage",
  meta: {
    title: "设备管理",
    groupTitle: "物联网平台",
    svgIcon: "menu_sbgl"
  },
  children: [
    {
      path: "product",
      component: () => import("@/views/device-manage/product/index.vue"),
      name: "Product",
      meta: {
        title: "产品",
        keepAlive: true,
        hidden: false
      }
    },
    {
      path: "add-product",
      component: () => import("@/views/device-manage/product/add-product/index.vue"),
      name: "AddProduct",
      meta: {
        title: "创建产品",
        activeMenu: "/device-manage/product",
        hidden: true
      }
    }
  ]
}
```

### 输出格式（menuTemplateList）

```javascript
;[
  {
    id: 1,
    menuTitle: "产品",
    menuName: "Product",
    menuPath: "product",
    menuComponent: "device-manage/product/index.vue",
    menuHidden: 0,
    menuActive: "",
    menuProps: "",
    sortId: 0,
    nameApp: "",
    pathApp: "/device-manage/product",
    menuApp: ""
  },
  {
    id: 2,
    menuTitle: "创建产品",
    menuName: "AddProduct",
    menuPath: "add-product",
    menuComponent: "device-manage/product/add-product/index.vue",
    menuHidden: 1,
    menuActive: "/device-manage/product",
    menuProps: "",
    sortId: 0,
    nameApp: "",
    pathApp: "/device-manage/add-product",
    menuApp: ""
  }
]
```