diff --git a/.env.development b/.env.development
index aa39b41..013ec41 100644
--- a/.env.development
+++ b/.env.development
@@ -1,11 +1,11 @@
 VITE_APP_NAME=后台管理系统
 VITE_SOCKET_URL=wss://server.gxwebsoft.com
-VITE_SERVER_URL=https://server.gxwebsoft.com/api
+#VITE_SERVER_URL=https://server.gxwebsoft.com/api
 VITE_THINK_URL=https://gxtyzx-api.websoft.top/api
 #VITE_API_URL=https://modules.gxwebsoft.com/api
 
 
-#VITE_SERVER_URL=http://127.0.0.1:9090/api
+VITE_SERVER_URL=http://127.0.0.1:9090/api
 VITE_API_URL=http://127.0.0.1:9001/api
 #VITE_THINK_URL=http://127.0.0.1:9099/api
 #/booking/bookingItem
diff --git a/src/api/cms/article/model/index.ts b/src/api/cms/article/model/index.ts
index 0486f45..7a725af 100644
--- a/src/api/cms/article/model/index.ts
+++ b/src/api/cms/article/model/index.ts
@@ -14,6 +14,8 @@ export interface Article {
   showType?: any;
   // 文章类型
   categoryId?: number;
+  // 栏目名称
+  categoryName?: string;
   // 封面图
   image?: string;
   // 附件
@@ -63,6 +65,7 @@ export interface ArticleParam extends PageParam {
   title?: string;
   articleId?: number;
   categoryId?: number;
+  navigationId?: number;
   status?: string;
   sortNumber?: string;
   createTime?: string;
@@ -72,3 +75,10 @@ export interface ArticleParam extends PageParam {
   // 商户编号
   merchantCode?: string;
 }
+
+export interface ArticleCount {
+  totalNum?: number;
+  totalNum2?: number;
+  totalNum3?: number;
+  totalNum4?: number;
+}
diff --git a/src/api/cms/components/index.ts b/src/api/cms/components/index.ts
new file mode 100644
index 0000000..ed23b38
--- /dev/null
+++ b/src/api/cms/components/index.ts
@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { Components, ComponentsParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询组件
+ */
+export async function pageComponents(params: ComponentsParam) {
+  const res = await request.get<ApiResult<PageResult<Components>>>(
+    MODULES_API_URL + '/cms/components/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询组件列表
+ */
+export async function listComponents(params?: ComponentsParam) {
+  const res = await request.get<ApiResult<Components[]>>(
+    MODULES_API_URL + '/cms/components',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加组件
+ */
+export async function addComponents(data: Components) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/components',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改组件
+ */
+export async function updateComponents(data: Components) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/components',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除组件
+ */
+export async function removeComponents(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/components/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除组件
+ */
+export async function removeBatchComponents(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/components/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询组件
+ */
+export async function getComponents(id: number) {
+  const res = await request.get<ApiResult<Components>>(
+    MODULES_API_URL + '/cms/components/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/api/cms/components/model/index.ts b/src/api/cms/components/model/index.ts
new file mode 100644
index 0000000..5728e85
--- /dev/null
+++ b/src/api/cms/components/model/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 组件
+ */
+export interface Components {
+  // ID
+  id?: number;
+  // 组件标题
+  title?: string;
+  // 关联导航ID
+  navigationId?: number;
+  // 组件类型
+  type?: string;
+  // 页面关键词
+  keywords?: string;
+  // 页面描述
+  description?: string;
+  // 组件路径
+  path?: string;
+  // 组件图标
+  icon?: string;
+  // 用户ID
+  userId?: number;
+  // 排序(数字越小越靠前)
+  sortNumber?: number;
+  // 备注
+  comments?: string;
+  // 状态, 0正常, 1冻结
+  status?: number;
+  // 租户id
+  tenantId?: number;
+  // 创建时间
+  createTime?: string;
+}
+
+/**
+ * 组件搜索条件
+ */
+export interface ComponentsParam extends PageParam {
+  id?: number;
+  keywords?: string;
+}
diff --git a/src/api/cms/design/model/index.ts b/src/api/cms/design/model/index.ts
index e95325f..ac97be8 100644
--- a/src/api/cms/design/model/index.ts
+++ b/src/api/cms/design/model/index.ts
@@ -39,6 +39,7 @@ export interface Design {
   backgroundColor?: string;
   // 关联网站导航ID
   navigationId?: number;
+  buyUrl?: string;
 }
 
 /**
@@ -49,4 +50,5 @@ export interface DesignParam extends PageParam {
   name?: number;
   type?: number;
   userId?: number;
+  navigationId?: number;
 }
diff --git a/src/api/cms/designRecord/index.ts b/src/api/cms/designRecord/index.ts
new file mode 100644
index 0000000..c5e1e88
--- /dev/null
+++ b/src/api/cms/designRecord/index.ts
@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { DesignRecord, DesignRecordParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询页面组件表
+ */
+export async function pageDesignRecord(params: DesignRecordParam) {
+  const res = await request.get<ApiResult<PageResult<DesignRecord>>>(
+    MODULES_API_URL + '/cms/design-record/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询页面组件表列表
+ */
+export async function listDesignRecord(params?: DesignRecordParam) {
+  const res = await request.get<ApiResult<DesignRecord[]>>(
+    MODULES_API_URL + '/cms/design-record',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加页面组件表
+ */
+export async function addDesignRecord(data: DesignRecord) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/design-record',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改页面组件表
+ */
+export async function updateDesignRecord(data: DesignRecord) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/design-record',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除页面组件表
+ */
+export async function removeDesignRecord(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/design-record/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除页面组件表
+ */
+export async function removeBatchDesignRecord(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/design-record/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询页面组件表
+ */
+export async function getDesignRecord(id: number) {
+  const res = await request.get<ApiResult<DesignRecord>>(
+    MODULES_API_URL + '/cms/design-record/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/api/cms/designRecord/model/index.ts b/src/api/cms/designRecord/model/index.ts
new file mode 100644
index 0000000..b0ad4cd
--- /dev/null
+++ b/src/api/cms/designRecord/model/index.ts
@@ -0,0 +1,45 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 页面组件表
+ */
+export interface DesignRecord {
+  // ID
+  id?: number;
+  // 关联导航ID
+  navigationId?: number;
+  // 组件
+  title?: string;
+  // 组件标识
+  dictCode?: string;
+  // 组件样式
+  styles?: string;
+  // 页面关键词
+  keywords?: string;
+  // 页面描述
+  description?: string;
+  // 页面路由地址
+  path?: string;
+  // 缩列图
+  photo?: string;
+  // 用户ID
+  userId?: number;
+  // 排序(数字越小越靠前)
+  sortNumber?: number;
+  // 备注
+  comments?: string;
+  // 状态, 0正常, 1冻结
+  status?: number;
+  // 租户id
+  tenantId?: number;
+  // 创建时间
+  createTime?: string;
+}
+
+/**
+ * 页面组件表搜索条件
+ */
+export interface DesignRecordParam extends PageParam {
+  id?: number;
+  keywords?: string;
+}
diff --git a/src/api/cms/navigation/model/index.ts b/src/api/cms/navigation/model/index.ts
index 1c2d8a4..bf3d60c 100644
--- a/src/api/cms/navigation/model/index.ts
+++ b/src/api/cms/navigation/model/index.ts
@@ -13,6 +13,8 @@ export interface Navigation {
   hide?: number;
   home?: number;
   position?: number;
+  top?: number;
+  bottom?: number;
   meta?: string;
   children?: Navigation[];
   disabled?: boolean;
@@ -39,4 +41,5 @@ export interface NavigationParam {
   path?: string;
   authority?: string;
   parentId?: number;
+  navigationId?: number;
 }
diff --git a/src/api/cms/website/model/index.ts b/src/api/cms/website/model/index.ts
index ffc4614..1826153 100644
--- a/src/api/cms/website/model/index.ts
+++ b/src/api/cms/website/model/index.ts
@@ -31,6 +31,7 @@ export interface Website {
   icpNo?: string;
   policeNo?: string;
   comments?: string;
+  statusText?: string;
   sortNumber?: number;
   createTime?: string;
   disabled?: boolean;
diff --git a/src/api/system/dictionary-data/index.ts b/src/api/system/dictionary-data/index.ts
index 9eb786f..cc951d3 100644
--- a/src/api/system/dictionary-data/index.ts
+++ b/src/api/system/dictionary-data/index.ts
@@ -8,7 +8,7 @@ import { SERVER_API_URL } from '@/config/setting';
  */
 export async function pageDictionaryData(params: DictionaryDataParam) {
   const res = await request.get<ApiResult<PageResult<DictionaryData>>>(
-    SERVER_API_URL + '/system/dict-data/page',
+    SERVER_API_URL + '/system/dictionary-data/page',
     { params }
   );
   if (res.data.code === 0) {
@@ -22,7 +22,7 @@ export async function pageDictionaryData(params: DictionaryDataParam) {
  */
 export async function listDictionaryData(params: DictionaryDataParam) {
   const res = await request.get<ApiResult<DictionaryData[]>>(
-    SERVER_API_URL + '/system/dict-data',
+    SERVER_API_URL + '/system/dictionary-data',
     { params }
   );
   if (res.data.code === 0 && res.data.data) {
@@ -36,7 +36,7 @@ export async function listDictionaryData(params: DictionaryDataParam) {
  */
 export async function addDictionaryData(data: DictionaryData) {
   const res = await request.post<ApiResult<unknown>>(
-    SERVER_API_URL + '/system/dict-data',
+    SERVER_API_URL + '/system/dictionary-data',
     data
   );
   if (res.data.code === 0) {
@@ -50,7 +50,7 @@ export async function addDictionaryData(data: DictionaryData) {
  */
 export async function updateDictionaryData(data: DictionaryData) {
   const res = await request.put<ApiResult<unknown>>(
-    SERVER_API_URL + '/system/dict-data',
+    SERVER_API_URL + '/system/dictionary-data',
     data
   );
   if (res.data.code === 0) {
@@ -64,7 +64,7 @@ export async function updateDictionaryData(data: DictionaryData) {
  */
 export async function removeDictionaryData(id?: number) {
   const res = await request.delete<ApiResult<unknown>>(
-    SERVER_API_URL + '/system/dict-data/' + id
+    SERVER_API_URL + '/system/dictionary-data/' + id
   );
   if (res.data.code === 0) {
     return res.data.message;
@@ -77,7 +77,7 @@ export async function removeDictionaryData(id?: number) {
  */
 export async function removeDictionaryDataBatch(data: (number | undefined)[]) {
   const res = await request.delete<ApiResult<unknown>>(
-    SERVER_API_URL + '/system/dict-data/batch',
+    SERVER_API_URL + '/system/dictionary-data/batch',
     { data }
   );
   if (res.data.code === 0) {
diff --git a/src/components/SelectDictDictionary/components/select-data.vue b/src/components/SelectDictDictionary/components/select-data.vue
new file mode 100644
index 0000000..532f2c4
--- /dev/null
+++ b/src/components/SelectDictDictionary/components/select-data.vue
@@ -0,0 +1,146 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="dictDataId"
+      :columns="columns"
+      :customRow="customRow"
+      :datasource="datasource"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <a-space>
+          <a-input-search
+            allow-clear
+            v-model:value="where.keywords"
+            placeholder="请输入搜索关键词"
+            style="width: 200px"
+            @search="reload"
+            @pressEnter="reload"
+          />
+        </a-space>
+      </template>
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { EleProTable } from 'ele-admin-pro';
+  import useSearch from '@/utils/use-search';
+  import { pageDictData } from '@/api/system/dict-data';
+  import { DictData, DictDataParam } from '@/api/system/dict-data/model';
+  import { pageDictionaryData } from "@/api/system/dictionary-data";
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    title?: any;
+    // 修改回显的数据
+    data?: DictData | null;
+    dictCode?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: DictData): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单数据
+  const { where } = useSearch<DictDataParam>({
+    dictCode: undefined,
+    keywords: ''
+  });
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'dictDataId',
+      key: 'dictDataId'
+    },
+    {
+      title: '名称',
+      dataIndex: 'dictDataName',
+      key: 'dictDataName'
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      key: 'comments'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.dictCode = props.dictCode;
+    return pageDictionaryData({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = () => {
+    // selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: DictData) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less">
+  .app-box {
+    display: flex;
+    .app-info {
+      display: flex;
+      margin-left: 15px;
+      margin-right: 15px;
+      flex-direction: column;
+    }
+  }
+</style>
diff --git a/src/components/SelectDictDictionary/index.vue b/src/components/SelectDictDictionary/index.vue
new file mode 100644
index 0000000..b8394b9
--- /dev/null
+++ b/src/components/SelectDictDictionary/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <select-data
+      v-model:visible="showEdit"
+      :data="current"
+      :dictCode="dictCode"
+      :title="placeholder"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Dict } from '@/api/system/dict/model';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+      index?: number;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择字典'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Dict): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Dict | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Dict) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    row.index = Number(props.index);
+    emit('done', row);
+  };
+  // 查询租户列表
+  // const appList = ref<App[] | undefined>([]);
+</script>
diff --git a/src/components/SelectFile/index.vue b/src/components/SelectFile/index.vue
index ba37cb8..af277cc 100644
--- a/src/components/SelectFile/index.vue
+++ b/src/components/SelectFile/index.vue
@@ -10,9 +10,11 @@
         </div>
         <div class="image-upload-item" v-else>
           <a-image
-            :width="width"
-            :height="width"
-            style="border: 1px dashed var(--grey-7)"
+            :style="{
+              border: '1px dashed var(--grey-7)',
+              width: width + 'px',
+              height: height + 'px'
+            }"
             :src="item.url"
           />
           <a class="image-upload-close" @click="onDeleteItem(index)">
@@ -23,6 +25,7 @@
       <a-button
         @click="openEdit"
         v-if="data?.length < limit"
+        :style="{ width: width + 'px', height: height + 'px' }"
         class="select-picture-btn ele-text-placeholder"
       >
         <PlusOutlined />
@@ -51,6 +54,7 @@
       value?: any;
       data?: any[];
       width?: number;
+      height?: number;
       type?: string;
       limit?: number;
       placeholder?: string;
@@ -59,6 +63,7 @@
     {
       placeholder: '请选择数据',
       width: 80,
+      height: 80,
       limit: 1
     }
   );
@@ -93,8 +98,6 @@
   .select-picture-btn {
     background-color: var(--grey-9);
     border: 1px dashed var(--border-color-base);
-    width: 80px;
-    height: 80px;
     font-size: 16px;
   }
   //.ant-image-img {
diff --git a/src/components/SelectNavigsation/components/select-data.vue b/src/components/SelectNavigsation/components/select-data.vue
index e6bf39f..20eb5a0 100644
--- a/src/components/SelectNavigsation/components/select-data.vue
+++ b/src/components/SelectNavigsation/components/select-data.vue
@@ -10,21 +10,41 @@
   >
     <ele-pro-table
       ref="tableRef"
-      row-key="id"
-      :datasource="datasource"
+      row-key="navigationId"
       :columns="columns"
+      :datasource="datasource"
+      :parse-data="parseData"
+      :need-page="false"
       :customRow="customRow"
-      :pagination="false"
+      :expand-icon-column-index="1"
+      :expanded-row-keys="expandedRowKeys"
+      cache-key="proNavigationTable"
+      @done="onDone"
+      @expand="onExpand"
     >
       <template #toolbar>
-        <a-input-search
-          allow-clear
-          v-model:value="searchText"
-          placeholder="请输入搜索关键词"
-          style="width: 200px"
-          @search="reload"
-          @pressEnter="reload"
-        />
+        <a-space>
+          <a-button type="dashed" class="ele-btn-icon" @click="expandAll">
+            展开
+          </a-button>
+          <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
+            折叠
+          </a-button>
+          <a-divider type="vertical" />
+          <a-radio-group v-model:value="position" @change="reload">
+            <a-radio-button :value="1">顶部</a-radio-button>
+            <a-radio-button :value="2">底部</a-radio-button>
+          </a-radio-group>
+          <a-divider type="vertical" />
+          <!-- 搜索表单 -->
+          <a-input-search
+            allow-clear
+            v-model:value="searchText"
+            placeholder="请输入搜索关键词"
+            @search="reload"
+            @pressEnter="reload"
+          />
+        </a-space>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -49,8 +69,9 @@
     ColumnItem,
     DatasourceFunction
   } from 'ele-admin-pro/es/ele-pro-table/types';
-  import { pageNavigation } from '@/api/cms/navigation';
+  import { listNavigation, pageNavigation } from '@/api/cms/navigation';
   import { EleProTable } from 'ele-admin-pro';
+  import { toTreeData } from 'ele-admin-pro/es';
   import type { Navigation, NavigationParam } from '@/api/cms/navigation/model';
 
   const props = defineProps<{
@@ -73,9 +94,12 @@
   };
 
   // 搜索内容
-  const searchText = ref(null);
   const pageId = ref<number>(0);
   const checked = ref<boolean>(true);
+  // 表格展开的行
+  const expandedRowKeys = ref<number[]>([]);
+  const searchText = ref('');
+  const position = ref(1);
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -83,37 +107,62 @@
   // 表格配置
   const columns = ref<ColumnItem[]>([
     {
-      title: '页面名称',
+      title: 'ID',
+      dataIndex: 'navigationId',
+      width: 80
+    },
+    {
+      title: '栏目名称',
       dataIndex: 'title',
       key: 'title'
-    },
-    {
-      title: '路径',
-      dataIndex: 'path',
-      key: 'path'
-    },
-    {
-      title: '操作',
-      key: 'action',
-      align: 'center'
     }
   ]);
 
   // 表格数据源
-  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+  const datasource: DatasourceFunction = ({ where }) => {
     where = {};
-    // 搜索条件
-    if (searchText.value) {
-      where.keywords = searchText.value;
+    where.title = searchText.value;
+    // where.position = position.value;
+    where.top = 0;
+    where.bottom = undefined;
+    if (position.value == 1) {
+      where.top = 0;
+      where.bottom = undefined;
     }
-    return pageNavigation({
-      ...where,
-      ...orders,
-      page,
-      limit
+    if (position.value == 2) {
+      where.top = undefined;
+      where.bottom = 0;
+    }
+    where.isMpWeixin = false;
+    return listNavigation({ ...where });
+  };
+
+  /* 数据转为树形结构 */
+  const parseData = (data: Navigation[]) => {
+    console.log(data);
+    return toTreeData({
+      data: data.map((d) => {
+        return { ...d, key: d.navigationId, value: d.navigationId };
+      }),
+      idField: 'navigationId',
+      parentIdField: 'parentId'
     });
   };
 
+  /* 点击展开图标时触发 */
+  const onExpand = (expanded: boolean, record: Navigation) => {
+    if (expanded) {
+      expandedRowKeys.value = [
+        ...expandedRowKeys.value,
+        record.navigationId as number
+      ];
+    } else {
+      expandedRowKeys.value = expandedRowKeys.value.filter(
+        (d) => d !== record.navigationId
+      );
+    }
+  };
+
   /* 搜索 */
   const reload = (where?: NavigationParam) => {
     tableRef?.value?.reload({ page: 1, where });
diff --git a/src/components/SelectNavigsation/index.vue b/src/components/SelectNavigsation/index.vue
index 7bd672b..8d78dd5 100644
--- a/src/components/SelectNavigsation/index.vue
+++ b/src/components/SelectNavigsation/index.vue
@@ -25,7 +25,7 @@
   import { BulbOutlined } from '@ant-design/icons-vue';
   import { ref } from 'vue';
   import SelectData from './components/select-data.vue';
-  import { Navigation } from '@/api/cms/navigation/model';
+  import type { Navigation } from '@/api/cms/navigation/model';
 
   withDefaults(
     defineProps<{
@@ -33,12 +33,12 @@
       placeholder?: string;
     }>(),
     {
-      placeholder: '请选择数据'
+      placeholder: '请选择'
     }
   );
 
   const emit = defineEmits<{
-    (e: 'done', Navigation): void;
+    (e: 'done', data: Navigation): void;
     (e: 'clear'): void;
   }>();
 
diff --git a/src/store/modules/theme.ts b/src/store/modules/theme.ts
index 7eb135d..859ae7b 100644
--- a/src/store/modules/theme.ts
+++ b/src/store/modules/theme.ts
@@ -69,7 +69,7 @@ const DEFAULT_STATE: ThemeState = Object.freeze({
   // 侧栏是否彩色图标
   colorfulIcon: false,
   // 侧栏是否只保持一个子菜单展开
-  sideUniqueOpen: false,
+  sideUniqueOpen: true,
   // 是否是色弱模式
   weakMode: false,
   // 是否是暗黑模式
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 86852a3..13d9097 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -9,10 +9,9 @@ import mitt from 'mitt';
 import { ChatMessage } from '@/api/system/chat/model';
 import { useUserStore } from '@/store/modules/user';
 import CryptoJS from 'crypto-js';
-// import { useTenantStore } from '@/store/modules/tenant';
-// import { listMerchantAccount } from '@/api/shop/merchantAccount';
 import { useRouter } from 'vue-router';
-import { getSiteDomain } from "@/utils/domain";
+import { getSiteDomain, getTenantId } from '@/utils/domain';
+import { uuid } from 'ele-admin-pro';
 
 type Events = {
   message: ChatMessage;
@@ -60,6 +59,47 @@ export function openUrl(url: string, params?: any): void {
   }
 }
 
+/**
+ * 跳转页面函数
+ * 携带用于统计用户行为的参数
+ * @param path /product/detail.html
+ * @param id 128
+ * @param d 项目数据
+ * 拼接规则： {域名}{path}?spm=c.{用户ID}.{租户ID}.{栏目ID}.{商品ID}.{timestamp}&token={token}
+ * @return https:///websoft.top/product/detail/128.html?spm=c.5.3057.10005.undefined&token=DDkr1PpE9DouIVMjLEMt9733QsgG7oNV
+ */
+export function openSpmUrl(path: string, d?: any, id = 0): void {
+  const domain = getSiteDomain();
+  const spm = ref<string>('');
+  const token = ref<string>();
+  const url = ref<string>();
+  const tid = getTenantId() || 0;
+  const pid = d?.parentId || 0;
+  const cid = d?.categoryId || 0;
+  const uid = localStorage.getItem('UserId') || 0;
+  const timestamp = ref(Date.now() / 1000);
+  token.value = `&token=${uuid()}`;
+
+  // TODO 含http直接跳转
+  if (path.slice(0, 4) == 'http') {
+    window.open(`${path}`);
+    return;
+  }
+
+  // TODO 不传data
+  if (!d) {
+    window.open(`${domain}${path}`);
+    return;
+  }
+
+  // TODO 封装租户ID和店铺ID
+  spm.value = `?spm=c.${uid}.${tid}.${pid}.${cid}.${id}.${timestamp.value}`;
+
+  // 跳转页面
+  url.value = `${domain}${path}${spm.value}${token.value}`;
+  window.open(url.value);
+}
+
 /**
  * 弹出新窗口
  * @param url
@@ -78,12 +118,10 @@ export function openNew(url: string) {
  * @constructor
  */
 export function openPreview(url: string) {
-  console.log(`${getSiteDomain()}${url}`);
+  if (url.slice(0, 4) == 'http') {
+    return window.open(url);
+  }
   return window.open(`${getSiteDomain()}${url}`);
-  // if (url.slice(0, 4) == 'http') {
-  //   return window.open(url);
-  // }
-  // window.open(getDomainPath(url));
 }
 /**
  * 获取网站域名
diff --git a/src/views/cms/ad/components/ad-edit.vue b/src/views/cms/ad/components/ad-edit.vue
index e5cc3f7..90f398b 100644
--- a/src/views/cms/ad/components/ad-edit.vue
+++ b/src/views/cms/ad/components/ad-edit.vue
@@ -87,7 +87,7 @@
           />
         </template>
       </a-form-item>
-      <a-form-item label="所在页面">
+      <a-form-item label="展示页面">
         <SelectDesign
           :placeholder="`请选择页面`"
           v-model:value="form.pageName"
diff --git a/src/views/cms/articleV2/components/articleEdit.vue b/src/views/cms/articleV2/components/articleEdit.vue
new file mode 100644
index 0000000..24aeaf8
--- /dev/null
+++ b/src/views/cms/articleV2/components/articleEdit.vue
@@ -0,0 +1,579 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="900"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑文章' : '添加文章'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 3, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 24, sm: 24, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-tabs type="card" v-model:active-key="active" @change="onChange">
+        <a-tab-pane tab="基本信息" key="base">
+          <a-form-item label="选择栏目" name="categoryId">
+            <SelectNavigsation
+              :data="data"
+              placeholder="请选择栏目"
+              style="width: 558px"
+              v-model:value="form.categoryName"
+              @done="chooseCategory"
+            />
+          </a-form-item>
+          <a-form-item label="文章标题" name="title">
+            <a-input
+              allow-clear
+              style="width: 558px"
+              placeholder="文章标题"
+              v-model:value="form.title"
+            />
+          </a-form-item>
+<!--          <a-form-item label="单位名称" name="unitName">-->
+<!--            <a-input-->
+<!--              allow-clear-->
+<!--              style="width: 558px"-->
+<!--              placeholder="单位名称，如(个)"-->
+<!--              v-model:value="form.unitName"-->
+<!--            />-->
+<!--          </a-form-item>-->
+<!--          <a-form-item label="文章价格" name="price">-->
+<!--            <a-input-number-->
+<!--              :placeholder="`文章价格`"-->
+<!--              style="width: 240px"-->
+<!--              v-model:value="form.price"-->
+<!--            />-->
+<!--            <div class="ele-text-placeholder">文章的实际购买金额，最低0.01</div>-->
+<!--          </a-form-item>-->
+<!--          <a-form-item label="市场价" name="salePrice">-->
+<!--            <a-input-number-->
+<!--              :placeholder="`市场价`"-->
+<!--              style="width: 240px"-->
+<!--              v-model:value="form.salePrice"-->
+<!--            />-->
+<!--            <div class="ele-text-placeholder">划线价仅用于文章页展示</div>-->
+<!--          </a-form-item>-->
+
+          <a-form-item label="文章图片" name="image">
+            <SelectFile
+              :placeholder="`请选择图片`"
+              :limit="1"
+              :data="images"
+              @done="chooseImage"
+              @del="onDeleteItem"
+            />
+<!--            <div class="ele-text-placeholder"-->
+<!--              >支持上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。</div-->
+<!--            >-->
+          </a-form-item>
+          <a-form-item label="上传附件" name="files">
+            <SelectFile
+              :placeholder="`请选择视频文件`"
+              :limit="9"
+              :data="files"
+              @done="chooseFile"
+              @del="onDeleteFile"
+            />
+          </a-form-item>
+          <a-form-item label="文章内容" name="content">
+            <!-- 编辑器 -->
+            <tinymce-editor
+              ref="editorRef"
+              class="content"
+              v-model:value="content"
+              :disabled="disabled"
+              :init="config"
+              placeholder="图片直接粘贴自动上传"
+              @paste="onPaste"
+            />
+          </a-form-item>
+          <a-form-item label="摘要">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              show-count
+              placeholder="请输入文章摘要"
+              @focus="onComments"
+              v-model:value="form.comments"
+            />
+          </a-form-item>
+          <a-form-item label="发布时间" name="createTime" v-if="isUpdate">
+            <a-date-picker
+              v-model:value="form.createTime"
+              show-time
+              placeholder="Select Time"
+              value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </a-form-item>
+          <a-form-item label="状态" name="status">
+            <a-radio-group v-model:value="form.status">
+              <a-radio :value="0">已发布</a-radio>
+              <a-radio :value="1">待审核</a-radio>
+            </a-radio-group>
+          </a-form-item>
+        </a-tab-pane>
+        <a-tab-pane tab="其他选项" key="other">
+          <a-form-item label="文章来源" name="source">
+            <source-select
+              v-model:value="form.source"
+              style="width: 180px"
+            />
+          </a-form-item>
+          <a-form-item label="虚拟阅读量" name="virtualViews" :extra="`用户看到的阅读量(${Number(form?.actualViews) + Number(form?.virtualViews)}) = 实际阅读量(${form.actualViews}) + 虚拟阅读量(${form.virtualViews})`">
+            <a-input-number
+              :min="0"
+              :max="999999999"
+              style="width: 180px"
+              placeholder="请输入虚拟阅读量"
+              v-model:value="form.virtualViews"
+            />
+          </a-form-item>
+        </a-tab-pane>
+      </a-tabs>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, htmlToText, uuid } from 'ele-admin-pro';
+  import { addArticle, updateArticle } from "@/api/cms/article";
+  import { Article } from '@/api/cms/article/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import { uploadFile, uploadOss } from "@/api/system/file";
+  import { SpecValue } from "@/api/shop/specValue/model";
+  import { Spec } from "@/api/shop/spec/model";
+  import { ArticleCategory } from "@/api/cms/category/model";
+  import { listArticleCategory } from "@/api/cms/category";
+  import { Navigation } from "@/api/cms/navigation/model";
+  import SourceSelect from "@/views/cms/article/dictionary/source-select.vue";
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Article | null;
+    // 商户ID
+    merchantId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+  const content = ref('');
+  const disabled = ref(false);
+  // 当前选项卡
+  const active = ref('base');
+
+  const spec = ref<SpecValue[]>([]);
+  const showSpecForm = ref(false);
+  const name = ref();
+  const value = ref();
+  const files = ref<ItemType[]>([]);
+  const category = ref<string[]>([]);
+  const takeaway = ref<ArticleCategory[]>([]);
+
+  // 用户信息
+  const form = reactive<Article>({
+    articleId: undefined,
+    // 封面图
+    image: '',
+    // 文章标题
+    title: '',
+    type: 0,
+    // 展现方式
+    showType: 10,
+    // 文章来源
+    source: undefined,
+    // 文章类型
+    categoryId: undefined,
+    // 栏目名称
+    categoryName: undefined,
+    // 文章内容
+    content: '',
+    // 虚拟阅读量
+    virtualViews: 0,
+    // 实际阅读量
+    actualViews: 0,
+    // 用户ID
+    userId: undefined,
+    // 所属门店ID
+    shopId: undefined,
+    files: '',
+    // 排序
+    sortNumber: 100,
+    // 备注
+    comments: undefined,
+    // 状态
+    status: 0,
+    // 创建时间
+    createTime: '',
+    // 更新时间
+    updateTime: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    title: [
+      {
+        required: true,
+        message: '请选择文章标题',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    image: [
+      {
+        required: true,
+        message: '请上传图片',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    // files: [
+    //   {
+    //     required: true,
+    //     message: '请上传轮播图',
+    //     type: 'string',
+    //     trigger: 'blur',
+    //     validator: async (_rule: RuleObject, value: string) => {
+    //       if (form.files == '') {
+    //         return Promise.reject('选择上传轮播图');
+    //       }
+    //       return Promise.resolve();
+    //     }
+    //   }
+    // ],
+    categoryId: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择栏目',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (!form.categoryId) {
+            return Promise.reject('请选择栏目');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    content: [
+      {
+        required: true,
+        type: "string",
+        message: "请输入文章内容",
+        trigger: "blur",
+        validator: async (_rule: RuleObject, value: string) => {
+          if (content.value == "") {
+            return Promise.reject("请输入文字内容");
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+  });
+
+  const onType = (index: number) => {
+    form.type = index;
+  };
+
+  // /* 搜索 */
+  // const chooseMerchantId = (item: Merchant) => {
+  //   form.merchantName = item.merchantName;
+  //   form.merchantId = item.merchantId;
+  // };
+  //
+  // const chooseArticleCategory = (item: ArticleCategory,value: any) => {
+  //   form.categoryId = value[1].value;
+  //   form.categoryParent = value[0].label;
+  //   form.categoryChildren = value[1].label;
+  // }
+  // const chooseTakeawayCategory = (item: ArticleCategory, value: any) => {
+  //   form.categoryParent = '店铺分类';
+  //   form.categoryChildren = value[0].label;
+  //   form.categoryId = item[0];
+  // }
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const chooseCategory = (data: Navigation) => {
+    form.categoryName = data.title
+    form.categoryId = data.navigationId
+  }
+
+  const onChange = (text: string) => {
+    // 加载文章多规格
+
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const onClose = (index) => {
+    spec.value.splice(index, 1);
+  };
+
+  const openSpecForm = () => {
+    showSpecForm.value = !showSpecForm.value;
+  };
+
+  const onComments = () => {
+    if (form.comments == undefined) {
+      form.comments = htmlToText(content.value)
+      form.comments = form.comments.slice(0, 120)
+    }
+  }
+
+  const onSpec = (row: Spec) => {
+    // form.specName = row.specName;
+    if(row.specValue){
+      spec.value = JSON.parse(row?.specValue);
+    }
+  }
+
+  // 新增规格
+  const addSpecValue = () => {
+    if (!name.value || !value.value) {
+      message.error(`请输入规格和规格值`);
+      return false;
+    }
+    const findIndex = spec.value.findIndex((d) => d.value == name.value);
+    if (findIndex == 0) {
+      message.error(`${name.value}已存在)`);
+      return false;
+    }
+    spec.value.push({
+      value: name.value,
+      detail: [value.value]
+    });
+    name.value = '';
+    value.value = '';
+    openSpecForm();
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    files.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.files = JSON.stringify(files.value.map(d => d.url))
+
+  };
+
+  const onDeleteFile = (index: number) => {
+    files.value.splice(index, 1);
+  };
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 500,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadOss(file).then(res => {
+        success(res.path)
+      }).catch((msg) => {
+        error(msg);
+      })
+    },
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*,.pdf');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (file.size / 1024 / 1024 > 200) {
+            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+            return;
+          }
+          if(file.type.startsWith('application/pdf')){
+            uploadOss(file).then(res => {
+              const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
+              content.value = content.value + addPath
+            })
+            return;
+          }
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+          uploadOss(file).then(res => {
+            callback(res.path)
+          });
+        }
+      };
+      input.click();
+    }
+  });
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+          .then((result) => {
+            const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateArticle : addArticle;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        category.value = [];
+        files.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          if(props.data.files){
+            const arr = JSON.parse(props.data.files)
+            arr.map((url:string) => {
+              files.value.push({
+                uid: uuid(),
+                url: url,
+                status: 'done'
+              })
+            })
+          }
+
+          // 文章分类
+          // if(props.data.categoryParent){
+          //   category.value.push(props.data.categoryParent);
+          // }
+          // if(props.data.categoryChildren){
+          //   category.value.push(props.data.categoryChildren);
+          // }
+          if (props.data.content){
+            content.value = props.data.content;
+          }
+          // 外卖文章分类
+          listArticleCategory({merchantId: props.merchantId}).then(list => {
+            takeaway.value = list
+          })
+
+          isUpdate.value = true;
+        } else {
+          spec.value = [];
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/cms/articleV2/components/search.vue b/src/views/cms/articleV2/components/search.vue
new file mode 100644
index 0000000..844a217
--- /dev/null
+++ b/src/views/cms/articleV2/components/search.vue
@@ -0,0 +1,147 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+    <a-radio-group v-model:value="type" @change="handleSearch">
+      <a-radio-button value="已发布"
+        >已发布({{ goodsCount?.totalNum }})</a-radio-button
+      >
+      <a-radio-button value="待审核"
+        >待审核({{ goodsCount?.totalNum2 }})</a-radio-button
+      >
+      <a-radio-button value="已驳回"
+        >已驳回({{ goodsCount?.totalNum3 }})</a-radio-button
+      >
+    </a-radio-group>
+    <!--    <SelectMerchant-->
+    <!--      :placeholder="`选择商户`"-->
+    <!--      class="input-item"-->
+    <!--      v-if="!merchantId"-->
+    <!--      v-model:value="where.merchantName"-->
+    <!--      @done="chooseMerchantId"-->
+    <!--    />-->
+    <SelectNavigsation
+      class="input-item"
+      :placeholder="`选择栏目`"
+      v-model:value="where.categoryName"
+      @done="chooseArticleCategory"
+    />
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      v-model:value="where.keywords"
+      @pressEnter="reload"
+      @search="reload"
+    />
+    <a-button @click="reset">重置</a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { ref, watch } from 'vue';
+  import { getCount } from '@/api/shop/goods';
+  import type { ArticleCount, ArticleParam } from '@/api/cms/article/model';
+  import useSearch from '@/utils/use-search';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { Navigation } from '@/api/cms/navigation/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+      merchantId?: number;
+    }>(),
+    {}
+  );
+
+  const type = ref<string>();
+  // 统计数据
+  const goodsCount = ref<ArticleCount>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<ArticleParam>({
+    articleId: undefined,
+    navigationId: undefined,
+    categoryId: undefined,
+    merchantId: undefined,
+    keywords: ''
+  });
+
+  const emit = defineEmits<{
+    (e: 'search', where?: ArticleParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  const handleSearch = (e) => {
+    const text = e.target.value;
+    resetFields();
+    if (text === '已发布') {
+      where.status = 1;
+    }
+    if (text === '待审核') {
+      where.status = 0;
+    }
+    if (text === '已驳回') {
+      where.status = 2;
+    }
+    emit('search', where);
+  };
+
+  const reload = () => {
+    getCount(where).then((data: any) => {
+      goodsCount.value = data;
+    });
+    emit('search', where);
+  };
+
+  /* 搜索 */
+  const chooseMerchantId = (item: Merchant) => {
+    where.merchantName = item.merchantName;
+    where.merchantId = item.merchantId;
+    reload();
+  };
+
+  const chooseArticleCategory = (category: Navigation) => {
+    where.categoryName = category.title;
+    where.navigationId = category.navigationId;
+    reload();
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    type.value = '';
+    reload();
+  };
+
+  // watch(
+  //   () => props.selection,
+  //   () => {}
+  // );
+  watch(
+    () => props.merchantId,
+    (id) => {
+      if (Number(id) > 0) {
+        where.merchantId = id;
+        reload();
+      } else {
+        where.merchantId = undefined;
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/cms/articleV2/index.vue b/src/views/cms/articleV2/index.vue
new file mode 100644
index 0000000..7210677
--- /dev/null
+++ b/src/views/cms/articleV2/index.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="articleId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          :scroll="{ x: 1200 }"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              :merchantId="merchantId"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'title'">
+              <a
+                @click="
+                  openSpmUrl(
+                    `/article/detail/${record.articleId}.html`,
+                    record,
+                    record.articleId
+                  )
+                "
+                >{{ record.title }}</a
+              >
+            </template>
+            <template v-if="column.key === 'type'">
+              <a-tag v-if="record.type === 0">虚拟文章</a-tag>
+              <a-tag v-if="record.type === 1">实物文章</a-tag>
+            </template>
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="80" />
+            </template>
+            <template v-if="column.key === 'salePrice'">
+              ￥{{ formatNumber(record.salePrice) }}
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag
+                :color="record.status == 0 ? 'green' : 'red'"
+                class="cursor-pointer"
+                @click="onUpdate(record)"
+                >{{ record.statusText }}</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <ArticleEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { uuid } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import ArticleEdit from './components/articleEdit.vue';
+  import {
+    pageArticle,
+    removeArticle,
+    removeBatchArticle
+  } from '@/api/cms/article';
+  import type { Article, ArticleParam } from '@/api/cms/article/model';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import router from '@/router';
+  import { openSpmUrl, openUrl, openUrlSpm } from '@/utils/common';
+  import { getSiteDomain } from '@/utils/domain';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Article[]>([]);
+  // 当前编辑数据
+  const current = ref<Article | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 店铺ID
+  const merchantId = ref<number>();
+  // 网站域名
+  const domain = getSiteDomain();
+  // 随机数
+  const token = ref<any>('');
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    if (merchantId.value) {
+      where.merchantId = merchantId.value;
+    }
+    return pageArticle({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'articleId',
+      key: 'articleId',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '文章标题',
+      dataIndex: 'title',
+      key: 'title'
+    },
+    {
+      title: '封面图',
+      dataIndex: 'image',
+      key: 'image',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '所属栏目',
+      dataIndex: 'categoryId',
+      key: 'categoryId',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '实际阅读量',
+      dataIndex: 'actualViews',
+      key: 'actualViews',
+      sorter: true,
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '虚拟阅读量',
+      dataIndex: 'virtualViews',
+      key: 'virtualViews',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '推荐',
+      dataIndex: 'recommend',
+      key: 'recommend',
+      sorter: true,
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      sorter: true,
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '排序号',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      sorter: true,
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 180,
+      sorter: true
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: ArticleParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Article) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  const onUpdate = (row?: Article) => {
+    // const isShow = row?.isShow == 0 ? 1 : 0;
+    // updateArticle({ ...row, isShow }).then((msg) => {
+    //   message.success(msg);
+    //   reload();
+    // });
+  };
+
+  /* 删除单个 */
+  const remove = (row: Article) => {
+    const hide = message.loading('请求中..', 0);
+    removeArticle(row.articleId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchArticle(selection.value.map((d) => d.articleId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Article) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  watch(
+    () => router.currentRoute.value.params.id,
+    (id) => {
+      merchantId.value = Number(id);
+      token.value = uuid();
+      reload();
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticleV2'
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/cms/category/index.vue b/src/views/cms/category/index.vue
index 81cd11e..cc4b6cf 100644
--- a/src/views/cms/category/index.vue
+++ b/src/views/cms/category/index.vue
@@ -66,9 +66,16 @@
               style="margin-right: 10px"
               v-if="record.image"
             />
-            <a @click="openPreview(`/article/` + record.categoryId)">{{
-              record.title
-            }}</a>
+            <a
+              @click="
+                openSpmUrl(
+                  `/article/${record.categoryId}`,
+                  record,
+                  record.categoryId
+                )
+              "
+              >{{ record.title }}</a
+            >
           </template>
           <template v-if="column.key === 'showIndex'">
             <a-space @click="onShowIndex(record)">
@@ -153,7 +160,7 @@
     ArticleCategory,
     ArticleCategoryParam
   } from '@/api/cms/category/model';
-  import { openNew, openPreview } from '@/utils/common';
+  import { openNew, openPreview, openSpmUrl } from '@/utils/common';
   import { getSiteInfo } from '@/api/layout';
 
   // 表格实例
diff --git a/src/views/cms/components/components/componentsEdit.vue b/src/views/cms/components/components/componentsEdit.vue
new file mode 100644
index 0000000..531f2d5
--- /dev/null
+++ b/src/views/cms/components/components/componentsEdit.vue
@@ -0,0 +1,252 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑组件' : '添加组件'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="组件标题" name="title">
+        <a-input
+          allow-clear
+          placeholder="请输入组件标题"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item label="关联导航ID" name="navigationId">
+        <a-input
+          allow-clear
+          placeholder="请输入关联导航ID"
+          v-model:value="form.navigationId"
+        />
+      </a-form-item>
+      <a-form-item label="组件类型" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入组件类型"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="页面关键词" name="keywords">
+        <a-input
+          allow-clear
+          placeholder="请输入页面关键词"
+          v-model:value="form.keywords"
+        />
+      </a-form-item>
+      <a-form-item label="页面描述" name="description">
+        <a-input
+          allow-clear
+          placeholder="请输入页面描述"
+          v-model:value="form.description"
+        />
+      </a-form-item>
+      <a-form-item label="组件路径" name="path">
+        <a-input
+          allow-clear
+          placeholder="请输入组件路径"
+          v-model:value="form.path"
+        />
+      </a-form-item>
+      <a-form-item label="组件图标" name="icon">
+        <a-input
+          allow-clear
+          placeholder="请输入组件图标"
+          v-model:value="form.icon"
+        />
+      </a-form-item>
+      <a-form-item label="用户ID" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户ID"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0正常, 1冻结" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addComponents, updateComponents } from '@/api/cms/components';
+  import { Components } from '@/api/cms/components/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Components | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<Components>({
+    id: undefined,
+    title: undefined,
+    navigationId: undefined,
+    type: undefined,
+    keywords: undefined,
+    description: undefined,
+    path: undefined,
+    icon: undefined,
+    userId: undefined,
+    sortNumber: undefined,
+    comments: undefined,
+    status: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    componentsId: undefined,
+    componentsName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    componentsName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写组件名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateComponents : addComponents;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/cms/components/components/search.vue b/src/views/cms/components/components/search.vue
new file mode 100644
index 0000000..82fea9d
--- /dev/null
+++ b/src/views/cms/components/components/search.vue
@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/cms/components/index.vue b/src/views/cms/components/index.vue
new file mode 100644
index 0000000..ce01b73
--- /dev/null
+++ b/src/views/cms/components/index.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="componentsId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <ComponentsEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import ComponentsEdit from './components/componentsEdit.vue';
+  import { pageComponents, removeComponents, removeBatchComponents } from '@/api/cms/components';
+  import type { Components, ComponentsParam } from '@/api/cms/components/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Components[]>([]);
+  // 当前编辑数据
+  const current = ref<Components | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageComponents({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '组件标题',
+      dataIndex: 'title',
+      key: 'title',
+      align: 'center',
+    },
+    {
+      title: '关联导航ID',
+      dataIndex: 'navigationId',
+      key: 'navigationId',
+      align: 'center',
+    },
+    {
+      title: '组件类型',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+    },
+    {
+      title: '页面关键词',
+      dataIndex: 'keywords',
+      key: 'keywords',
+      align: 'center',
+    },
+    {
+      title: '页面描述',
+      dataIndex: 'description',
+      key: 'description',
+      align: 'center',
+    },
+    {
+      title: '组件路径',
+      dataIndex: 'path',
+      key: 'path',
+      align: 'center',
+    },
+    {
+      title: '组件图标',
+      dataIndex: 'icon',
+      key: 'icon',
+      align: 'center',
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '排序(数字越小越靠前)',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '状态, 0正常, 1冻结',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: ComponentsParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Components) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Components) => {
+    const hide = message.loading('请求中..', 0);
+    removeComponents(row.componentsId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchComponents(selection.value.map((d) => d.componentsId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Components) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Components'
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/cms/designRecord/components/designRecordEdit.vue b/src/views/cms/designRecord/components/designRecordEdit.vue
new file mode 100644
index 0000000..6ed628d
--- /dev/null
+++ b/src/views/cms/designRecord/components/designRecordEdit.vue
@@ -0,0 +1,260 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑页面组件表' : '添加页面组件表'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="关联导航ID" name="navigationId">
+        <a-input
+          allow-clear
+          placeholder="请输入关联导航ID"
+          v-model:value="form.navigationId"
+        />
+      </a-form-item>
+      <a-form-item label="组件" name="title">
+        <a-input
+          allow-clear
+          placeholder="请输入组件"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item label="组件标识" name="dictCode">
+        <a-input
+          allow-clear
+          placeholder="请输入组件标识"
+          v-model:value="form.dictCode"
+        />
+      </a-form-item>
+      <a-form-item label="组件样式" name="styles">
+        <a-input
+          allow-clear
+          placeholder="请输入组件样式"
+          v-model:value="form.styles"
+        />
+      </a-form-item>
+      <a-form-item label="页面关键词" name="keywords">
+        <a-input
+          allow-clear
+          placeholder="请输入页面关键词"
+          v-model:value="form.keywords"
+        />
+      </a-form-item>
+      <a-form-item label="页面描述" name="description">
+        <a-input
+          allow-clear
+          placeholder="请输入页面描述"
+          v-model:value="form.description"
+        />
+      </a-form-item>
+      <a-form-item label="页面路由地址" name="path">
+        <a-input
+          allow-clear
+          placeholder="请输入页面路由地址"
+          v-model:value="form.path"
+        />
+      </a-form-item>
+      <a-form-item label="缩列图" name="photo">
+        <a-input
+          allow-clear
+          placeholder="请输入缩列图"
+          v-model:value="form.photo"
+        />
+      </a-form-item>
+      <a-form-item label="用户ID" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户ID"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0正常, 1冻结" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addDesignRecord, updateDesignRecord } from '@/api/cms/designRecord';
+  import { DesignRecord } from '@/api/cms/designRecord/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: DesignRecord | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<DesignRecord>({
+    id: undefined,
+    navigationId: undefined,
+    title: undefined,
+    dictCode: undefined,
+    styles: undefined,
+    keywords: undefined,
+    description: undefined,
+    path: undefined,
+    photo: undefined,
+    userId: undefined,
+    sortNumber: undefined,
+    comments: undefined,
+    status: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    designRecordId: undefined,
+    designRecordName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    designRecordName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写页面组件表名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateDesignRecord : addDesignRecord;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if(props.data.image){
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            })
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/cms/designRecord/components/search.vue b/src/views/cms/designRecord/components/search.vue
new file mode 100644
index 0000000..82fea9d
--- /dev/null
+++ b/src/views/cms/designRecord/components/search.vue
@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/cms/designRecord/index.vue b/src/views/cms/designRecord/index.vue
new file mode 100644
index 0000000..bf141f3
--- /dev/null
+++ b/src/views/cms/designRecord/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="designRecordId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <DesignRecordEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import DesignRecordEdit from './components/designRecordEdit.vue';
+  import { pageDesignRecord, removeDesignRecord, removeBatchDesignRecord } from '@/api/cms/designRecord';
+  import type { DesignRecord, DesignRecordParam } from '@/api/cms/designRecord/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<DesignRecord[]>([]);
+  // 当前编辑数据
+  const current = ref<DesignRecord | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageDesignRecord({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '关联导航ID',
+      dataIndex: 'navigationId',
+      key: 'navigationId',
+      align: 'center',
+    },
+    {
+      title: '组件',
+      dataIndex: 'title',
+      key: 'title',
+      align: 'center',
+    },
+    {
+      title: '组件标识',
+      dataIndex: 'dictCode',
+      key: 'dictCode',
+      align: 'center',
+    },
+    {
+      title: '组件样式',
+      dataIndex: 'styles',
+      key: 'styles',
+      align: 'center',
+    },
+    {
+      title: '页面关键词',
+      dataIndex: 'keywords',
+      key: 'keywords',
+      align: 'center',
+    },
+    {
+      title: '页面描述',
+      dataIndex: 'description',
+      key: 'description',
+      align: 'center',
+    },
+    {
+      title: '页面路由地址',
+      dataIndex: 'path',
+      key: 'path',
+      align: 'center',
+    },
+    {
+      title: '缩列图',
+      dataIndex: 'photo',
+      key: 'photo',
+      align: 'center',
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '排序(数字越小越靠前)',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '状态, 0正常, 1冻结',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: DesignRecordParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: DesignRecord) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: DesignRecord) => {
+    const hide = message.loading('请求中..', 0);
+    removeDesignRecord(row.designRecordId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchDesignRecord(selection.value.map((d) => d.designRecordId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: DesignRecord) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DesignRecord'
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/cms/domain/index.vue b/src/views/cms/domain/index.vue
index fd10e29..6d87571 100644
--- a/src/views/cms/domain/index.vue
+++ b/src/views/cms/domain/index.vue
@@ -24,7 +24,7 @@
               <a
                 v-if="record.status == 1"
                 class="ele-text-success"
-                @click="openPreview(`http://${record.domain}`)"
+                @click="openUrl(`https://${record.domain}`)"
                 >{{ record.domain }}</a
               >
               <span v-else>
@@ -96,7 +96,7 @@
     updateDomain
   } from '@/api/cms/domain';
   import type { Domain, DomainParam } from '@/api/cms/domain/model';
-  import { openPreview } from '@/utils/common';
+  import { openPreview, openUrl } from "@/utils/common";
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
diff --git a/src/views/cms/link/index.vue b/src/views/cms/link/index.vue
index 59de999..0825357 100644
--- a/src/views/cms/link/index.vue
+++ b/src/views/cms/link/index.vue
@@ -22,7 +22,7 @@
               :src="record.icon"
               style="margin-right: 5px"
             />
-            <a @click="openUrl(record.url)">{{ record.name }}</a>
+            <a @click="openSpmUrl(record.url)">{{ record.name }}</a>
           </template>
           <template v-if="column.key === 'action'">
             <a-space>
@@ -59,7 +59,7 @@
   import { pageLink, removeLink } from '@/api/cms/link';
   import type { Link, LinkParam } from '@/api/cms/link/model';
   import { Menu } from '@/api/system/menu/model';
-  import { openNew, openUrl } from '@/utils/common';
+  import { openNew, openSpmUrl, openUrl } from '@/utils/common';
   import LinkSearch from './components/link-search.vue';
 
   // 表格实例
diff --git a/src/views/cms/navigation/components/components.vue b/src/views/cms/navigation/components/components.vue
new file mode 100644
index 0000000..5250896
--- /dev/null
+++ b/src/views/cms/navigation/components/components.vue
@@ -0,0 +1,276 @@
+<template>
+  <a-drawer
+    width="70%"
+    :visible="visible"
+    :title="`${data?.title}`"
+    placement="left"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :confirm-loading="loading"
+    :footer="null"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="navigationId"
+      :columns="columns"
+      :datasource="datasource"
+      :customRow="customRow"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <search
+          @search="reload"
+          :selection="selection"
+          :categoryId="categoryId"
+          @add="openEdit"
+          @remove="removeBatch"
+          @batchMove="openMove"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'isStatus'">
+          <a-tag v-if="record.isStatus === 1" color="green">开启</a-tag>
+          <a-tag v-if="record.isStatus === 2" color="red">关闭</a-tag>
+        </template>
+        <template v-if="column.key === 'isFree'">
+          <a-tag v-if="record.isFree === 1" color="green">免费</a-tag>
+          <a-tag v-if="record.isFree === 2" color="orange">收费</a-tag>
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
+            <a-divider type="vertical" />
+            <a @click="openEdit(record)">编辑</a>
+            <a-divider type="vertical" />
+            <a-popconfirm
+              title="确定要删除此记录吗？"
+              @confirm="remove(record)"
+            >
+              <a class="ele-text-danger">删除</a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+    <!-- 编辑弹窗 -->
+    <DesignRecordEdit
+      v-model:visible="showEdit"
+      :merchant="data"
+      :categoryId="categoryId"
+      :data="current"
+      @done="reload"
+    />
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    ArrowUpOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { EleProTable } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import DesignRecordEdit from './components/designRecordEdit.vue';
+  import {
+    removeDesignRecord,
+    removeBatchDesignRecord,
+    updateDesignRecord
+  } from '@/api/cms/designRecord';
+  import type { DesignRecord } from '@/api/cms/designRecord/model';
+  import { Navigation } from '@/api/cms/navigation/model';
+  import { pageDesignRecord } from '@/api/cms/designRecord';
+  import { DesignRecordParam } from '@/api/cms/designRecord/model';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    categoryId?: number | null;
+    // 导航信息
+    data?: Navigation;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  // 表格选中数据
+  const selection = ref<DesignRecord[]>([]);
+  // 当前编辑数据
+  const current = ref<DesignRecord | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    where.navigationId = props.categoryId;
+    return pageDesignRecord({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'navigationId',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '组件',
+      dataIndex: 'title',
+      key: 'title'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: DesignRecordParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: DesignRecord) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: DesignRecord) => {
+    const hide = message.loading('请求中..', 0);
+    removeDesignRecord(row.periodId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchDesignRecord(selection.value.map((d) => d.periodId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 上移
+  const moveUp = (row?: DesignRecord) => {
+    updateDesignRecord({
+      periodId: row?.periodId,
+      sortNumber: Number(row?.sortNumber) - 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: DesignRecord) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  watch(
+    () => props.categoryId,
+    (categoryId) => {
+      if (categoryId) {
+        reload();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DesignRecord'
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/cms/navigation/components/components/designRecordEdit.vue b/src/views/cms/navigation/components/components/designRecordEdit.vue
new file mode 100644
index 0000000..043c45f
--- /dev/null
+++ b/src/views/cms/navigation/components/components/designRecordEdit.vue
@@ -0,0 +1,250 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑组件' : '添加组件'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <!--      <a-form-item label="上级" name="parentId">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入上级id, 0是顶级"-->
+      <!--          v-model:value="form.parentId"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="选择组件" name="dictCode">
+        <SelectDictDictionary
+          dict-code="componentsType"
+          :placeholder="`选择组件`"
+          v-model:value="form.dictCode"
+          @done="chooseComponents"
+        />
+      </a-form-item>
+      <!-- 公共字段 -->
+      <a-form-item label="标题" name="title">
+        <a-input allow-clear placeholder="标题" v-model:value="form.title" />
+      </a-form-item>
+      <a-form-item label="样式" name="styles">
+        <a-input allow-clear placeholder="样式" v-model:value="form.styles" />
+      </a-form-item>
+      <!-- 卡片 -->
+      <!--      <template v-if="form.dictCode == 'Card'">-->
+      <!--        <a-form-item label="标题" name="title">-->
+      <!--          <a-input allow-clear placeholder="标题" v-model:value="form.title" />-->
+      <!--        </a-form-item>-->
+      <!--      </template>-->
+      <!--      <a-form-item label="缩列图" name="photo">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入缩列图"-->
+      <!--          v-model:value="form.photo"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="用户ID" name="userId">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入用户ID"-->
+      <!--          v-model:value="form.userId"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">-->
+      <!--        <a-input-number-->
+      <!--          :min="0"-->
+      <!--          :max="9999"-->
+      <!--          class="ele-fluid"-->
+      <!--          placeholder="请输入排序号"-->
+      <!--          v-model:value="form.sortNumber"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="备注" name="comments">-->
+      <!--        <a-textarea-->
+      <!--          :rows="4"-->
+      <!--          :maxlength="200"-->
+      <!--          placeholder="请输入描述"-->
+      <!--          v-model:value="form.comments"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="状态" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addDesignRecord, updateDesignRecord } from '@/api/cms/designRecord';
+  import { DesignRecord } from '@/api/cms/designRecord/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+  import { DictionaryData } from '@/api/system/dictionary-data/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: DesignRecord | null;
+    // 导航ID
+    categoryId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<DesignRecord>({
+    id: undefined,
+    pageId: undefined,
+    parentId: undefined,
+    title: undefined,
+    styles: '',
+    keywords: undefined,
+    description: undefined,
+    path: undefined,
+    photo: undefined,
+    userId: undefined,
+    sortNumber: undefined,
+    comments: undefined,
+    status: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    designRecordId: undefined,
+    designRecordName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    dictCode: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择组件',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const chooseComponents = (data: DictionaryData) => {
+    form.title = data.dictDataName;
+    form.dictCode = data.dictDataCode;
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          navigationId: props.categoryId
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateDesignRecord
+          : addDesignRecord;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/cms/navigation/components/components/search.vue b/src/views/cms/navigation/components/components/search.vue
new file mode 100644
index 0000000..7e6a37b
--- /dev/null
+++ b/src/views/cms/navigation/components/components/search.vue
@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加组件</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { watch } from 'vue';
+  import { DesignParam } from '@/api/cms/design/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: DesignParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/cms/navigation/components/design-edit.vue b/src/views/cms/navigation/components/design-edit.vue
index 78272f1..cbd4f81 100644
--- a/src/views/cms/navigation/components/design-edit.vue
+++ b/src/views/cms/navigation/components/design-edit.vue
@@ -1,382 +1,394 @@
 <!-- 编辑弹窗 -->
 <template>
-  <ele-modal
-    :width="1000"
-    :visible="visible"
-    :maskClosable="false"
-    :maxable="true"
-    :title="isUpdate ? '编辑内容' : '添加内容'"
-    :body-style="{ paddingBottom: '28px' }"
-    @update:visible="updateVisible"
-    @ok="save"
-  >
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      :label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }"
-      :wrapper-col="
+    <ele-modal
+      :width="1000"
+      :visible="visible"
+      :maskClosable="false"
+      :maxable="true"
+      :title="isUpdate ? '页面设置' : '页面设置'"
+      :body-style="{ paddingBottom: '28px' }"
+      @update:visible="updateVisible"
+      @ok="save"
+    >
+      <a-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }"
+        :wrapper-col="
         styleResponsive ? { md: 21, sm: 19, xs: 24 } : { flex: '1' }
       "
-    >
-      <a-form-item label="页面名称" name="name">
-        <a-input
-          allow-clear
-          :maxlength="100"
-          placeholder="关于我们"
-          v-model:value="form.name"
-        />
-      </a-form-item>
-      <a-form-item label="路由地址" name="path">
-        <a-input
-          allow-clear
-          :maxlength="100"
-          placeholder="/about"
-          v-model:value="form.path"
-        />
-      </a-form-item>
-      <a-form-item label="组件路径" name="component">
-        <a-input
-          allow-clear
-          :maxlength="100"
-          placeholder="请输入组件路径"
-          v-model:value="form.component"
-        />
-      </a-form-item>
-      <a-form-item label="Banner" name="photo">
-        <SelectFile
-          :placeholder="`请选择图片`"
-          :limit="1"
-          :data="images"
-          @done="chooseFile"
-          @del="onDeleteItem"
-        />
-<!--        <ele-image-upload-->
-<!--          v-model:value="images"-->
-<!--          :limit="1"-->
-<!--          :drag="true"-->
-<!--          :upload-handler="uploadHandler"-->
-<!--          @upload="onUpload"-->
-<!--        />-->
-      </a-form-item>
-      <a-form-item label="页面内容" name="content">
-        <!-- 编辑器 -->
-        <div class="content">
-          <tinymce-editor
-            v-model:value="content"
-            :disabled="disabled"
-            :init="config"
-            placeholder="图片直接粘贴自动上传"
-            @paste="onPaste"
+      >
+        <a-form-item label="Banner" name="photo">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
           />
-        </div>
-      </a-form-item>
-      <a-form-item label="排序号" name="sortNumber">
-        <a-input-number
-          :min="0"
-          :max="9999"
-          class="ele-fluid"
-          placeholder="请输入排序号"
-          v-model:value="form.sortNumber"
-        />
-      </a-form-item>
-      <a-form-item label="状态" name="status">
-        <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">开启</a-radio>
-          <a-radio :value="1">关闭</a-radio>
-        </a-radio-group>
-      </a-form-item>
-    </a-form>
-  </ele-modal>
+        </a-form-item>
+        <a-form-item label="网站SEO">
+          <a-space direction="vertical"
+                   class="w-full">
+            <a-input
+              allow-clear
+              :maxlength="100"
+              placeholder="Title"
+              v-model:value="form.name"
+            />
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="Description"
+              v-model:value="form.description"
+            />
+            <a-input
+              allow-clear
+              :maxlength="100"
+              placeholder="Keywords"
+              v-model:value="form.keywords"
+            />
+          </a-space>
+        </a-form-item>
+        <a-form-item label="购买链接">
+          <a-space direction="vertical"
+                   class="w-full">
+            <a-input
+              allow-clear
+              :maxlength="100"
+              placeholder="购买链接 buyUrl"
+              v-model:value="form.buyUrl"
+            />
+          </a-space>
+        </a-form-item>
+        <a-form-item label="页面样式">
+          <a-space direction="vertical"
+                   class="w-full">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="Tailwind CSS风格"
+              v-model:value="form.styles"
+            />
+          </a-space>
+        </a-form-item>
+        <a-form-item label="页面内容" name="content">
+          <!-- 编辑器 -->
+          <div class="content">
+            <tinymce-editor
+              v-model:value="content"
+              :disabled="disabled"
+              :init="config"
+              placeholder="图片直接粘贴自动上传"
+              @paste="onPaste"
+            />
+          </div>
+        </a-form-item>
+        <a-form-item label="状态" name="status">
+          <a-radio-group v-model:value="form.status">
+            <a-radio :value="0">开启</a-radio>
+            <a-radio :value="1">关闭</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </ele-modal>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { message } from 'ant-design-vue';
-  import { uuid} from 'ele-admin-pro';
-  import { addDesign, updateDesign } from '@/api/cms/design';
-  import { Design } from '@/api/cms/design/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { FormInstance, Rule } from 'ant-design-vue/es/form';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import {uploadFile, uploadOss} from '@/api/system/file';
-  import TinymceEditor from "@/components/TinymceEditor/index.vue";
-  import useFormData from "@/utils/use-form-data";
-  import {removeSiteInfoCache} from "@/api/cms/website";
-  import {FileRecord} from "@/api/system/file/model";
+import { ref, reactive, watch } from 'vue';
+import { message } from 'ant-design-vue';
+import { uuid} from 'ele-admin-pro';
+import { addDesign, updateDesign } from '@/api/cms/design';
+import { Design } from '@/api/cms/design/model';
+import { useThemeStore } from '@/store/modules/theme';
+import { storeToRefs } from 'pinia';
+import { FormInstance, Rule } from 'ant-design-vue/es/form';
+import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+import {uploadFile, uploadOss} from '@/api/system/file';
+import TinymceEditor from "@/components/TinymceEditor/index.vue";
+import useFormData from "@/utils/use-form-data";
+import {removeSiteInfoCache} from "@/api/cms/website";
+import {FileRecord} from "@/api/system/file/model";
 
-  // 是否是修改
-  const isUpdate = ref(false);
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
-  const disabled = ref(false);
-  // 编辑器内容，双向绑定
-  const content = ref<any>('');
+// 是否是修改
+const isUpdate = ref(false);
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const { styleResponsive } = storeToRefs(themeStore);
+const disabled = ref(false);
+// 编辑器内容，双向绑定
+const content = ref<any>('');
 
-  const props = defineProps<{
-    // 弹窗是否打开
-    visible: boolean;
-    // 修改回显的数据
-    data?: Design | null;
-  }>();
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  // 修改回显的数据
+  data?: Design | null;
+  //
+  categoryId?: number;
+}>();
 
-  const emit = defineEmits<{
-    (e: 'done'): void;
-    (e: 'update:visible', visible: boolean): void;
-  }>();
+const emit = defineEmits<{
+  (e: 'done'): void;
+  (e: 'update:visible', visible: boolean): void;
+}>();
 
-  // 提交状态
-  const loading = ref(false);
-  // 已上传数据
-  const images = ref<ItemType[]>([]);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
+// 提交状态
+const loading = ref(false);
+// 已上传数据
+const images = ref<ItemType[]>([]);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
 
-  // 表单数据
-  const { form, resetFields, assignFields } = useFormData<Design>({
-    pageId: undefined,
-    name: '',
-    images: '',
-    path: '',
-    component: '/custom/index',
-    content: '',
-    type: '',
-    status: 0,
-    comments: '',
-    sortNumber: 100,
-    navigationId: undefined
-  });
+// 表单数据
+const { form, resetFields, assignFields } = useFormData<Design>({
+  pageId: undefined,
+  name: '',
+  images: '',
+  path: '',
+  component: '/custom/index',
+  description: '',
+  keywords: '',
+  content: '',
+  buyUrl: '',
+  type: '',
+  styles: '',
+  status: 0,
+  comments: '',
+  sortNumber: 100,
+  navigationId: undefined
+});
 
-  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
-  const config = ref({
-    height: 500,
-    images_upload_handler: (blobInfo, success, error) => {
-      const file = blobInfo.blob();
-      const formData = new FormData();
-      formData.append('file', file, file.name);
-      uploadOss(file).then(res => {
-        success(res.url)
-      }).catch((msg) => {
-        error(msg);
-      })
-      return false;
-    },
-    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
-    file_picker_callback: (callback: any, _value: any, meta: any) => {
-      const input = document.createElement('input');
-      input.setAttribute('type', 'file');
-      // 设定文件可选类型
-      if (meta.filetype === 'image') {
-        input.setAttribute('accept', 'image/*');
-      } else if (meta.filetype === 'media') {
-        input.setAttribute('accept', 'video/*,.pdf');
+const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+const config = ref({
+  height: 500,
+  images_upload_handler: (blobInfo, success, error) => {
+    const file = blobInfo.blob();
+    const formData = new FormData();
+    formData.append('file', file, file.name);
+    uploadOss(file).then(res => {
+      success(res.url)
+    }).catch((msg) => {
+      error(msg);
+    })
+    return false;
+  },
+  // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+  file_picker_callback: (callback: any, _value: any, meta: any) => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    // 设定文件可选类型
+    if (meta.filetype === 'image') {
+      input.setAttribute('accept', 'image/*');
+    } else if (meta.filetype === 'media') {
+      input.setAttribute('accept', 'video/*,.pdf');
+    }
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file) {
+        return;
       }
-      input.onchange = () => {
-        const file = input.files?.[0];
-        if (!file) {
+      if (meta.filetype === 'media') {
+        if (file.size / 1024 / 1024 > 200) {
+          editorRef.value?.alert({ content: '大小不能超过 200MB' });
           return;
         }
-        if (meta.filetype === 'media') {
-          if (file.size / 1024 / 1024 > 200) {
-            editorRef.value?.alert({ content: '大小不能超过 200MB' });
-            return;
-          }
-          if (!file.type.startsWith('video/')) {
-            editorRef.value?.alert({ content: '只能选择视频文件' });
-            return;
-          }
-          uploadOss(file).then(res => {
-            callback(res.downloadUrl);
-          })
+        if (!file.type.startsWith('video/')) {
+          editorRef.value?.alert({ content: '只能选择视频文件' });
+          return;
         }
-      };
-      input.click();
-    }
-  });
-
-  /* 粘贴图片上传服务器并插入编辑器 */
-  const onPaste = (e) => {
-    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
-    let hasFile = false;
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].type.indexOf('image') !== -1) {
-        let file = items[i].getAsFile();
-        const item: ItemType = {
-          file,
-          uid: (file as any).lastModified,
-          name: file.name
-        };
-        uploadFile(<File>item.file)
-          .then((result) => {
-            const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
-            content.value = content.value + addPath
-          })
-          .catch((e) => {
-            message.error(e.message);
-          });
-        hasFile = true;
+        uploadOss(file).then(res => {
+          callback(res.downloadUrl);
+        })
       }
-    }
-    if (hasFile) {
-      e.preventDefault();
-    }
-  }
-
-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
-  };
-
-  // 表单验证规则
-  const rules = reactive<Record<string, Rule[]>>({
-    name: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写页面名称',
-        trigger: 'blur'
-      }
-    ],
-    path: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写路由地址',
-        trigger: 'blur'
-      }
-    ],
-    component: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写组件路径',
-        trigger: 'blur'
-      }
-    ]
-  });
-
-  /* 上传事件 */
-  const uploadHandler = (file: File) => {
-    const item: ItemType = {
-      file,
-      uid: (file as any).uid,
-      name: file.name
     };
-    if (file.type.startsWith('video')) {
-      if (file.size / 1024 / 1024 > 200) {
-        message.error('大小不能超过 200MB');
-        return;
-      }
-    }
-    if (file.type.startsWith('image')) {
-      if (file.size / 1024 / 1024 > 5) {
-        message.error('大小不能超过 5MB');
-        return;
-      }
-    }
+    input.click();
+  }
+});
 
-    onUpload(item);
-  };
-
-  // 上传文件
-  const onUpload = (item: any) => {
-    const { file } = item;
-    uploadFile(file)
-      .then((data) => {
-        form.photo = data.path;
-        images.value.push({
-          uid: data.id,
-          url:
-            file.type == 'video/mp4'
-              ? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png'
-              : data.path,
-          status: 'done'
+/* 粘贴图片上传服务器并插入编辑器 */
+const onPaste = (e) => {
+  const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+  let hasFile = false;
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].type.indexOf('image') !== -1) {
+      let file = items[i].getAsFile();
+      const item: ItemType = {
+        file,
+        uid: (file as any).lastModified,
+        name: file.name
+      };
+      uploadFile(<File>item.file)
+        .then((result) => {
+          const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
+          content.value = content.value + addPath
+        })
+        .catch((e) => {
+          message.error(e.message);
         });
-      })
-      .catch((e) => {
-        message.error(e.message);
-      });
+      hasFile = true;
+    }
+  }
+  if (hasFile) {
+    e.preventDefault();
+  }
+}
+
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit('update:visible', value);
+};
+
+// 表单验证规则
+const rules = reactive<Record<string, Rule[]>>({
+  name: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写页面名称',
+      trigger: 'blur'
+    }
+  ],
+  path: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写路由地址',
+      trigger: 'blur'
+    }
+  ],
+  component: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写组件路径',
+      trigger: 'blur'
+    }
+  ]
+});
+
+/* 上传事件 */
+const uploadHandler = (file: File) => {
+  const item: ItemType = {
+    file,
+    uid: (file as any).uid,
+    name: file.name
   };
-
-  const chooseFile = (data: FileRecord) => {
-    images.value.push({
-      uid: data.id,
-      url: data.downloadUrl,
-      status: 'done'
-    });
-    form.photo = data.downloadUrl;
-  }
-
-  const onDeleteItem = (index: number) => {
-    images.value.splice(index,1)
-    form.photo = '';
-  }
-
-
-  /* 保存编辑 */
-  const save = () => {
-    if (!formRef.value) {
+  if (file.type.startsWith('video')) {
+    if (file.size / 1024 / 1024 > 200) {
+      message.error('大小不能超过 200MB');
       return;
     }
-    formRef.value
-      .validate()
-      .then(() => {
-        loading.value = true;
-        const formData = {
-          ...form,
-          content: content.value
-        };
-        const saveOrUpdate = isUpdate.value ? updateDesign : addDesign;
-        saveOrUpdate(formData)
-          .then((msg) => {
-            loading.value = false;
-            message.success(msg);
-            updateVisible(false);
-            // 清除缓存
-            removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId'));
-            emit('done');
-          })
-          .catch((e) => {
-            loading.value = false;
-            message.error(e.message);
-          });
-      })
-      .catch(() => {});
-  };
+  }
+  if (file.type.startsWith('image')) {
+    if (file.size / 1024 / 1024 > 5) {
+      message.error('大小不能超过 5MB');
+      return;
+    }
+  }
 
-  watch(
-    () => props.visible,
-    (visible) => {
-      if (visible) {
-        content.value = ''
-        images.value = []
-        if (props.data) {
-          assignFields(props.data);
-          if(props.data.content){
-            content.value = props.data.content
-          }
-          if(props.data.photo){
-            images.value.push({
-              uid: uuid(),
-              url: props.data.photo,
-              status: 'done'
-            })
-          }
-          isUpdate.value = !!props.data.pageId;
-        } else {
-          isUpdate.value = false;
-          content.value = '';
-          resetFields();
+  onUpload(item);
+};
+
+// 上传文件
+const onUpload = (item: any) => {
+  const { file } = item;
+  uploadFile(file)
+    .then((data) => {
+      form.photo = data.path;
+      images.value.push({
+        uid: data.id,
+        url:
+          file.type == 'video/mp4'
+            ? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png'
+            : data.path,
+        status: 'done'
+      });
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+};
+
+const chooseFile = (data: FileRecord) => {
+  images.value.push({
+    uid: data.id,
+    url: data.downloadUrl,
+    status: 'done'
+  });
+  form.photo = data.downloadUrl;
+}
+
+const onDeleteItem = (index: number) => {
+  images.value.splice(index,1)
+  form.photo = '';
+}
+
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = {
+        ...form,
+        navigationId: props.categoryId,
+        content: content.value
+      };
+      const saveOrUpdate = isUpdate.value ? updateDesign : addDesign;
+      saveOrUpdate(formData)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          // 清除缓存
+          removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId'));
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+    })
+    .catch(() => {});
+};
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      content.value = ''
+      images.value = []
+      if (props.data) {
+        assignFields(props.data);
+        if(props.data.content){
+          content.value = props.data.content
         }
+        if(props.data.photo){
+          images.value.push({
+            uid: uuid(),
+            url: props.data.photo,
+            status: 'done'
+          })
+        }
+        isUpdate.value = !!props.data.pageId;
       } else {
+        isUpdate.value = false;
+        content.value = '';
         resetFields();
-        formRef.value?.clearValidate();
       }
-    },
-    { immediate: true }
-  );
+    } else {
+      resetFields();
+      formRef.value?.clearValidate();
+    }
+  },
+  { immediate: true }
+);
 </script>
 <style lang="less">
 .sdf{
diff --git a/src/views/cms/navigation/components/navigation-edit.vue b/src/views/cms/navigation/components/navigation-edit.vue
index e799148..c639b25 100644
--- a/src/views/cms/navigation/components/navigation-edit.vue
+++ b/src/views/cms/navigation/components/navigation-edit.vue
@@ -113,84 +113,104 @@
         <a-col
           v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
         >
-          <a-form-item label="位置" name="position">
-            <a-select
-              ref="select"
-              v-model:value="form.position"
-              style="width: 253px"
-            >
-              <a-select-option :value="1">顶部</a-select-option>
-              <a-select-option :value="2">底部</a-select-option>
-            </a-select>
+          <!--          <a-form-item label="模型" name="type">-->
+          <!--            <a-select-->
+          <!--              ref="select"-->
+          <!--              v-model:value="form.type"-->
+          <!--              style="width: 253px"-->
+          <!--              @change="onType"-->
+          <!--            >-->
+          <!--              <a-select-option :value="0">通用模型</a-select-option>-->
+          <!--              <a-select-option :value="1">单页内容</a-select-option>-->
+          <!--              <a-select-option :value="2">新闻分类</a-select-option>-->
+          <!--              <a-select-option :value="3">新闻详情</a-select-option>-->
+          <!--              <a-select-option :value="4">表单设计</a-select-option>-->
+          <!--              <a-select-option :value="5">知识文档</a-select-option>-->
+          <!--              <a-select-option :value="6">商品分类</a-select-option>-->
+          <!--              <a-select-option :value="7">商品详情</a-select-option>-->
+          <!--              <a-select-option :value="9">外部链接</a-select-option>-->
+          <!--            </a-select>-->
+          <!--          </a-form-item>-->
+          <!--          <a-form-item label="位置" name="position">-->
+          <!--            <a-radio-group v-model:value="form.position">-->
+          <!--              <a-radio :value="0">全部</a-radio>-->
+          <!--              <a-radio :value="1">顶部</a-radio>-->
+          <!--              <a-radio :value="2">底部</a-radio>-->
+          <!--            </a-radio-group>-->
+          <!--          </a-form-item>-->
+          <a-form-item label="位置" name="top">
+            <a-radio-group v-model:value="form.position" @change="onPosition">
+              <a-radio-button :value="0">不限</a-radio-button>
+              <a-radio-button :value="1">顶部</a-radio-button>
+              <a-radio-button :value="2">底部</a-radio-button>
+            </a-radio-group>
+            <!--            <a-space>-->
+            <!--              <a-switch-->
+            <!--                checked-children="显示"-->
+            <!--                un-checked-children="隐藏"-->
+            <!--                :checked="form.top === 0"-->
+            <!--                @update:checked="updateTopValue"-->
+            <!--              />-->
+            <!--              <a-switch-->
+            <!--                checked-children="显示"-->
+            <!--                un-checked-children="隐藏"-->
+            <!--                :checked="form.bottom === 0"-->
+            <!--                @update:checked="updateBottomValue"-->
+            <!--              />-->
+            <!--            </a-space>-->
           </a-form-item>
-          <a-form-item label="模型" name="type">
-            <a-select
-              ref="select"
-              v-model:value="form.type"
-              style="width: 253px"
-              @change="onType"
-            >
-              <a-select-option :value="0">通用模型</a-select-option>
-              <a-select-option :value="1">单页内容</a-select-option>
-              <a-select-option :value="2">新闻分类</a-select-option>
-              <a-select-option :value="3">新闻详情</a-select-option>
-              <a-select-option :value="4">表单设计</a-select-option>
-              <a-select-option :value="5">知识文档</a-select-option>
-              <a-select-option :value="6">商品分类</a-select-option>
-              <a-select-option :value="7">商品详情</a-select-option>
-              <a-select-option :value="9">外部链接</a-select-option>
-            </a-select>
+          <a-form-item label="状态" name="hide">
+            <a-space>
+              <a-switch
+                checked-children="显示"
+                un-checked-children="隐藏"
+                :checked="form.hide === 0"
+                @update:checked="updateHideValue"
+              />
+            </a-space>
           </a-form-item>
-          <a-form-item label="排序号" name="sortNumber">
+          <a-form-item label="排序" name="sortNumber">
             <a-input-number
               :min="0"
               :max="99999"
-              class="ele-fluid"
               placeholder="请输入排序号"
               v-model:value="form.sortNumber"
               @pressEnter="save"
             />
           </a-form-item>
-          <a-form-item label="是否展示" name="hide">
-            <a-switch
-              checked-children="是"
-              un-checked-children="否"
-              :checked="form.hide === 0"
-              @update:checked="updateHideValue"
-            />
-          </a-form-item>
-          <a-form-item label="菜单图标" name="icon">
+          <a-form-item label="图标" name="icon">
             <SelectFile
               :placeholder="`请选择图片`"
               :limit="1"
               :data="images"
-              :width="40"
+              :width="50"
+              :height="50"
               @done="chooseFile"
               @del="onDeleteItem"
             />
           </a-form-item>
         </a-col>
       </a-row>
-      <div style="margin-bottom: 22px">
-        <a-divider />
-      </div>
-      <a-form-item
-        label="备注"
-        name="comments"
-        :label-col="
-          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
-        "
-        :wrapper-col="
-          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
-        "
-      >
-        <a-textarea
-          :rows="4"
-          :maxlength="200"
-          placeholder="请输入备注信息"
-          v-model:value="form.comments"
-        />
-      </a-form-item>
+      <!--      <div style="margin-bottom: 22px">-->
+      <!--        <a-divider />-->
+      <!--      </div>-->
+      <!--      <a-form-item-->
+      <!--        label="备注"-->
+      <!--        name="comments"-->
+      <!--        :label-col="-->
+      <!--          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }-->
+      <!--        "-->
+      <!--        :wrapper-col="-->
+      <!--          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }-->
+      <!--        "-->
+      <!--      >-->
+      <!--        <a-textarea-->
+      <!--          :rows="4"-->
+      <!--          :maxlength="200"-->
+      <!--          placeholder="请输入备注信息"-->
+      <!--          v-model:value="form.comments"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
     </a-form>
   </ele-modal>
 </template>
@@ -257,6 +277,8 @@
     sortNumber: 100,
     hide: 0,
     position: 1,
+    top: 1,
+    bottom: 1,
     status: 0,
     pageId: 0,
     articleCategoryId: 0,
@@ -432,6 +454,21 @@
     form.icon = '';
   };
 
+  const onPosition = (index: number) => {
+    if (form.position == 0) {
+      form.top = 0;
+      form.bottom = 0;
+    }
+    if (form.position == 1) {
+      form.top = 0;
+      form.bottom = 1;
+    }
+    if (form.position == 2) {
+      form.top = 1;
+      form.bottom = 0;
+    }
+  };
+
   /* 保存编辑 */
   const save = () => {
     if (!formRef.value) {
@@ -443,10 +480,10 @@
         const navigationForm = {
           ...form
         };
-        if (form.path != '' && form.path?.charAt(0) != '/') {
-          message.error('路由必须以"/"开头');
-          return false;
-        }
+        // if (form.path != '' && form.path?.charAt(0) != '/') {
+        //   message.error('路由必须以"/"开头');
+        //   return false;
+        // }
         const saveOrUpdate = isUpdate.value ? updateNavigation : addNavigation;
         saveOrUpdate(navigationForm)
           .then((msg) => {
@@ -472,6 +509,14 @@
     form.hide = value ? 0 : 1;
   };
 
+  const updateTopValue = (value: boolean) => {
+    form.top = value ? 0 : 1;
+  };
+
+  const updateBottomValue = (value: boolean) => {
+    form.bottom = value ? 0 : 1;
+  };
+
   watch(
     () => props.visible,
     (visible) => {
diff --git a/src/views/cms/navigation/index.vue b/src/views/cms/navigation/index.vue
index 1462b5e..b322bf1 100644
--- a/src/views/cms/navigation/index.vue
+++ b/src/views/cms/navigation/index.vue
@@ -26,10 +26,10 @@
               <span>新建</span>
             </a-button>
             <a-button type="dashed" class="ele-btn-icon" @click="expandAll">
-              展开全部
+              展开
             </a-button>
             <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
-              折叠全部
+              折叠
             </a-button>
             <a-divider type="vertical" />
             <a-radio-group v-model:value="position" @change="reload">
@@ -82,7 +82,7 @@
               style="margin-right: 10px"
               v-if="record.image"
             />
-            <a v-if="!isDirectory(record)" @click="openPreview(record.path)">{{
+            <a v-if="!isDirectory(record)" @click="openSpmUrl(record.path)">{{
               record.title
             }}</a>
             <a v-else>{{ record.title }}</a>
@@ -92,13 +92,15 @@
             <span v-else></span>
           </template>
           <template v-if="column.key === 'position'">
-            <span v-if="record.position === 1" class="ele-text-placeholder"
-              >顶部</span
-            >
-            <span v-if="record.position === 2" class="ele-text-placeholder"
-              >底部</span
-            >
-            <span v-if="record.position === 0"></span>
+            <a-space>
+              <span v-if="record.top === 0" class="ele-text-placeholder"
+                >顶部</span
+              >
+              <span v-if="record.bottom === 0" class="ele-text-placeholder"
+                >底部</span
+              >
+              <span v-if="record.top === 0 || record.bottom === 0"></span>
+            </a-space>
           </template>
           <template v-if="column.key === 'hide'">
             <span v-if="record.hide === 0" class="ele-text-success">显示</span>
@@ -108,12 +110,14 @@
           </template>
           <template v-else-if="column.key === 'action'">
             <a-space>
+              <a class="text-fuchsia-300" @click="openLayout(record)">布局</a>
+              <a-divider type="vertical" />
+              <a class="text-gray-400" @click="openDesign(record)">设置</a>
+              <a-divider type="vertical" />
               <a @click="openEdit(null, record.navigationId)">添加</a>
               <a-divider type="vertical" />
               <a @click="openEdit(record)">修改</a>
               <a-divider type="vertical" />
-              <a @click="openDesign(record)">内容</a>
-              <a-divider type="vertical" />
               <a-popconfirm
                 placement="topRight"
                 :disabled="record.home == 1"
@@ -140,6 +144,14 @@
     <DesignEdit
       v-model:visible="showDesignEdit"
       :data="design"
+      :category-id="categoryId"
+      @done="reload"
+    />
+    <!-- 页面组件弹窗 -->
+    <Components
+      v-model:visible="showDesignRecordEdit"
+      :data="current"
+      :category-id="categoryId"
       @done="reload"
     />
   </div>
@@ -148,7 +160,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { message } from 'ant-design-vue/es';
-  import { ArrowUpOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
   import type {
     DatasourceFunction,
     ColumnItem,
@@ -164,16 +176,17 @@
   import type { EleProTable } from 'ele-admin-pro/es';
   import NavigationEdit from './components/navigation-edit.vue';
   import DesignEdit from './components/design-edit.vue';
+  import Components from './components/components.vue';
   import {
     listNavigation,
     removeNavigation,
     updateNavigation
   } from '@/api/cms/navigation';
   import type { Navigation, NavigationParam } from '@/api/cms/navigation/model';
-  import { openPreview } from '@/utils/common';
+  import { openPreview, openSpmUrl, openUrl } from '@/utils/common';
   import { getSiteInfo } from '@/api/layout';
-  import { getDesign } from '@/api/cms/design';
   import { Design } from '@/api/cms/design/model';
+  import { listDesign } from '@/api/cms/design';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -186,7 +199,7 @@
       width: 80
     },
     {
-      title: '菜单名称',
+      title: '栏目名称',
       dataIndex: 'title',
       key: 'title',
       showSorterTooltip: false,
@@ -238,14 +251,16 @@
       dataIndex: 'createTime',
       showSorterTooltip: false,
       ellipsis: true,
+      hideInTable: true,
       width: 180,
       customRender: ({ text }) => toDateString(text)
     },
     {
       title: '操作',
       key: 'action',
-      width: 200,
-      align: 'center'
+      width: 240,
+      align: 'center',
+      fixed: 'right'
     }
   ]);
 
@@ -257,8 +272,11 @@
   const showEdit = ref(false);
   // 编辑内容
   const showDesignEdit = ref(false);
+  // 页面组件
+  const showDesignRecordEdit = ref(false);
   // 上级分类id
   const parentId = ref<number>();
+  const categoryId = ref<number>();
   // 分类数据
   const navigationData = ref<Navigation[]>([]);
   // 表格展开的行
@@ -277,7 +295,17 @@
   const datasource: DatasourceFunction = ({ where }) => {
     where = {};
     where.title = searchText.value;
-    where.position = position.value;
+    // where.position = position.value;
+    where.top = 0;
+    where.bottom = undefined;
+    if (position.value == 1) {
+      where.top = 0;
+      where.bottom = undefined;
+    }
+    if (position.value == 2) {
+      where.top = undefined;
+      where.bottom = 0;
+    }
     where.isMpWeixin = false;
     return listNavigation({ ...where });
   };
@@ -322,16 +350,12 @@
   };
 
   const openDesign = (row?: Navigation) => {
-    // 设置默认值
-    design.value = {
+    listDesign({
       navigationId: row?.navigationId,
-      name: row?.title,
-      path: `/page-${row?.navigationId}.html`,
-      component: `/pages/custom/index`
-    };
-    getDesign(Number(row?.pageId))
+      limit: 1
+    })
       .then((res) => {
-        design.value = res;
+        design.value = res[0];
       })
       .catch(() => {})
       .finally(() => {
@@ -339,6 +363,12 @@
       });
   };
 
+  const openLayout = (row?: Navigation) => {
+    current.value = row ?? null;
+    categoryId.value = row?.navigationId;
+    showDesignRecordEdit.value = true;
+  };
+
   /* 删除单个 */
   const remove = (row: Navigation) => {
     if (row.children?.length) {
diff --git a/src/views/cms/website/components/websiteEdit.vue b/src/views/cms/website/components/websiteEdit.vue
index 29e4724..d21a9cb 100644
--- a/src/views/cms/website/components/websiteEdit.vue
+++ b/src/views/cms/website/components/websiteEdit.vue
@@ -92,12 +92,23 @@
         <span v-if="form.version === 30">永久授权</span>
       </a-form-item>
       <a-form-item label="状态" name="status">
-        <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">运行中</a-radio>
-          <a-radio :value="1">维护中</a-radio>
-          <a-radio :value="2">已关闭</a-radio>
+        <a-radio-group
+          v-model:value="form.status"
+          :disabled="form.status && form.status > 3"
+        >
+          <a-radio :value="1">运行中</a-radio>
+          <a-radio :value="2">维护中</a-radio>
+          <a-radio :value="3">已关闭</a-radio>
         </a-radio-group>
       </a-form-item>
+      <a-form-item v-if="form.status == 2" label="维护说明" name="statusText">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="状态说明"
+          v-model:value="form.statusText"
+        />
+      </a-form-item>
     </a-form>
   </ele-modal>
 </template>
@@ -158,7 +169,8 @@
     expirationTime: undefined,
     sortNumber: undefined,
     comments: undefined,
-    status: undefined
+    status: undefined,
+    statusText: undefined
   });
 
   const websiteType = ref<SelectProps['options']>([
@@ -279,7 +291,7 @@
             loading.value = false;
             message.success(msg);
             updateVisible(false);
-            localStorage.setItem('Domain',`${form.prefix}${form.domain}`);
+            localStorage.setItem('Domain', `${form.prefix}${form.domain}`);
             emit('done');
           })
           .catch((e) => {
diff --git a/src/views/cms/website/index.vue b/src/views/cms/website/index.vue
index 407eab1..20ae922 100644
--- a/src/views/cms/website/index.vue
+++ b/src/views/cms/website/index.vue
@@ -47,14 +47,16 @@
               <a-tag v-if="record.version === 30">永久授权</a-tag>
             </template>
             <template v-if="column.key === 'status'">
-              <a-tag v-if="record.status === 0" color="green">正常</a-tag>
-              <a-tag v-if="record.status === 1" color="red">已过期</a-tag>
+              <a-tag v-if="record.status === 0" color="red">未开通</a-tag>
+              <a-tag v-if="record.status === 1" color="green">运行中</a-tag>
+              <a-tag v-if="record.status === 2" color="orange">维护中</a-tag>
+              <a-tag v-if="record.status === 3" color="red">已关闭</a-tag>
+              <a-tag v-if="record.status === 4" color="red">已欠费停机</a-tag>
+              <a-tag v-if="record.status === 5" color="red">违规关停</a-tag>
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a @click="openUrl(`${record.prefix}${record.domain}`)">首页</a>
-                <a-divider type="vertical" />
-                <a @click="openUrl(record.adminUrl)">后台</a>
+                <a @click="openEdit(record)">编辑</a>
               </a-space>
             </template>
           </template>
@@ -138,7 +140,7 @@
       align: 'center'
     },
     {
-      title: '主域名',
+      title: '域名',
       dataIndex: 'domain',
       key: 'domain',
       align: 'center'
diff --git a/src/views/shop/goods/index.vue b/src/views/shop/goods/index.vue
index dc66b16..a6b8408 100644
--- a/src/views/shop/goods/index.vue
+++ b/src/views/shop/goods/index.vue
@@ -24,9 +24,12 @@
           </template>
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'goodsName'">
-              <a @click="openUrl(`${domain}/product/${record.goodsId}`)">{{
-                record.goodsName
-              }}</a>
+              <a
+                @click="
+                  openSpmUrl(`/product/${record.goodsId}.html`, record, record.goodsId)
+                "
+                >{{ record.goodsName }}</a
+              >
             </template>
             <template v-if="column.key === 'type'">
               <a-tag v-if="record.type === 0">虚拟商品</a-tag>
@@ -105,7 +108,7 @@
   import type { Goods, GoodsParam } from '@/api/shop/goods/model';
   import { formatNumber } from 'ele-admin-pro/es';
   import router from '@/router';
-  import { openUrl } from '@/utils/common';
+  import { openSpmUrl, openUrl } from '@/utils/common';
   import { getSiteDomain } from '@/utils/domain';
 
   // 表格实例
diff --git a/src/views/shop/goodsCategory/components/category-edit.vue b/src/views/shop/goodsCategory/components/category-edit.vue
index c023b50..0f105e5 100644
--- a/src/views/shop/goodsCategory/components/category-edit.vue
+++ b/src/views/shop/goodsCategory/components/category-edit.vue
@@ -9,6 +9,7 @@
     @update:visible="updateVisible"
     @ok="save"
   >
+    {{ form }}
     <a-form
       ref="formRef"
       :model="form"
diff --git a/src/views/shop/goodsCategory/index.vue b/src/views/shop/goodsCategory/index.vue
index d3aa73d..142c3f3 100644
--- a/src/views/shop/goodsCategory/index.vue
+++ b/src/views/shop/goodsCategory/index.vue
@@ -51,7 +51,11 @@
               style="margin-right: 10px"
               v-if="record.image"
             />
-            {{ record.title }}
+            <a
+              :href="`${domain}/product/${record.categoryId}`"
+              target="_blank"
+              >{{ record.title }}</a
+            >
           </template>
           <template v-if="column.key === 'showIndex'">
             <a-space @click="onShowIndex(record)">
@@ -148,10 +152,11 @@
     GoodsCategory,
     GoodsCategoryParam
   } from '@/api/shop/goodsCategory/model';
-  import { openNew, openPreview } from '@/utils/common';
+  import { openNew, openPreview, openUrl } from '@/utils/common';
   import { getSiteInfo } from '@/api/layout';
   import router from '@/router';
   import Search from './components/search.vue';
+  import { getSiteDomain } from '@/utils/domain';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -247,12 +252,12 @@
   const expandedRowKeys = ref<number[]>([]);
   const searchText = ref('');
   const tenantId = ref<number>();
-  const domain = ref<string>();
   const merchantId = ref<number>();
+  // 网站域名
+  const domain = getSiteDomain();
 
   getSiteInfo().then((data) => {
     tenantId.value = data.tenantId;
-    domain.value = data.domain;
   });
 
   // 表格数据源