diff --git a/src/api/common/consts.ts b/src/api/common/consts.ts
index ecde969..962a18c 100644
--- a/src/api/common/consts.ts
+++ b/src/api/common/consts.ts
@@ -1371,7 +1371,14 @@ export const RankNames = [
 ];
 
 export const LoginUrlState = {
-	NORMAL:1,
+	NORMAL: 1,
 	MAINTENANCE: 2,
-	WHITE_LIST:3,
-}
\ No newline at end of file
+	WHITE_LIST: 3,
+};
+
+export const BATTLE_PASS = {
+	Close: 'red',
+	Open: 'green',
+	Unopened: '#66b7cf',
+	PermanentClosed: 'grey',
+};
diff --git a/src/api/game/gameConfig.ts b/src/api/game/gameConfig.ts
index 17e4812..11ceeed 100644
--- a/src/api/game/gameConfig.ts
+++ b/src/api/game/gameConfig.ts
@@ -224,6 +224,14 @@ export function gameGMGetBattlePass(params: object) {
 	});
 }
 
+export function gameGMGetBattlePassLog(params: object) {
+	return request({
+		url: '/api/v1/game/battlePassLog/get',
+		method: 'get',
+		params: params,
+	});
+}
+
 export function gameGMCheckPeriodIdBattlePass(params: object) {
 	return request({
 		url: '/api/v1/game/battlePass/checkPeriodId',
diff --git a/src/utils/countdownMsg.ts b/src/utils/countdownMsg.ts
new file mode 100644
index 0000000..7d911b5
--- /dev/null
+++ b/src/utils/countdownMsg.ts
@@ -0,0 +1,48 @@
+// 在 Vue 组件的 setup 或普通方法中使用
+import { ElMessageBox } from 'element-plus';
+import { nextTick } from 'vue';
+
+export function showCountdownConfirm(message, title = '提示', confirmText = '确定', cancelText = '取消', timeout = 5) {
+	return new Promise((resolve) => {
+		let countdown = timeout;
+		let timer = null;
+
+		// 自定义消息内容（包含确认和取消按钮）
+		ElMessageBox.confirm(message, title, {
+			confirmButtonText: countdown + 's后' + confirmText,
+			cancelButtonText: cancelText,
+			type: 'warning',
+			confirmButtonClass: 'countdown-confirm',
+			showClose: false,
+			dangerouslyUseHTMLString: true,
+			// 关闭前的回调，会阻止关闭操作
+			beforeClose: (action, instance, done) => {
+				// 当提交操作时执行后面的步骤
+				if (action !== 'confirm') return done();
+				if (!timer) done();
+			},
+		})
+			.then((result) => {
+				console.log('then: ', result);
+				resolve(true);
+			})
+			.catch((err) => {
+				clearInterval(timer);
+				console.error('err: ', err);
+				resolve(false);
+			});
+
+		nextTick(() => {
+			timer = setInterval(() => {
+				countdown--;
+				const countdownNum = document.getElementsByClassName('countdown-confirm');
+				if (countdownNum.length > 0) countdownNum[0].textContent = countdown + 's后' + confirmText;
+				if (countdown <= 0) {
+					clearInterval(timer);
+					timer = null;
+					if (countdownNum.length > 0) countdownNum[0].textContent = confirmText;
+				}
+			}, 1000);
+		});
+	});
+}
diff --git a/src/views/serverBattlePass/log/index.vue b/src/views/serverBattlePass/log/index.vue
index cec3733..2897204 100644
--- a/src/views/serverBattlePass/log/index.vue
+++ b/src/views/serverBattlePass/log/index.vue
@@ -35,9 +35,10 @@
 							</el-table-column>
 							<el-table-column prop="State" label="状态" width="100">
 								<template #default="scope">
-									<div v-if="scope.row.State == 1" style="color: #f81f26">开启</div>
-									<div v-else-if="scope.row.State == 2">关闭</div>
-									<div v-else-if="scope.row.State == 3" style="color: #66b7cf">未开启</div>
+									<div v-if="scope.row.State == 1" style="color: green">开启</div>
+									<div v-else-if="scope.row.State == 2" style="color: red">关闭</div>
+									<div v-else-if="scope.row.State == 3">永久关闭</div>
+									<div v-else-if="scope.row.State == 4" style="color: #66b7cf">未开启</div>
 									<div v-else>{{ scope.row.State }}</div>
 								</template>
 							</el-table-column>
@@ -109,29 +110,29 @@ export default defineComponent({
 					let now = new Date().getTime() / 1000;
 					console.log('gameGMGetBattlePass: time ', now);
 					let BattlePassConfig = unique();
-          console.log('gameGMGetBattlePass: BattlePassConfig ', BattlePassConfig);
-          BattlePassConfig.forEach((data) => {
+					console.log('gameGMGetBattlePass: BattlePassConfig ', BattlePassConfig);
+					BattlePassConfig.forEach((data) => {
 						let item = state.tableData.list.find((r) => r.PeriodId === data.PeriodId);
 						if (!item) {
-							state.tableData.list.push({ PeriodId: data.PeriodId });
+							item = { PeriodId: data.PeriodId };
+							let bt = state.tableData.list.find((r) => r.PeriodId > data.PeriodId && r.BeginTime <= now);
+							if (bt) {
+								item.State = 3;
+							}
+							state.tableData.list.push(item);
 							return;
 						}
 						if (item.BeginTime >= now) {
-							item.State = 3;
+							item.State = 4;
 						}
-						item.BeginTime = new Date(item.BeginTime * 1000).toLocaleDateString();
-						item.EndTime = new Date(item.EndTime * 1000).toLocaleDateString();
 					});
-          state.tableData.list.sort((a, b) => {
-            return a.PeriodId - b.PeriodId;
-          });
-					// state.tableData.list.forEach((item) => {
-					// 	if (item.BeginTime >= now) {
-					// 		item.State = 3;
-					// 	}
-					// 	item.BeginTime = new Date(item.BeginTime * 1000).toLocaleDateString();
-					// 	item.EndTime = new Date(item.EndTime * 1000).toLocaleDateString();
-					// });
+					state.tableData.list.sort((a, b) => {
+						return a.PeriodId - b.PeriodId;
+					});
+					state.tableData.list.forEach((item) => {
+						if (item.BeginTime) item.BeginTime = new Date(item.BeginTime * 1000).toLocaleDateString();
+						if (item.EndTime) item.EndTime = new Date(item.EndTime * 1000).toLocaleDateString();
+					});
 					console.log('gameGMGetBattlePass: state.tableData.data', state.tableData.list);
 				})
 				.finally(() => {
diff --git a/src/views/serverBattlePass/shopLog/index.vue b/src/views/serverBattlePass/shopLog/index.vue
new file mode 100644
index 0000000..c5d1c15
--- /dev/null
+++ b/src/views/serverBattlePass/shopLog/index.vue
@@ -0,0 +1,257 @@
+<template>
+	<div class="system-edit-post-container">
+		<el-form size="default" label-width="80px">
+			<el-card shadow="hover" header="战令历史">
+				<template #header>
+					战令历史
+					<el-button v-show="item.show === false" @click="item.show = true" class="button-caret" type="text">
+						<el-icon>
+							<ele-CaretBottom />
+						</el-icon>
+					</el-button>
+					<el-button v-show="item.show === true" @click="item.show = false" class="button-caret" type="text">
+						<el-icon>
+							<ele-CaretTop />
+						</el-icon>
+					</el-button>
+				</template>
+				<div v-show="item.show">
+					<div class="flex-warp">
+						<el-form :inline="true">
+							<!--							<el-form-item label="服务器">-->
+							<!--								<el-select v-model="serverSwitch" class="m-2" placeholder="选择服务器" size="large" style="width: 80px">-->
+							<!--									<el-option v-for="item in serverCategorize" :key="item.value" :label="item.label" :value="item.value" />-->
+							<!--								</el-select>-->
+							<!--								<el-select v-model="query.serverId" placeholder="选择服务器" @change="getProp" filterable>-->
+							<!--									<el-option v-for="item in switchServer()" :key="item.id" :label="item.name" :value="item.id" />-->
+							<!--								</el-select>-->
+							<!--							</el-form-item>-->
+							<el-form-item prop="periodId" label="显示期数">
+								<el-select size="default" placeholder="请选择显示期数" filterable v-model="query.periodId">
+									<el-option v-for="item in unique()" :key="item.PeriodId" :label="item.PeriodId + '期'" :value="item.PeriodId" />
+								</el-select>
+							</el-form-item>
+
+							<el-form-item>
+								<el-button type="primary" @click="getProp">确认</el-button>
+							</el-form-item>
+						</el-form>
+					</div>
+					<div class="flex-warp">
+						<el-form :inline="true">
+							<el-form-item prop="total" label="总数">{{ tableData.total }}</el-form-item>
+							<el-form-item prop="total" label="总比例">
+								<div v-if="tableData.total && tableData.rechargeTotal">{{ (tableData.total / tableData.rechargeTotal) * 100 }}%</div>
+								<div v-else>0%</div>
+							</el-form-item>
+						</el-form>
+					</div>
+					<div class="flex-warp">
+						<el-table :data="tableData.list" style="width: 100%" :span-method="objectSpanMethod" border>
+							<el-table-column prop="platform" label="渠道" width="80">
+								<template #default="scope">
+									<div v-if="scope.row.sort == 0">其他</div>
+									<div v-else-if="scope.row.sort == 1">ios</div>
+									<div v-else-if="scope.row.sort == 2">官服</div>
+									<div v-else-if="scope.row.sort == 3">渠道</div>
+									<div v-else>其他</div>
+								</template>
+							</el-table-column>
+							<el-table-column prop="area" label="区服编号" width="85">
+								<template #default="scope"> {{ scope.row.area }}区</template>
+							</el-table-column>
+							<el-table-column prop="name" label="服务器名称" width="200">
+								<template #default="scope">
+									{{ scope.row.name }}
+								</template>
+							</el-table-column>
+							<el-table-column prop="State" label="购买数量" width="100">
+								<template #default="scope">
+									{{ scope.row.num }}
+								</template>
+							</el-table-column>
+							<el-table-column prop="State" label="购买比例" width="100">
+								<template #default="scope">
+									{{ scope.row.num / tableData.total }}
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
+				</div>
+			</el-card>
+		</el-form>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
+import { gameGMGetBattlePassLog } from '/@/api/game/gameConfig';
+import BattlePassConfigCategory from '/@/api/config/BattlePassConfigCategory.json';
+import { ElLoading } from 'element-plus';
+import { ServerCategorize, serverList } from '/@/utils/game';
+import { gSwitchServer, uniquePeriodId } from '/@/utils/utils';
+
+interface TableDataState {
+	query: object;
+	tableData: { list: object[]; total: number; rechargeTotal: number };
+	battlePassConfig: object;
+	servers: object;
+	serverCategorize: object[];
+	serverSwitch: number;
+}
+
+interface SpanMethodProps {
+	row: object;
+	column: object;
+	rowIndex: number;
+	columnIndex: number;
+}
+
+export default defineComponent({
+	name: 'apiV1ServerBattlePassShopLog',
+	setup: function () {
+		const tableRef = ref();
+		const state = reactive<TableDataState>({
+			item: { topShow: true, show: true },
+			query: {
+				periodId: BattlePassConfigCategory[0].PeriodId,
+			},
+			tableData: { list: [], total: 0 },
+			battlePassConfig: BattlePassConfigCategory,
+			servers: [],
+			serverCategorize: ServerCategorize,
+			serverSwitch: 0,
+		});
+
+		onMounted(() => {
+			serverList().then((res) => {
+				state.servers = res;
+			});
+		});
+		const getProp = () => {
+			const loading = ElLoading.service({
+				lock: true,
+				text: 'Loading',
+				background: 'rgba(0, 0, 0, 0.7)',
+			});
+			state.tableData.list = [];
+			gameGMGetBattlePassLog(state.query)
+				.then((res) => {
+					console.log('gameGMGetBattlePass: ', res);
+					if (res.code != 0 || !res.data || !res.data.list) {
+						return;
+					}
+					// state.tableData.list = res.data.list;
+					state.tableData.total = res.data.total;
+					state.tableData.rechargeTotal = res.data.rechargeTotal;
+					let now = new Date().getTime() / 1000;
+					console.log('gameGMGetBattlePass: time ', now);
+					// let BattlePassConfig = unique();
+					console.log('gameGMGetBattlePass: state.servers ', state.servers);
+					for (let i in state.servers) {
+						let data = {
+							id: state.servers[i].id,
+							name: state.servers[i].name,
+							area: state.servers[i].area,
+							sort: state.servers[i].sort,
+							num: 0,
+						};
+						let battlePass = res.data.list.find((r) => r.server == state.servers[i].id);
+						if (battlePass) {
+							data.num = battlePass.uid;
+						}
+						state.tableData.list.push(data);
+					}
+
+					state.tableData.list.sort((a, b) => a.sort * 100000 + a.id - (b.sort * 100000 + b.id));
+					state.rows = {};
+					for (let i in state.tableData.list) {
+						let server = state.tableData.list[i];
+						if (!state.rows[server.sort]) {
+							state.rows[server.sort] = { num: 0, id: server.id };
+						}
+						state.rows[server.sort].num++;
+						if (state.rows[server.sort].id > server.id) {
+							state.rows[server.sort].id = server.id;
+						}
+					}
+
+					console.log('gameGMGetBattlePass: state.tableData.list', state.tableData.list);
+				})
+				.finally(() => {
+					loading.close();
+				});
+		};
+
+		const unique = () => {
+			return uniquePeriodId(BattlePassConfigCategory);
+		};
+		const switchServer = () => {
+			return gSwitchServer(state.serverSwitch, state.servers);
+		};
+		const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
+			if (columnIndex === 0) {
+				if (state.rows[row.sort].id == row.id) {
+					return {
+						rowspan: state.rows[row.sort].num,
+						colspan: 1,
+					};
+				} else {
+					return {
+						rowspan: 0,
+						colspan: 0,
+					};
+				}
+			}
+		};
+		return {
+			objectSpanMethod,
+			unique,
+			switchServer,
+			tableRef,
+			getProp,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.el-table {
+	--el-table-border-color: var(--el-border-color-lighter);
+	--el-table-border: 2px solid var(--el-table-border-color);
+}
+
+.table-item {
+	margin-top: 10px;
+	margin-bottom: -10px;
+}
+
+.box-card .el-card__header {
+	background-color: #062ce6;
+	color: #fff;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+	background: #f0ffd5;
+}
+
+.warning-row {
+	background: #f0ffd5ff;
+}
+
+.white-row {
+	background: #ffffff;
+}
+
+::v-deep .warning-row .el-table__body tr {
+	background-color: #f0ffd5ff;
+}
+
+::v-deep .warning-row .el-table--enable-row-hover .el-table__body tr:hover > td {
+	background-color: inherit;
+}
+
+::v-deep .warning-row .el-table__cell {
+	background-color: #f0ffd5ff;
+}
+</style>
diff --git a/src/views/serverBattlePass/update/component/listConfig.vue b/src/views/serverBattlePass/update/component/listConfig.vue
new file mode 100644
index 0000000..4cd0465
--- /dev/null
+++ b/src/views/serverBattlePass/update/component/listConfig.vue
@@ -0,0 +1,127 @@
+<template>
+	<div>
+		<el-dialog title="战令历史" v-model="isShowDialog" width="769px">
+			<div class="flex-warp">
+				<el-table ref="tableRef" :data="tableData.list" style="width: 100%" border>
+					<el-table-column prop="PeriodId" label="当前期数" width="85">
+						<template #default="scope"> {{ scope.row.PeriodId }}期</template>
+					</el-table-column>
+					<el-table-column prop="State" label="状态" width="100">
+						<template #default="scope">
+							<div v-if="scope.row.State == 1" style="color: green">开启</div>
+							<div v-else-if="scope.row.State == 2" style="color: red">关闭</div>
+							<div v-else-if="scope.row.State == 3">永久关闭</div>
+							<div v-else-if="scope.row.State == 4" style="color: #66b7cf">未开启</div>
+							<div v-else>{{ scope.row.State }}</div>
+						</template>
+					</el-table-column>
+					<el-table-column prop="BeginTime" label="开始时间" width="100" />
+					<el-table-column prop="EndTime" label="结束时间" width="100" />
+				</el-table>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent } from 'vue';
+import { ElLoading } from 'element-plus';
+import {gameGMGetBattlePass} from "/@/api/game/gameConfig";
+import {uniquePeriodId} from "/@/utils/utils";
+import BattlePassConfigCategory from "/@/api/config/BattlePassConfigCategory.json";
+
+interface TableDataState {
+	isShowDialog: boolean;
+	isNew: boolean;
+	query: object;
+	channels: object[];
+	tableData: { list: object[] };
+}
+
+export default defineComponent({
+	name: 'serverBattlePassLog',
+	setup(prop, { emit }) {
+		const state = reactive<TableDataState>({
+			isShowDialog: false,
+			isNew: false,
+			query: {},
+			channels: [],
+      tableData: { list: [] },
+		});
+		// 打开弹窗
+		const openDialog = (server: number ) => {
+			if (!server) {
+				return;
+			}
+			state.isShowDialog = true;
+			state.query = { serverId: server };
+      getProp();
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+
+    const getProp = () => {
+      const loading = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
+      state.tableData.list = [];
+      gameGMGetBattlePass({ serverId: state.query.serverId })
+          .then((res) => {
+            console.log('gameGMGetBattlePass: ', res);
+            if (res.code != 0 || !res.data || !res.data.list) {
+              return;
+            }
+            state.tableData.list = res.data.list;
+            let now = new Date().getTime() / 1000;
+            console.log('gameGMGetBattlePass: time ', now);
+            let battlePassConfig = unique();
+            console.log('gameGMGetBattlePass: battlePassConfig ', battlePassConfig);
+            battlePassConfig.forEach((data) => {
+              let item = state.tableData.list.find((r) => r.PeriodId === data.PeriodId);
+              if (!item) {
+                item = { PeriodId: data.PeriodId };
+                let bt = state.tableData.list.find((r) => r.PeriodId > data.PeriodId && r.BeginTime <= now);
+                if (bt) {
+                  item.State = 3;
+                }
+                state.tableData.list.push(item);
+                return;
+              }
+              if (item.BeginTime >= now) {
+                item.State = 4;
+              }
+            });
+            state.tableData.list.sort((a, b) => {
+              return a.PeriodId - b.PeriodId;
+            });
+            state.tableData.list.forEach((item) => {
+              if (item.BeginTime) item.BeginTime = new Date(item.BeginTime * 1000).toLocaleDateString();
+              if (item.EndTime) item.EndTime = new Date(item.EndTime * 1000).toLocaleDateString();
+            });
+            console.log('gameGMGetBattlePass: state.tableData.data', state.tableData.list);
+          })
+          .finally(() => {
+            loading.close();
+          });
+    };
+
+    const unique = () => {
+      return uniquePeriodId(BattlePassConfigCategory);
+    };
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/serverBattlePass/update/index.vue b/src/views/serverBattlePass/update/index.vue
index b48d8ab..342b584 100644
--- a/src/views/serverBattlePass/update/index.vue
+++ b/src/views/serverBattlePass/update/index.vue
@@ -49,7 +49,7 @@
 							</el-select>
 						</el-form-item>
 						<el-form-item prop="showOnly" label="显示全服">
-							<el-switch v-model="query.showOnly" class="ml-2" width="60" inline-prompt active-text="是" inactive-text="否" @change="getProp" />
+							<el-switch v-model="query.showOnly" class="ml-2" inline-prompt active-text="是" inactive-text="否" @change="getProp" />
 						</el-form-item>
 					</div>
 
@@ -67,20 +67,32 @@
 							<el-table-column prop="area" label="区服编号" width="85">
 								<template #default="scope"> {{ scope.row.area }}区</template>
 							</el-table-column>
-							<el-table-column prop="name" label="服务器名称" width="200" />
-							<el-table-column prop="PeriodId" label="当前期数" width="85" />
+							<el-table-column prop="name" label="服务器名称" width="200">
+								<template #default="scope">
+									<el-button type="text" style="color: #5f6165" @click="openDialog(scope.row)">{{ scope.row.name }}</el-button>
+								</template>
+							</el-table-column>
+							<el-table-column prop="PeriodId" label="当前期数" width="85">
+								<template #default="scope">
+									<div v-if="scope.row.PeriodId">{{ scope.row.PeriodId }}期</div>
+									<div v-else-if="ignoreSelectList.includes(scope.row.id) && query.periodId">{{ query.periodId }}期</div>
+								</template>
+							</el-table-column>
 							<el-table-column prop="State" label="状态" width="100">
 								<template #default="scope">
-									<div v-if="scope.row.BeginTime > Date.now() / 1000" style="color: #66b7cf">未开启</div>
-									<div v-else-if="scope.row.State == 1" style="color: #f81f26">开启</div>
-									<div v-else-if="scope.row.State == 2">关闭</div>
+									<div v-if="scope.row.State == 2" style="color: red">关闭</div>
 									<div v-else-if="scope.row.State == 3">永久关闭</div>
-									<div v-else>{{ scope.row.State }}</div>
+									<div v-else-if="scope.row.BeginTime > Date.now() / 1000" style="color: #66b7cf">未开启</div>
+									<div v-else-if="scope.row.State == 1" style="color: green">开启</div>
+									<div v-else>
+										{{ scope.row.State }}
+										<div v-if="ignoreSelectList.includes(scope.row.id) && query.periodId">永久关闭</div>
+									</div>
 								</template>
 							</el-table-column>
 							<el-table-column prop="BeginTimeStr" label="开始时间" width="200">
 								<template #default="scope">
-									<div v-if="!!listVisible && scope.row.id == tableData.edit.id">
+									<div v-if="!!listVisible && scope.row.id == tableData.edit.id && tableData.edit.BeginTime > Date.now()">
 										<el-date-picker
 											style="width: 180px"
 											type="date"
@@ -120,19 +132,35 @@
 							<el-table-column prop="" label="开关" width="200">
 								<template #default="scope">
 									<div v-if="!!listVisible && scope.row.id == tableData.edit.id">
-										<el-select class="m-2" placeholder="选择期数" filterable v-model="tableData.edit.changeState">
-											<el-option label="不修改" :value="0" />
-											<el-option label="开启" :value="1" />
-											<el-option label="关闭" :value="2"  style="color:rgba(248,31,31,0.84);" />
-											<el-option label="永久关闭" :value="3" />
-										</el-select>
+										<el-button
+											type="success"
+											v-if="1 != tableData.edit.State"
+											@click="onUpdate1({ State: 1, Id: scope.row.StringId, PeriodId: scope.row.PeriodId })"
+										>
+											开启
+										</el-button>
+										<el-button
+											type="danger"
+											v-if="2 != tableData.edit.State"
+											@click="onUpdate1({ State: 2, Id: scope.row.StringId, PeriodId: scope.row.PeriodId })"
+										>
+											关闭
+										</el-button>
+										<el-button
+											type="info"
+											v-if="3 != tableData.edit.State"
+											@click="onUpdate1({ State: 3, Id: scope.row.StringId, PeriodId: scope.row.PeriodId })"
+										>
+											永久关闭
+										</el-button>
 									</div>
 								</template>
 							</el-table-column>
 							<el-table-column prop="" label="操作" width="200">
 								<template #default="scope">
 									<div v-if="!!listVisible && scope.row.id == tableData.edit.id">
-										<el-button type="primary" @click="onUpdate(1)">确认修改</el-button>
+										<el-button type="primary" @click="onUpdate(1)">确认</el-button>
+										<el-button @click="onClose(1)">取消</el-button>
 									</div>
 									<div v-else>
 										<el-button size="small" class="ml10" @click="onEdit(scope.row)"> 修改</el-button>
@@ -144,15 +172,20 @@
 				</div>
 			</el-card>
 		</el-form>
+
+		<EditConfig ref="listDicRef" @countList="getProp" />
 	</div>
 </template>
 <script lang="ts">
 import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
 import { gameGMCheckPeriodIdBattlePass, gameGMGetBattlePass, gameGMInsertBattlePass, gameGMUpdateBattlePass } from '/@/api/game/gameConfig';
 import BattlePassConfigCategory from '/@/api/config/BattlePassConfigCategory.json';
-import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 import { uniquePeriodId, zeroFill } from '/@/utils/utils';
 import { serverList } from '/@/utils/game';
+import { showCountdownConfirm } from '/@/utils/countdownMsg';
+import { BATTLE_PASS } from '/@/api/common/consts';
+import EditConfig from '/@/views/serverBattlePass/update/component/listConfig.vue';
 
 interface Props {
 	id: string;
@@ -168,8 +201,6 @@ interface TableDataState {
 	tableData: { data: object[]; list: object[]; edit: object };
 	battlePassList: object[];
 	ignoreSelectList: object[];
-	// checkTime: number;
-	// checkTimeColor: string;
 	listVisible: boolean;
 	check: boolean;
 	lastDate: number;
@@ -188,8 +219,10 @@ interface SpanMethodProps {
 
 export default defineComponent({
 	name: 'apiV1ServerBattlePass',
+	components: { EditConfig },
 	setup: function () {
 		const tableRef = ref();
+		const listDicRef = ref();
 		let date = new Date();
 		let getBeginTime = (date: number) => {
 			return new Date(date + 24 * 60 * 60 * 1000).setHours(0, 0, 0);
@@ -221,6 +254,10 @@ export default defineComponent({
 			listVisible: false,
 			selectModel: '',
 			servers: [],
+			closeColor: BATTLE_PASS.Close,
+			openColor: BATTLE_PASS.Open,
+			unopenedColor: BATTLE_PASS.Unopened,
+			permanentClosed: BATTLE_PASS.PermanentClosed,
 		});
 
 		const onCheckPeriodId = () => {
@@ -246,9 +283,6 @@ export default defineComponent({
 				.finally(() => {
 					loading.close();
 				});
-
-			tableRef.value.clearSelection();
-			console.log('state.ignoreSelectList: ', state.ignoreSelectList);
 		};
 		const onSubmit = () => {
 			console.log('state.props:', state.props);
@@ -433,58 +467,64 @@ export default defineComponent({
 		const onUpdate = () => {
 			let data = {
 				Id: state.tableData.edit.StringId,
-        PeriodId: state.tableData.edit.PeriodId,
-				BeginTime: Math.floor(state.tableData.edit.BeginTime / 1000),
+				PeriodId: state.tableData.edit.PeriodId,
 				EndTime: Math.floor(state.tableData.edit.EndTime / 1000),
 			};
-			// if (state.tableData.edit.changeState != 0 && data.State != 3) {
-			// 	data.State = state.tableData.edit.changeState;
-			// }
-			ElMessageBox.confirm(
+			if (state.tableData.edit.BeginTime > Date.now()) {
+				data.BeginTime = Math.floor(state.tableData.edit.BeginTime / 1000);
+			}
+
+			showCountdownConfirm(
 				`此操作将修改：服务器【${state.tableData.edit.name}】第【${state.tableData.edit.PeriodId}】期的时间为[${new Date(
 					state.tableData.edit.BeginTime
 				).toLocaleDateString()}]-[${new Date(state.tableData.edit.EndTime).toLocaleDateString()}]，是否继续?`,
 				'提示',
-				{
-					confirmButtonText: '确认',
-					cancelButtonText: '取消',
-					type: 'warning',
-				}
-			).then(() => {
-        update(data);
-			});
+				'确认',
+				'取消',
+				5
+			)
+				.then((res) => {
+					if (res) {
+						update(data);
+					}
+				})
+				.catch(() => {
+					state.listVisible = false;
+				});
 		};
 		const onUpdate1 = (data) => {
-			let confirm = `此操作将开启：第${data.PeriodId}期的战令，是否继续?`;
+			let confirm = '';
+			if (data.State == 1) {
+				confirm = `此操作将<span style="color: green">【开启】</span>第${data.PeriodId}期的战令，是否继续?`;
+			}
 			if (data.State == 2) {
-				confirm = `此操作将关闭：第${data.PeriodId}期的战令，是否继续?`;
+				confirm = `此操作将<span style="color: red">【关闭】</span>第${data.PeriodId}期的战令，是否继续?`;
 			}
 			if (data.State == 3) {
-				confirm = `此操作将永久关闭：第${data.PeriodId}期的战令，是否继续?`;
+				confirm = `此操作将<span style="color: grey">【永久关闭】</span>第${data.PeriodId}期的战令，是否继续?`;
 			}
-			ElMessageBox.confirm(confirm, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
-				type: 'warning',
-			}).then(() => {
-				update(data);
+			showCountdownConfirm(confirm, '提示', '确认', '取消', 3).then((res) => {
+				console.log('showCountdownConfirm: ', res);
+				if (res) {
+					update(data);
+				}
 			});
 		};
 		const update = (data) => {
 			gameGMUpdateBattlePass(data).then((response) => {
 				console.log(response);
-        state.listVisible = false;
-        getProp();
+				state.listVisible = false;
+				getProp();
 				state.tableData.edit = {};
 			});
 		};
 		const onEdit = (row) => {
 			if (!row.StringId) {
-        ElMessage.error("未定义数据无法修改，请先发布！")
+				ElMessage.error('未定义数据无法修改，请先发布！');
 				return;
 			}
 			if (row.State == 3) {
-        ElMessage.error("永久关闭后无法修改！")
+				ElMessage.error('永久关闭后无法修改！');
 				return;
 			}
 			state.tableData.edit = { ...row };
@@ -493,15 +533,17 @@ export default defineComponent({
 			state.tableData.edit.BeginTime = new Date(row.BeginTimeStr + ' 00:00:00').getTime();
 			state.listVisible = true;
 		};
-		const handleClose = (done: () => void) => {
-			getProp();
-			done();
+		const onClose = () => {
 			state.listVisible = false;
 			state.tableData.edit = {};
-			// state.checkTime = 0;
+		};
+		const openDialog = (row) => {
+			listDicRef.value.openDialog(row.id);
 		};
 		return {
-			handleClose,
+      listDicRef,
+			openDialog,
+			onClose,
 			onEdit,
 			onUpdate1,
 			onUpdate,