diff --git a/admin/src/app/api/notice.ts b/admin/src/app/api/notice.ts
index b5374f93d..ecd905cb0 100644
--- a/admin/src/app/api/notice.ts
+++ b/admin/src/app/api/notice.ts
@@ -11,7 +11,7 @@ export function getNoticeList(params: any) {
 }
 
 /**
- * 消息发送记录
+ * 消发送记录
  * @param params
  * @returns
  */
@@ -19,6 +19,58 @@ export function getNoticeLog(params: any) {
     return request.get(`notice/log`, { params })
 }
 
+/**
+ * 获取消息发送记录
+ * @param params
+ * @returns
+ */
+export function getBindInfo() {
+    return request.get(`notice/bind/info`)
+}
+
+/**
+ * 取消绑定
+ * @param params
+ * @returns
+ */
+export function cancelBind(params: any) {
+    return request.post(`notice/bind/cancel`, params)
+}
+
+/**
+ * 获取微信配置
+ * @returns
+ */
+export function getWechatAuthUrl() {
+    return request.get('notice/bind/wechat')
+}
+
+/**
+ * 获取微信配置
+ * @returns
+ */
+export function getWeappAuthUrl() {
+    return request.get('notice/bind/weapp')
+}
+
+
+/**
+ * 获取微信配置
+ * @returns
+ */
+export function sendSms(params: Record<string, any>) {
+    return request.post('notice/bind/sms/send',params, { showSuccessMessage: true })
+}
+
+
+/**
+ * 获取微信配置
+ * @returns
+ */
+export function bindSms(params: Record<string, any>) {
+    return request.post('notice/bind/sms/bind',params, { showSuccessMessage: true })
+}
+
 /**
  * 消息详情
  * @param key
@@ -60,7 +112,7 @@ export function getSmsList() {
  * @returns
  */
 export function getSmsInfo(sms_type: string) {
-    return request.get(`notice/notice/sms/${ sms_type }`,)
+    return request.get(`notice/notice/sms/${ sms_type }`)
 }
 
 /**
@@ -91,7 +143,7 @@ export function getAccountIsLogin() {
  * @param params
  */
 export function loginAccount(params: Record<string, any>) {
-    return request.post(`notice/niusms/account/login`,params,{ showSuccessMessage: true })
+    return request.post(`notice/niusms/account/login`, params, { showSuccessMessage: true })
 }
 
 /**
@@ -99,7 +151,7 @@ export function loginAccount(params: Record<string, any>) {
  * @param params
  */
 export function registerAccount(params: Record<string, any>) {
-    return request.post(`notice/niusms/account/register`,params,{ showSuccessMessage: true })
+    return request.post(`notice/niusms/account/register`, params, { showSuccessMessage: true })
 }
 
 /**
@@ -115,7 +167,7 @@ export function getAccountInfo(username: string) {
  * @param params
  */
 export function getTemplateList(params: Record<string, any>) {
-    return request.get(`notice/niusms/template/list/${params.sms_type}/${params.username}`,{})
+    return request.get(`notice/niusms/template/list/${params.sms_type}/${params.username}`, {})
 }
 
 /**
@@ -124,7 +176,7 @@ export function getTemplateList(params: Record<string, any>) {
  * @param params
  */
 export function getSignList(username: string, params: Record<string, any>) {
-    return request.get(`notice/niusms/sign/list/${username}`,{params})
+    return request.get(`notice/niusms/sign/list/${username}`, { params })
 }
 
 /**
@@ -150,8 +202,8 @@ export function deleteSign(username: string, params: Record<string, any>) {
  * @param username
  * @param params
  */
-export function editAccount(username: string,params: Record<string, any>) {
-  return request.post(`notice/niusms/account/edit/${username}`, params, { showSuccessMessage: true });
+export function editAccount(username: string, params: Record<string, any>) {
+    return request.post(`notice/niusms/account/edit/${username}`, params, { showSuccessMessage: true })
 }
 
 /**
@@ -160,7 +212,7 @@ export function editAccount(username: string,params: Record<string, any>) {
  * @param params
  */
 export function getSmsSendList(username: string, params: Record<string, any>) {
-    return request.get(`notice/niusms/account/send_list/${username}`,{params})
+    return request.get(`notice/niusms/account/send_list/${username}`, { params })
 }
 
 /**
@@ -169,7 +221,7 @@ export function getSmsSendList(username: string, params: Record<string, any>) {
  * @param params
  */
 export function getSmsOrdersList(username: string, params: Record<string, any>) {
-    return request.get(`notice/niusms/order/list/${username}`,{params})
+    return request.get(`notice/niusms/order/list/${username}`, { params })
 }
 
 /**
@@ -197,7 +249,7 @@ export function getsiteCaptcha() {
  * @param params
  */
 export function getSmsSend(params: Record<string, any>) {
-    return request.post(`notice/niusms/send`,params,{ showSuccessMessage: true })
+    return request.post(`notice/niusms/send`, params, { showSuccessMessage: true })
 }
 
 /**
@@ -223,7 +275,7 @@ export function getTemplateReportConfig() {
  * @param params
  */
 export function reportTemplate(sms_type: string, username: string, params: Record<string, any>) {
-    return request.post(`notice/niusms/template/report/${sms_type}/${username}`,params,{ showSuccessMessage: true })
+    return request.post(`notice/niusms/template/report/${sms_type}/${username}`, params, { showSuccessMessage: true })
 }
 
 /**
@@ -234,8 +286,8 @@ export function reportTemplate(sms_type: string, username: string, params: Recor
  * @param username
  * @param params
  */
-export function getreportTemplateInfo(sms_type: string, username: string,params: Record<string, any>) {
-    return request.get(`notice/niusms/template/info/${sms_type}/${username}`,{params})
+export function getreportTemplateInfo(sms_type: string, username: string, params: Record<string, any>) {
+    return request.get(`notice/niusms/template/info/${sms_type}/${username}`, { params })
 }
 
 
@@ -254,7 +306,7 @@ export function smsOrderCreate(username: string, params: Record<string, any>) {
  * @param params
  */
 export function getOrderPayInfo(username: string, params: Record<string, any>) {
-    return request.get(`notice/niusms/order/pay/${username}`, {params})
+    return request.get(`notice/niusms/order/pay/${username}`, { params })
 }
 
 /**
@@ -263,7 +315,7 @@ export function getOrderPayInfo(username: string, params: Record<string, any>) {
  * @param params
  */
 export function getOrderInfo(username: string, params: Record<string, any>) {
-    return request.get(`notice/niusms/order/info/${username}`, {params})
+    return request.get(`notice/niusms/order/info/${username}`, { params })
 }
 
 /**
@@ -272,7 +324,7 @@ export function getOrderInfo(username: string, params: Record<string, any>) {
  * @param params
  */
 export function getOrderPayStatus(username: string, params: Record<string, any>) {
-    return request.get(`notice/niusms/order/status/${username}`, {params})
+    return request.get(`notice/niusms/order/status/${username}`, { params })
 }
 
 /**
@@ -289,7 +341,7 @@ export function calculateOrderPay(username: string, params: Record<string, any>)
  * @param params
  */
 export function enableNiusms(params: Record<string, any>) {
-    return request.put(`notice/niusms/enable`,params,{ showSuccessMessage: true })
+    return request.put(`notice/niusms/enable`, params, { showSuccessMessage: true })
 }
 
 /**
@@ -307,8 +359,8 @@ export function templateSync(sms_type: string, username: string) {
  * @param username
  * @param params
  */
-export function resetPassword(username: string,params: Record<string, any>) {
-    return request.post(`notice/niusms/account/reset/password/${username}`,params,{ showSuccessMessage: true})
+export function resetPassword(username: string, params: Record<string, any>) {
+    return request.post(`notice/niusms/account/reset/password/${username}`, params, { showSuccessMessage: true })
 }
 
 /**
diff --git a/admin/src/app/api/printer.ts b/admin/src/app/api/printer.ts
index eccf6213c..877445d24 100644
--- a/admin/src/app/api/printer.ts
+++ b/admin/src/app/api/printer.ts
@@ -159,10 +159,10 @@ export function getPrinterBrand(params: Record<string, any>) {
  * @returns
  */
 export function refreshPrinterToken(printer_id: number) {
-    return request.put(`sys/printer/refreshtoken/${ printer_id }`,{},{
+    return request.put(`sys/printer/refreshtoken/${ printer_id }`, {}, {
         showErrorMessage: true,
         showSuccessMessage: true
-    });
+    })
 }
 
 /**
@@ -171,7 +171,7 @@ export function refreshPrinterToken(printer_id: number) {
  * @returns
  */
 export function testPrint(printer_id: number) {
-    return request.put(`sys/printer/testprint/${ printer_id }`, {},{ showErrorMessage: true, showSuccessMessage: true });
+    return request.put(`sys/printer/testprint/${ printer_id }`, {}, { showErrorMessage: true, showSuccessMessage: true })
 }
 
 /**
diff --git a/admin/src/app/api/site.ts b/admin/src/app/api/site.ts
index b63f3ffcd..be0068a70 100644
--- a/admin/src/app/api/site.ts
+++ b/admin/src/app/api/site.ts
@@ -141,7 +141,7 @@ export function deleteSiteGroup(group_id: number) {
  * @param params
  * @returns
  */
-export function getSiteGroupAll(params: Record<string, any> = {}) {
+export function getSiteGroupAll() {
     return request.get(`site/group/all`)
 }
 
diff --git a/admin/src/app/api/sys.ts b/admin/src/app/api/sys.ts
index 4fb9d8b3d..db877dfca 100644
--- a/admin/src/app/api/sys.ts
+++ b/admin/src/app/api/sys.ts
@@ -591,21 +591,21 @@ export function setPatConfig(params: Record<string, any>) {
 /**
  * 刷新菜单
  */
-export function menuRefresh(params: Record<string, any>) {
+export function menuRefresh() {
     return request.post(`sys/menu/refresh`, {})
 }
 
 /**
  * 清理数据字段缓存
  */
-export function clearSchemaCache(params: Record<string, any>) {
+export function clearSchemaCache() {
     return request.post(`sys/schema/clear`, {}, { showSuccessMessage: true })
 }
 
 /**
  * 清理缓存
  */
-export function clearCache(params: Record<string, any>) {
+export function clearCache() {
     return request.post(`sys/cache/clear`, {}, { showSuccessMessage: true })
 }
 
@@ -794,3 +794,11 @@ export function getWxoplatform() {
 export function getQrcode(params: Record<string, any>) {
     return request.get(`sys/qrcode`, { params, showErrorMessage: false })
 }
+
+/**
+ * 校验消息队列
+ * @returns
+ */
+export function checkJobStatus() {
+    return request.get(`sys/job`)
+}
diff --git a/admin/src/app/api/verify.ts b/admin/src/app/api/verify.ts
index e61305004..cdca76ff6 100644
--- a/admin/src/app/api/verify.ts
+++ b/admin/src/app/api/verify.ts
@@ -36,7 +36,7 @@ export function getVerifyDetailInfo(verifyCode: string) {
  * @returns
  */
 export function verify(verifyCode: string, params: Record<string, any>) {
-    return request.post(`verify/verify/${ verifyCode }`,params,{ showSuccessMessage: true})
+    return request.post(`verify/verify/${ verifyCode }`, params, { showSuccessMessage: true })
 }
 /***************************************************** 核销员 ****************************************************/
 
@@ -97,5 +97,5 @@ export function getVerifyInfo(id: number) {
  * @returns
  */
 export function editVerifier(params: Record<string, any>) {
-    return request.post(`verify/verifier/${ params.id }`, params,{ showSuccessMessage: true })
+    return request.post(`verify/verifier/${ params.id }`, params, { showSuccessMessage: true })
 }
diff --git a/admin/src/app/api/weapp.ts b/admin/src/app/api/weapp.ts
index de73009d7..f30b7944e 100644
--- a/admin/src/app/api/weapp.ts
+++ b/admin/src/app/api/weapp.ts
@@ -8,6 +8,14 @@ export function getWeappConfig() {
     return request.get('weapp/config')
 }
 
+/**
+ * 获取微信小程序配置
+ * @returns
+ */
+export function getWeappAuthUrl() {
+    return request.get('weapp/auth_url')
+}
+
 /**
  * 编辑微信小程序配置
  * @param params
diff --git a/admin/src/app/components/cloud-build/index.vue b/admin/src/app/components/cloud-build/index.vue
index 9c16709b9..f062c8fab 100644
--- a/admin/src/app/components/cloud-build/index.vue
+++ b/admin/src/app/components/cloud-build/index.vue
@@ -377,7 +377,7 @@ const dialogCancel = () => {
 }
 
 const cloudBuildCheckDirFn = () => {
-    window.open('https://doc.niucloud.com/v6.html?keywords=/chang-jian-wen-ti-chu-li/er-shi-wu-3001-sheng-7ea7-yun-bian-yi-mu-lu-du-xie-quan-xian-zhuang-tai-bu-tong-guo-ru-he-chu-li')
+    window.open('https://doc.press.niucloud.com/php/v6-shop/use/chang-jian-wen-ti-chu-li/er-shi-wu-3001-sheng-7ea7-yun-bian-yi-mu-lu-du-xie-quan-xian-zhuang-tai-bu-tong-guo-ru-he-chu-li.html')
 }
 
 watch(() => showDialog.value, () => {
diff --git a/admin/src/app/components/upgrade-log/index.vue b/admin/src/app/components/upgrade-log/index.vue
index 6bacfd39a..e78d2d6b0 100644
--- a/admin/src/app/components/upgrade-log/index.vue
+++ b/admin/src/app/components/upgrade-log/index.vue
@@ -33,6 +33,7 @@
 <script lang="ts" setup>
 import { computed, ref, defineProps, nextTick } from "vue"
 import { t } from "@/lang"
+import { ElMessage } from "element-plus"
 import { getAppVersionList, getFrameworkVersionList } from "@/app/api/module"
 
 const props = defineProps({
diff --git a/admin/src/app/components/upgrade/index.vue b/admin/src/app/components/upgrade/index.vue
index cb7f5bef3..4b2cc61a8 100644
--- a/admin/src/app/components/upgrade/index.vue
+++ b/admin/src/app/components/upgrade/index.vue
@@ -1,234 +1,246 @@
 <template>
-    <el-dialog v-model="showDialog" :title="t('upgrade.title')" width="850px" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="dialogClose">
+  <el-dialog v-model="showDialog" :title="t('upgrade.title')" width="850px" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="dialogClose">
 
-        <template v-if="upgradeContent">
-            <!-- 检测服务是否到期 -->
-            <template v-if="step == 1">
-                <template v-for="(item, index) in upgradeContent.content">
-                    <div class="text-lg">
-                        <template v-if="item.upgrade_version">
-                            <span>【{{ item.app.app_name }}】本次升级将从</span>
-                            <span class="font-bold px-[2px]">{{ item.version }}</span>
-                            <span>升级到</span>
-                            <span class="font-bold px-[2px]">{{ item.upgrade_version }}</span>
-                            <span>版本</span>
-                        </template>
-                        <template v-else>
-                            <template v-if="upgradeContent.content.length > 1">
-                                <span>【{{ item.app.app_name }}】当前版本</span>
-                                <span class="font-bold px-[2px]">{{ item.version }}</span>
-                            </template>
-                            <template v-else>
-                                <span>当前版本</span>
-                                <span class="font-bold px-[2px]">{{ item.version }}</span>
-                            </template>
-                        </template>
-                    </div>
-                    <div class="mt-[10px]" :class="{ 'mb-[10px]' : (index + 1) < upgradeContent.content.length }" v-if="item.upgrade_version != item.last_version">
-                        <el-alert type="info" show-icon :closable="false">
-                            <template #title>
-                                <span>当前最新版本为{{ item.last_version }}，您的服务{{ item.expire_time ? `已于${item.expire_time}到期` : '长期有效' }}。</span>
-                                <span>如需升级到最新版可在<a class="text-primary" href="https://www.niucloud.com" target="_blank">niucloud-admin官网</a>购买相关服务后再进行升级</span>
-                            </template>
-                        </el-alert>
-                    </div>
-                </template>
+    <template v-if="upgradeContent">
+      <!-- 检测服务是否到期 -->
+      <template v-if="step == 1">
+        <template v-for="(item, index) in upgradeContent.content">
+          <div class="text-lg">
+            <template v-if="item.upgrade_version">
+              <span>【{{ item.app.app_name }}】本次升级将从</span>
+              <span class="font-bold px-[2px]">{{ item.version }}</span>
+              <span>升级到</span>
+              <span class="font-bold px-[2px]">{{ item.upgrade_version }}</span>
+              <span>版本</span>
             </template>
-            <div v-show="step == 2">
-                <el-steps :active="numberOfSteps" align-center class="number-of-steps" process-status="process">
-                    <el-step :title="t('testDirectoryPermissions')" />
-                    <el-step :title="t('upgrade.option')" />
-                    <el-step :title="t('startUpgrade')" />
-                    <el-step :title="t('upgradeEnd')" />
-                </el-steps>
-                <div class="h-[400px]" style="overflow: auto">
-                    <!-- 判断文件权限 -->
-                    <div v-show="active == 'upgrade'">
-                        <div class="flex flex-col" v-if="upgradeCheck && !upgradeTask">
-                            <el-scrollbar>
-                                <div class="bg-[#fff] my-3" v-if="upgradeCheck.dir">
-                                    <div class="px-[20px] pt-[10px] text-[14px] el-table">
-                                        <el-row class="py-[10px] items table-head-bg pl-[15px] mb-[10px]">
-                                            <el-col :span="18">
-                                                <span>{{ t("upgrade.path") }}</span>
-                                            </el-col>
-                                            <el-col :span="3">
-                                                <span>{{ t("upgrade.demand") }}</span>
-                                            </el-col>
-                                            <el-col :span="3">
-                                                <span>{{ t("status") }}</span>
-                                            </el-col>
-                                        </el-row>
+            <template v-else>
+              <template v-if="upgradeContent.content.length > 1">
+                <span>【{{ item.app.app_name }}】当前版本</span>
+                <span class="font-bold px-[2px]">{{ item.version }}</span>
+              </template>
+              <template v-else>
+                <span>当前版本</span>
+                <span class="font-bold px-[2px]">{{ item.version }}</span>
+              </template>
+            </template>
+          </div>
+          <div class="mt-[10px]" :class="{ 'mb-[10px]' : (index + 1) < upgradeContent.content.length }" v-if="item.upgrade_version != item.last_version">
+            <el-alert type="info" show-icon :closable="false">
+              <template #title>
+                <span>当前最新版本为{{ item.last_version }}，您的服务{{ item.expire_time ? `已于${item.expire_time}到期` : '长期有效' }}。</span>
+                <span>如需升级到最新版可在<a class="text-primary" href="https://www.niucloud.com" target="_blank">niucloud-admin官网</a>购买相关服务后再进行升级</span>
+              </template>
+            </el-alert>
+          </div>
+        </template>
+      </template>
+      <div v-show="step == 2">
+        <el-steps :active="numberOfSteps" align-center class="number-of-steps" process-status="process">
+          <el-step :title="t('testDirectoryPermissions')" />
+          <el-step :title="t('upgrade.option')" />
+          <el-step :title="t('startUpgrade')" />
+          <el-step :title="t('upgradeEnd')" />
+        </el-steps>
+        <div class="h-[400px]" style="overflow: auto">
+          <!-- 判断文件权限 -->
+          <div v-show="active == 'upgrade'">
+            <div class="flex flex-col" v-if="upgradeCheck && !upgradeTask">
+              <el-scrollbar>
+                <div class="bg-[#fff] my-3" v-if="upgradeCheck.dir">
+                  <div class="px-[20px] pt-[10px] text-[14px] el-table">
+                    <el-row class="py-[10px] items table-head-bg pl-[15px] mb-[10px]">
+                      <el-col :span="18">
+                        <span>{{ t("upgrade.path") }}</span>
+                      </el-col>
+                      <el-col :span="3">
+                        <span>{{ t("upgrade.demand") }}</span>
+                      </el-col>
+                      <el-col :span="3">
+                        <span>{{ t("status") }}</span>
+                      </el-col>
+                    </el-row>
 
-                                        <div style="height: calc(300px); overflow: auto">
-                                            <el-row class="pb-[10px] items pl-[15px]" v-for="item in upgradeCheck.dir.is_readable">
-                                                <el-col :span="18">
-                                                    <span>{{ item.dir }}</span>
-                                                </el-col>
-                                                <el-col :span="3">
-                                                    <span>{{ t("upgrade.readable") }}</span>
-                                                </el-col>
-                                                <el-col :span="3" >
+                    <div style="height: calc(300px); overflow: auto">
+                      <el-row class="pb-[10px] items pl-[15px]" v-for="item in upgradeCheck.dir.is_readable">
+                        <el-col :span="18">
+                          <span>{{ item.dir }}</span>
+                        </el-col>
+                        <el-col :span="3">
+                          <span>{{ t("upgrade.readable") }}</span>
+                        </el-col>
+                        <el-col :span="3" >
                                                     <span v-if="item.status">
                                                         <el-icon color="green">
                                                             <Select />
                                                         </el-icon>
                                                     </span>
-                                                    <span v-else>
+                          <span v-else>
                                                         <el-icon color="red">
                                                             <CloseBold />
                                                         </el-icon>
                                                     </span>
-                                                </el-col>
-                                            </el-row>
-                                            <el-row class="pb-[10px] items pl-[15px]" v-for="item in upgradeCheck.dir.is_write">
-                                                <el-col :span="18">
-                                                    <span>{{ item.dir }}</span>
-                                                </el-col>
-                                                <el-col :span="3">
-                                                    <span>{{ t("upgrade.write") }}</span>
-                                                </el-col>
-                                                <el-col :span="3">
+                        </el-col>
+                      </el-row>
+                      <el-row class="pb-[10px] items pl-[15px]" v-for="item in upgradeCheck.dir.is_write">
+                        <el-col :span="18">
+                          <span>{{ item.dir }}</span>
+                        </el-col>
+                        <el-col :span="3">
+                          <span>{{ t("upgrade.write") }}</span>
+                        </el-col>
+                        <el-col :span="3">
                                                     <span v-if="item.status">
                                                         <el-icon color="green">
                                                             <Select />
                                                         </el-icon>
                                                     </span>
-                                                    <span v-else>
+                          <span v-else>
                                                         <el-icon color="red">
                                                             <CloseBold />
                                                         </el-icon>
                                                     </span>
-                                                </el-col>
-                                            </el-row>
-                                        </div>
-                                    </div>
-                                </div>
-                            </el-scrollbar>
-                        </div>
-                        <div class="h-[370px] mt-[30px]" v-show="showTerminal && upgradeTask && !errorDialog">
-                            <terminal ref="terminalRef" :name="`upgrade-${terminalId}`"  :context="upgradeTask ? upgradeTask.upgrade.app_key : ''" :init-log="null" :show-header="false" :show-log-time="true" @exec-cmd="onExecCmd" />
-                        </div>
+                        </el-col>
+                      </el-row>
                     </div>
-                    <!-- 是否备份选择 -->
-                    <div class="flex flex-col" v-show="active == 'backup'">
-                        <el-scrollbar>
-                            <div class="bg-[#fff] my-3">
-                                <div class="p-[20px] mt-[50px] mx-[10px] border-[1px] border-[#E6E6E6] rounded-[10px]">
-                                    <div class="flex justify-between items-center mt-[-9px]">
-                                        <el-checkbox v-model="upgradeOption.is_need_cloudbuild" :label="t('upgrade.isNeedCloudbuild')" :true-value="true" :false-value="false" size="large" ></el-checkbox>
-                                    </div>
-                                    <div class="text-[14px] text-[#374151] mb-[10px]">{{ t('upgrade.cloudbuildTips') }}</div>
-                                </div>
-                                <div class="p-[20px] mt-[20px] mx-[10px] border-[1px] border-[#E6E6E6] rounded-[10px]" v-if="upgradeContent.last_backup">
-                                    <div class="flex justify-between items-center mt-[-9px]">
-                                        <el-checkbox v-model="upgradeOption.is_need_backup" :label="t('upgrade.isNeedBackup')" :true-value="true" :false-value="false" size="large" ></el-checkbox>
-                                        <el-button link type="primary" class="!text-[#9699B6]" @click="toBackupRecord">{{ t('upgrade.isNeedBackupBtn') }}</el-button>
-                                    </div>
-
-                                    <div class="text-[14px] text-[#374151] mb-[10px]">{{ t('upgrade.isNeedBackupTips') }}</div>
-                                    <div class="text-[14px] text-[#9699B6]">{{ t('上次备份时间：') }}{{ upgradeContent.last_backup.complete_time }}</div>
-                                </div>
-                            </div>
-                        </el-scrollbar>
-                    </div>
-
+                  </div>
                 </div>
+              </el-scrollbar>
             </div>
-            <div v-if="step == 3">
-                <div class="mt-[10px]" v-show="active == 'complete'">
-                    <el-result icon="success" :title="t('upgrade.upgradeSuccess')">
-                        <template #icon>
-                            <img src="@/app/assets/images/success_icon.png" alt="">
-                        </template>
-                        <template #extra>
-                            <div class="text-[16px] text-[#4F516D] mt-[-5px]" v-show="upgradeTask && upgradeTask.executed && !upgradeTask.executed.includes('cloudBuild')">{{ t('upgrade.upgradeCompleteTips') }}</div>
-                            <!-- <div class="text-[16px] text-[#9699B6] mt-[10px]">本次升级用时{{ formatUpgradeDuration }}</div> -->
-                            <div class="w-[750px]" v-if="upgradeTask.cloud_build_error">
-                                <el-alert class="!w-[750px] border-warning !border-[1px] !rounded-[0px] border-solid" type="warning" :closable="false">
-                                    <template #title>
-                                        <span class="text-error">警告：</span>
-                                        <span class="text-black">升级过程中发生云编译错误</span>
-                                    </template>
-                                </el-alert>
-                                <div class="text-left mt-[10px] leading-8">
-                                    <div class="font-bold">为了保证系统稳定，建议您做以下处理:</div>
-                                    <div><span class="w-[6px] h-[6px] rounded-[6px] bg-black inline-block mr-[10px]"></span>如果您是开发者，安装的框架或者插件二开过或者正在开发中，可能是因为您的本地代码不完整导致的云编译失败，需要自己调试并重新进行编译才算升级完成(云编译会把本地插件前端代码上传编译)。</div>
-                                    <div><span class="w-[6px] h-[6px] rounded-[6px] bg-black inline-block mr-[10px]"></span>如果您没有二开过任何代码，可能是本地插件存在兼容性问题，请联系插件开发者或者官方客服解决。</div>
-                                    <div><span class="w-[6px] h-[6px] rounded-[6px] bg-black inline-block mr-[10px]"></span>如果您的项目已经投入正式运营中，请立即回滚。</div>
-                                </div>
-                                <div class="text-left mt-[10px]">
-                                    <div class="font-bold">编译信息错误</div>
-                                    <div class="mt-[10px] text-secondary overflow-hidden line-clamp-4">
-                                        {{  upgradeTask.cloud_build_error }}
-                                    </div>
-                                </div>
-                                <div class="mt-[20px]">
-                                    <el-button @click="handleBack()" class="!w-[90px]">更多信息</el-button>
-                                    <el-button @click="showDialog=false" type="primary" plain class="!w-[90px]">我已知晓</el-button>
-                                    <el-button @click="cloudBuildError('cloud_build_error_rollback')" type="primary" class="!w-[90px]">回滚</el-button>
-                                </div>
-                            </div>
-                            <div class="mt-[20px]" v-else>
-                                <el-button @click="handleBack()" class="!w-[90px]">返回</el-button>
-                                <el-button @click="showDialog=false" type="primary" class="!w-[90px]">完成</el-button>
-                            </div>
-                        </template>
-                    </el-result>
+            <div class="h-[370px] mt-[30px]" v-show="showTerminal && upgradeTask && !errorDialog">
+              <terminal ref="terminalRef" :name="`upgrade-${terminalId}`"  :context="upgradeTask ? upgradeTask.upgrade.app_key : ''" :init-log="null" :show-header="false" :show-log-time="true" @exec-cmd="onExecCmd" />
+            </div>
+          </div>
+          <!-- 是否备份选择 -->
+          <div class="flex flex-col" v-show="active == 'backup'">
+            <el-scrollbar>
+              <div class="bg-[#fff] my-3">
+                <div class="p-[20px] mt-[50px] mx-[10px] border-[1px] border-[#E6E6E6] rounded-[10px]">
+                  <div class="flex justify-between items-center mt-[-9px]">
+                    <el-checkbox v-model="upgradeOption.is_need_cloudbuild" :label="t('upgrade.isNeedCloudbuild')" :true-value="true" :false-value="false" size="large" ></el-checkbox>
+                  </div>
+                  <div class="text-[14px] text-[#374151] mb-[10px]">{{ t('upgrade.cloudbuildTips') }}</div>
                 </div>
-                <div class="mt-[20px] h-[370px]" v-show="active == 'fail'">
-                    <el-result icon="error" :title="t('升级失败')">
-                        <template #icon>
-                            <img src="@/app/assets/images/error_icon.png" alt="" />
-                        </template>
-                        <template #extra>
-                            <el-scrollbar class="max-h-[120px] !overflow-auto text-[15px] text-[#4F516D] mb-[15px] mt-[-15px]">
-                                {{errorMsg}}
-                            </el-scrollbar>
-                            <el-button @click="handleBack()" class="!w-[90px]">错误信息</el-button>
-                            <el-button @click="showDialog=false" type="primary" class="!w-[90px]">完成</el-button>
-                        </template>
-                    </el-result>
+                <div class="p-[20px] mt-[20px] mx-[10px] border-[1px] border-[#E6E6E6] rounded-[10px]" v-if="upgradeContent.last_backup">
+                  <div class="flex justify-between items-center mt-[-9px]">
+                    <el-checkbox v-model="upgradeOption.is_need_backup" :label="t('upgrade.isNeedBackup')" :true-value="true" :false-value="false" size="large" ></el-checkbox>
+                    <el-button link type="primary" class="!text-[#9699B6]" @click="toBackupRecord">{{ t('upgrade.isNeedBackupBtn') }}</el-button>
+                  </div>
+
+                  <div class="text-[14px] text-[#374151] mb-[10px]">{{ t('upgrade.isNeedBackupTips') }}</div>
+                  <div class="text-[14px] text-[#9699B6]">{{ t('上次备份时间：') }}{{ upgradeContent.last_backup.complete_time }}</div>
                 </div>
-            </div>
-        </template>
-        <template #footer>
-            <div class="dialog-footer">
-                <!-- 查看升级内容 -->
-                <el-button v-if="step == 1 && upgradeContent.content.length && isAllowUpgrade" @click="step = 2" type="primary">{{ t("upgrade.upgradeButton") }}</el-button>
-                <el-button type="primary" v-show="step == 2 && showTerminal && upgradeTask && !errorDialog"  :loading="timeloading" class="!w-[140px]">已用时 {{ formatUpgradeDuration }}</el-button>
-                <template v-if="step == 2 && active != 'complete'">
-                <!--                <el-button v-if="active == 'content'" @click="showDialog = false">{{ t("return") }}</el-button>-->
-                    <el-button type="primary" :disabled="!is_pass" v-if="active == 'upgrade' && !upgradeTask" @click="() => { active = 'backup'; numberOfSteps = 1 }">{{ t("nextStep") }}</el-button>
-                    <el-button v-if="active == 'backup'" @click="() => { active = 'upgrade'; numberOfSteps = 1 } ">{{ t("prev") }}</el-button>
-                    <el-button type="primary" v-if="active == 'backup'" :loading="loading" @click="() => { upgradeAddonFn() }">{{ t("nextStep") }}</el-button>
-                    <el-button v-if="active == 'complete'" @click="showDialog = false">{{ t("complete") }}</el-button>
-                </template>
-            </div>
-        </template>
-    </el-dialog>
+              </div>
+            </el-scrollbar>
+          </div>
 
-    <el-dialog v-model="upgradeTipsShowDialog" :title="t('warning')" width="500px" draggable>
-        <span v-html="t('upgrade.upgradeTips')"></span>
-        <template #footer>
-            <div class="flex justify-end">
-                <el-button @click="upgradeTipsConfirm(true)" type="primary">{{ t("upgrade.knownToKnow") }}</el-button>
-                <el-button @click="handleUpgrade()" type="primary" plain :loading="readyLoading">{{ t("upgrade.upgradeButton") }}</el-button>
-                <el-button @click="upgradeTipsShowDialog = false">{{ t("cancel") }}</el-button>
-            </div>
+        </div>
+      </div>
+      <div v-if="step == 3">
+        <div class="mt-[10px]" v-show="active == 'complete'">
+          <el-result icon="success" :title="t('upgrade.upgradeSuccess')">
+            <template #icon>
+              <img src="@/app/assets/images/success_icon.png" alt="">
+            </template>
+            <template #extra>
+              <div class="text-[16px] text-[#4F516D] mt-[-5px]" v-show="upgradeTask && upgradeTask.executed && !upgradeTask.executed.includes('cloudBuild')">{{ t('upgrade.upgradeCompleteTips') }}</div>
+              <!-- <div class="text-[16px] text-[#9699B6] mt-[10px]">本次升级用时{{ formatUpgradeDuration }}</div> -->
+              <div class="w-[750px]" v-if="upgradeTask.cloud_build_error">
+                <el-alert class="!w-[750px] border-warning !border-[1px] !rounded-[0px] border-solid" type="warning" :closable="false">
+                  <template #title>
+                    <span class="text-error">警告：</span>
+                    <span class="text-black">升级过程中发生云编译错误</span>
+                  </template>
+                </el-alert>
+                <div class="text-left mt-[10px] leading-8">
+                  <div class="font-bold">为了保证系统稳定，建议您做以下处理:</div>
+                  <div><span class="w-[6px] h-[6px] rounded-[6px] bg-black inline-block mr-[10px]"></span>如果您是开发者，安装的框架或者插件二开过或者正在开发中，可能是因为您的本地代码不完整导致的云编译失败，需要自己调试并重新进行编译才算升级完成(云编译会把本地插件前端代码上传编译)。</div>
+                  <div><span class="w-[6px] h-[6px] rounded-[6px] bg-black inline-block mr-[10px]"></span>如果您没有二开过任何代码，可能是本地插件存在兼容性问题，请联系插件开发者或者官方客服解决。</div>
+                  <div><span class="w-[6px] h-[6px] rounded-[6px] bg-black inline-block mr-[10px]"></span>如果您的项目已经投入正式运营中，请立即回滚。</div>
+                </div>
+                <div class="text-left mt-[10px]">
+                  <div class="font-bold">编译信息错误</div>
+                  <div class="mt-[10px] text-secondary overflow-hidden line-clamp-4">
+                    {{  upgradeTask.cloud_build_error }}
+                  </div>
+                </div>
+                <div class="mt-[20px]">
+                  <el-button @click="handleBack()" class="!w-[90px]">更多信息</el-button>
+                  <el-button @click="showDialog=false" type="primary" plain class="!w-[90px]">我已知晓</el-button>
+                  <el-button @click="cloudBuildError('cloud_build_error_rollback')" type="primary" class="!w-[90px]">回滚</el-button>
+                </div>
+              </div>
+              <div class="mt-[20px]" v-else>
+                <el-button @click="handleBack()" class="!w-[90px]">返回</el-button>
+                <el-button @click="showDialog=false" type="primary" class="!w-[90px]">完成</el-button>
+              </div>
+            </template>
+          </el-result>
+        </div>
+        <div class="mt-[20px] h-[370px]" v-show="active == 'fail'">
+          <el-result icon="error" :title="t('升级失败')">
+            <template #icon>
+              <img src="@/app/assets/images/error_icon.png" alt="" />
+            </template>
+            <template #extra>
+              <el-scrollbar class="max-h-[120px] !overflow-auto text-[15px] text-[#4F516D] mb-[15px] mt-[-15px]">
+                {{errorMsg}}
+              </el-scrollbar>
+              <el-button @click="handleBack()" class="!w-[90px]">错误信息</el-button>
+              <el-button @click="showDialog=false" type="primary" class="!w-[90px]">完成</el-button>
+            </template>
+          </el-result>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="dialog-footer">
+        <!-- 查看升级内容 -->
+        <el-button v-if="step == 1 && upgradeContent.content.length && isAllowUpgrade" @click="step = 2" type="primary">{{ t("upgrade.upgradeButton") }}</el-button>
+        <el-button type="primary" v-show="step == 2 && showTerminal && upgradeTask && !errorDialog"  :loading="timeloading" class="!w-[140px]">已用时 {{ formatUpgradeDuration }}</el-button>
+        <template v-if="step == 2 && active != 'complete'">
+          <!--                <el-button v-if="active == 'content'" @click="showDialog = false">{{ t("return") }}</el-button>-->
+          <el-button type="primary" :disabled="!is_pass" v-if="active == 'upgrade' && !upgradeTask" @click="() => { active = 'backup'; numberOfSteps = 1 }">{{ t("nextStep") }}</el-button>
+          <el-button v-if="active == 'backup'" @click="() => { active = 'upgrade'; numberOfSteps = 1 } ">{{ t("prev") }}</el-button>
+          <el-button type="primary" v-if="active == 'backup'" :loading="loading" @click="() => { upgradeAddonFn() }">{{ t("nextStep") }}</el-button>
+          <el-button v-if="active == 'complete'" @click="showDialog = false">{{ t("complete") }}</el-button>
         </template>
-    </el-dialog>
+      </div>
+    </template>
+  </el-dialog>
 
-    <el-dialog v-model="cloudBuildErrorTipsShowDialog" :title="t('warning')" width="500px" draggable :show-close="false">
-        <span v-html="t('upgrade.cloudBuildErrorTips')"></span>
-        <template #footer>
-            <div class="flex justify-end">
-                <el-button @click="cloudBuildError('local')" type="primary">{{ t("upgrade.localBuild") }}</el-button>
-                <el-button @click="cloudBuildError('retry')" type="primary">{{ t("upgrade.cloudBuild") }}（{{ retrySecond }}S）</el-button>
-                <el-button @click="cloudBuildError('rollback')" type="primary">{{ t("upgrade.rollback") }}</el-button>
-            </div>
-        </template>
-    </el-dialog>
+  <el-dialog v-model="upgradeTipsShowDialog" :title="t('warning')" width="500px" draggable>
+    <span v-html="t('upgrade.upgradeTips')"></span>
+    <template #footer>
+      <div class="flex justify-end">
+        <el-button @click="upgradeTipsConfirm(true)" type="primary">{{ t("upgrade.knownToKnow") }}</el-button>
+        <el-button @click="handleUpgrade()" type="primary" plain :loading="readyLoading">{{ t("upgrade.upgradeButton") }}</el-button>
+        <el-button @click="upgradeTipsShowDialog = false">{{ t("cancel") }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="cloudBuildErrorTipsShowDialog" :title="t('warning')" width="500px" draggable :show-close="false">
+    <span v-html="t('upgrade.cloudBuildErrorTips')"></span>
+    <template #footer>
+      <div class="flex justify-end">
+        <el-button @click="cloudBuildError('local')" type="primary">{{ t("upgrade.localBuild") }}</el-button>
+        <el-button @click="cloudBuildError('retry')" type="primary">{{ t("upgrade.cloudBuild") }}（{{ retrySecond }}S）</el-button>
+        <el-button @click="cloudBuildError('rollback')" type="primary">{{ t("upgrade.rollback") }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <el-dialog v-model="dialogUpgradePrompt" title="升级提示" width="500" :before-close="handleClose">
+    <p>您当前使用的{{applicationType == 'app' ? '应用' : '插件'}}版本是 {{applicationVersion}}，若想升级到 {{newApplicationVersion}} 版本，需要先把框架从 v{{frameworkVersion}} 升级到 v{{ newFrameworkVersion }} 。</p>
+    <div class="flex items-center">
+      <span>如需升级框架，请点击升级框架操作。</span>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="upgradePromptConfirm">升级框架</el-button>
+        <el-button @click="dialogUpgradePrompt = false">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -237,12 +249,12 @@ import { t } from '@/lang'
 import { getVersions } from '@/app/api/auth'
 import { getFrameworkNewVersion } from '@/app/api/module'
 import {
-    getUpgradeContent,
-    getUpgradeTask,
-    upgradeAddon,
-    executeUpgrade,
-    preUpgradeCheck,
-    clearUpgradeTask, upgradeUserOperate
+  getUpgradeContent,
+  getUpgradeTask,
+  upgradeAddon,
+  executeUpgrade,
+  preUpgradeCheck,
+  clearUpgradeTask, upgradeUserOperate
 } from '@/app/api/upgrade'
 import { Terminal, TerminalFlash } from 'vue-web-terminal'
 import 'vue-web-terminal/lib/theme/dark.css'
@@ -270,20 +282,20 @@ const cloudBuildErrorTipsShowDialog = ref<boolean>(false)
 const retrySecond = ref(30)
 let retrySecondInterval: any = null
 const upgradeOption = ref({
-    is_need_backup: true,
-    is_need_cloudbuild: true
+  is_need_backup: true,
+  is_need_cloudbuild: true
 })
 
 // 升级步骤排除，backupCode 备份代码，backupSql 备份数据库
 const excludeSteps: any = ref([
-    {
-        name: '备份源码',
-        code: 'backupCode'
-    },
-    {
-        name: '备份数据库',
-        code: 'backupSql'
-    }
+  {
+    name: '备份源码',
+    code: 'backupCode'
+  },
+  {
+    name: '备份数据库',
+    code: 'backupSql'
+  }
 ])
 /**
  * 查询升级任务
@@ -296,144 +308,149 @@ let upgradeTimer: ReturnType<typeof setInterval> | null = null
 const errorDialog = ref(false)
 const errorMsg = ref('')
 const getUpgradeTaskFn = () => {
-    getUpgradeTask().then(({ data }) => {
-        if (!data) return
+  getUpgradeTask().then(({ data }) => {
+    if (!data) return
 
-        if (!upgradeContent.value) {
-            upgradeContent.value = data.upgrade_content
+    if (!upgradeContent.value) {
+      upgradeContent.value = data.upgrade_content
 
-            if (!data.upgrade_content || !Array.isArray(data.upgrade_content.content)) {
-                return
-            }
+      if (!data.upgrade_content || !Array.isArray(data.upgrade_content.content)) {
+        return
+      }
 
-            let upgradeCount = 0
-            let failUpgradeCount = 0
-            for (let i = 0; i < upgradeContent.value.content.length; i++) {
-                if (upgradeContent.value.content[i].version_list.length) {
-                    upgradeCount++
-                } else {
-                    failUpgradeCount++
-                }
-            }
-            if (upgradeContent.value.content.length == upgradeCount) {
-                isAllowUpgrade.value = true
-            } else if (upgradeContent.value.content.length == failUpgradeCount) {
-                isAllowUpgrade.value = false
-            }
+      let upgradeCount = 0
+      let failUpgradeCount = 0
+      for (let i = 0; i < upgradeContent.value.content.length; i++) {
+        if (upgradeContent.value.content[i].version_list.length) {
+          upgradeCount++
+        } else {
+          failUpgradeCount++
         }
+      }
+      if (upgradeContent.value.content.length == upgradeCount) {
+        isAllowUpgrade.value = true
+      } else if (upgradeContent.value.content.length == failUpgradeCount) {
+        isAllowUpgrade.value = false
+      }
+    }
 
-        // 检测有没有正在进行中的升级任务
-        if (!showDialog.value) {
-            showElNotification()
-            return
-        }
-        if (!upgradeTask.value) {
-            showTerminal.value = true
-            terminalRef.value.execute('clear')
-            terminalRef.value.execute('开始升级')
-            timeloading.value = true
-            upgradeStartTime.value = Date.now()
-            upgradeDuration.value = 0
-            if (upgradeTimer) clearInterval(upgradeTimer)
-            upgradeTimer = setInterval(() => {
-                upgradeDuration.value++
-            }, 1000)
-        }
+    // 检测有没有正在进行中的升级任务
+    if (!showDialog.value) {
+      showElNotification()
+      return
+    }
+    if (!upgradeTask.value) {
+      showTerminal.value = true
+      terminalRef.value.execute('clear')
+      terminalRef.value.execute('开始升级')
+      timeloading.value = true
+      upgradeStartTime.value = Date.now()
+      upgradeDuration.value = 0
+      if (upgradeTimer) clearInterval(upgradeTimer)
+      upgradeTimer = setInterval(() => {
+        upgradeDuration.value++
+      }, 1000)
+    }
 
-        upgradeTask.value = data
+    upgradeTask.value = data
 
-        data.log.forEach((item) => {
-            if (!upgradeLog.includes(item)) {
-                terminalRef.value.pushMessage({ content: `${item}` })
-                upgradeLog.push(item)
-            }
-        })
-        // 安装失败
-        if (data.error) {
-            data.error.forEach((item) => {
-                if (!errorLog.includes(item)) {
-                    terminalRef.value.pushMessage({ content: item, class: 'error' })
-                    errorLog.push(item)
-                    errorMsg.value = item
-                }
-            })
-            if (upgradeTimer) {
-                clearInterval(upgradeTimer)
-                upgradeTimer = null
-            }
-            timeloading.value = false
-        }
-        // 恢复完毕
-        if (data.step == 'restoreComplete') {
-            flashInterval && clearInterval(flashInterval)
-            step.value = 3
-            active.value = 'fail'
-            return
-        }
-        // 升级完成
-        if (data.step == 'upgradeComplete') {
-            if (data.cloud_build_error) {
-                terminalRef.value.pushMessage({ content: data.cloud_build_error, class: 'error' })
-            }
-            step.value = 3
-            active.value = 'complete'
-            numberOfSteps.value = 4
-            notificationEl && notificationEl.close()
-            emits('complete')
-            if (upgradeTimer) {
-                clearInterval(upgradeTimer)
-                upgradeTimer = null
-            }
-            timeloading.value = false
-            return
-        }
-        numberOfSteps.value = 2
-        active.value = 'upgrade'
-        executeUpgradeFn()
-    }).catch((err) => {
-        console.log(err)
+    data.log.forEach((item) => {
+      if (!upgradeLog.includes(item)) {
+        terminalRef.value.pushMessage({ content: `${item}` })
+        upgradeLog.push(item)
+      }
     })
+    // 安装失败
+    if (data.error) {
+      data.error.forEach((item) => {
+        if (!errorLog.includes(item)) {
+          terminalRef.value.pushMessage({ content: item, class: 'error' })
+          errorLog.push(item)
+          errorMsg.value = item
+        }
+      })
+      if (upgradeTimer) {
+        clearInterval(upgradeTimer)
+        upgradeTimer = null
+      }
+      timeloading.value = false
+    }
+    // 恢复完毕
+    if (data.step == 'restoreComplete') {
+      flashInterval && clearInterval(flashInterval)
+      step.value = 3
+      active.value = 'fail'
+      return
+    }
+    // 升级完成
+    if (data.step == 'upgradeComplete') {
+      if (data.cloud_build_error) {
+        terminalRef.value.pushMessage({ content: data.cloud_build_error, class: 'error' })
+      }
+      step.value = 3
+      active.value = 'complete'
+      numberOfSteps.value = 4
+      notificationEl && notificationEl.close()
+      emits('complete')
+      if (upgradeTimer) {
+        clearInterval(upgradeTimer)
+        upgradeTimer = null
+      }
+      timeloading.value = false
+      return
+    }
+    numberOfSteps.value = 2
+    active.value = 'upgrade'
+    executeUpgradeFn()
+  }).catch((err) => {
+    console.log(err)
+  })
+}
+getUpgradeTaskFn()
+
+const upgradePromptConfirm = ()=>{
+  dialogUpgradePrompt.value = false
+  open('niucloud-admin')
 }
 
-getUpgradeTaskFn()
 const isBack = ref(false)
 const handleBack = () => {
-    active.value = 'upgrade'
-    isBack.value = true
-    showTerminal.value = true
-    errorDialog.value = false // 隐藏错误弹窗
-    step.value = 2
+  active.value = 'upgrade'
+  isBack.value = true
+  showTerminal.value = true
+  errorDialog.value = false // 隐藏错误弹窗
+  step.value = 2
 }
 
 const formatUpgradeDuration = computed(() => {
-    const s = upgradeDuration.value
-    const h = Math.floor(s / 3600)
-    const m = Math.floor((s % 3600) / 60)
-    const sec = s % 60
-    return [
-        h > 0 ? `${h}小时` : '',
-        m > 0 ? `${m}分钟` : '',
-        `${sec}秒`
-    ].filter(Boolean).join('')
+  const s = upgradeDuration.value
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+  return [
+    h > 0 ? `${h}小时` : '',
+    m > 0 ? `${m}分钟` : '',
+    `${sec}秒`
+  ].filter(Boolean).join('')
 })
 
 const executeUpgradeFn = () => {
-    executeUpgrade().then(() => {
-        getUpgradeTaskFn()
-    }).catch((err) => {
-        if (err.message.indexOf('队列') != -1) {
-            retrySecond.value = 30
-            retrySecondInterval = setInterval(() => {
-                retrySecond.value--
-                if (retrySecond.value == 0) {
-                    cloudBuildError('retry')
-                }
-            }, 1000)
-            cloudBuildErrorTipsShowDialog.value = true
-        } else {
-            ElMessage({ message: err.message, type: 'error' })
+  executeUpgrade().then(() => {
+    getUpgradeTaskFn()
+  }).catch((err) => {
+    if (err.message.indexOf('队列') != -1) {
+      retrySecond.value = 30
+      retrySecondInterval = setInterval(() => {
+        retrySecond.value--
+        if (retrySecond.value == 0) {
+          cloudBuildError('retry')
         }
-    })
+      }, 1000)
+      cloudBuildErrorTipsShowDialog.value = true
+    } else {
+      ElMessage({ message: err.message, type: 'error' })
+    }
+  })
 }
 
 let notificationEl: any = null
@@ -441,34 +458,34 @@ let notificationEl: any = null
  * 升级中任务提示
  */
 const showElNotification = () => {
-    notificationEl = ElNotification.success({
-        title: t('warning'),
-        dangerouslyUseHTMLString: true,
-        message: h('div', {}, [t('upgrade.upgradingTips'), h('span', {
-            class: 'text-primary cursor-pointer',
-            onClick: elNotificationClick
-        }, [t('upgrade.clickView')])]),
-        duration: 0,
-        showClose: false
-    })
+  notificationEl = ElNotification.success({
+    title: t('warning'),
+    dangerouslyUseHTMLString: true,
+    message: h('div', {}, [t('upgrade.upgradingTips'), h('span', {
+      class: 'text-primary cursor-pointer',
+      onClick: elNotificationClick
+    }, [t('upgrade.clickView')])]),
+    duration: 0,
+    showClose: false
+  })
 }
 
 const elNotificationClick = () => {
-    showDialog.value = true
-    getUpgradeTaskFn()
-    step.value = 2
-    numberOfSteps.value = 3
-    active.value = 'upgrade'
-    notificationEl && notificationEl.close()
+  showDialog.value = true
+  getUpgradeTaskFn()
+  step.value = 2
+  numberOfSteps.value = 3
+  active.value = 'upgrade'
+  notificationEl && notificationEl.close()
 }
 
 const frameworkVersion = ref('')
 getVersions().then((res) => {
-    frameworkVersion.value = res.data.version.version
+  frameworkVersion.value = res.data.version.version
 })
 const newFrameworkVersion = ref('')
 getFrameworkNewVersion().then(({ data }) => {
-    newFrameworkVersion.value = data.last_version
+  newFrameworkVersion.value = data.last_version
 })
 
 /**
@@ -479,86 +496,92 @@ const repeat = ref(false)
 const readyLoading = ref(false)
 
 const handleUpgrade = async () => {
-    if (repeat.value) return
-    repeat.value = true
-    readyLoading.value = true
+  if (repeat.value) return
+  repeat.value = true
+  readyLoading.value = true
 
-    const appKey = upgradeContent.value?.upgrade_apps.join(',') != 'niucloud-admin' ? upgradeContent.value?.upgrade_apps.join(',') : ''
+  const appKey = upgradeContent.value?.upgrade_apps.join(',') != 'niucloud-admin' ? upgradeContent.value?.upgrade_apps.join(',') : ''
 
-    await preUpgradeCheck(appKey).then(async ({ data }) => {
-        upgradeCheck.value = data
-        is_pass.value = data.is_pass
-        active.value = 'upgrade'
-        !upgradeTask.value ? (numberOfSteps.value = 0) : numberOfSteps.value
-        upgradeTipsShowDialog.value = false
-        showDialog.value = true
-        repeat.value = false
-        readyLoading.value = false
-    }).catch(() => {
-        repeat.value = false
-        readyLoading.value = false
-    })
+  await preUpgradeCheck(appKey).then(async ({ data }) => {
+    upgradeCheck.value = data
+    is_pass.value = data.is_pass
+    active.value = 'upgrade'
+    !upgradeTask.value ? (numberOfSteps.value = 0) : numberOfSteps.value
+    upgradeTipsShowDialog.value = false
+    showDialog.value = true
+    repeat.value = false
+    readyLoading.value = false
+  }).catch(() => {
+    repeat.value = false
+    readyLoading.value = false
+  })
 }
 
 const upgradeAddonFn = () => {
-    if (!is_pass.value) return
+  if (!is_pass.value) return
+  if (loading.value) return
+  loading.value = true
+
+  const appKey = upgradeContent.value?.upgrade_apps.join(',') != 'niucloud-admin' ? upgradeContent.value?.upgrade_apps.join(',') : ''
+
+  upgradeAddon(appKey, upgradeOption.value).then(() => {
+    getUpgradeTaskFn()
+  }).catch(() => {
+    loading.value = false
+  })
+}
+const dialogUpgradePrompt = ref(false)
+const applicationVersion = ref('')
+const newApplicationVersion = ref('')
+const applicationType = ref('app')
+const open = (addonKey: string = '', callback = null, otherData: any = {}) => {
+  errorDialog.value = false // 隐藏错误弹窗
+  if (upgradeTask.value) {
+    ElMessage({ message: '已有正在执行中的升级任务', type: 'error' })
+    showDialog.value = true
+    step.value = 2
+    numberOfSteps.value = 3
+    active.value = 'upgrade'
+    if (callback) callback()
+  } else {
+    if (addonKey && addonKey.indexOf('niucloud-admin') == -1 && frameworkVersion.value != newFrameworkVersion.value) {
+      applicationVersion.value = otherData.install_info.version
+      newApplicationVersion.value = otherData.version
+      applicationType.value = otherData.type
+      dialogUpgradePrompt.value = true
+      if (callback) callback()
+      return
+    }
     if (loading.value) return
     loading.value = true
-
-    const appKey = upgradeContent.value?.upgrade_apps.join(',') != 'niucloud-admin' ? upgradeContent.value?.upgrade_apps.join(',') : ''
-
-    upgradeAddon(appKey, upgradeOption.value).then(() => {
-        getUpgradeTaskFn()
-    }).catch(() => {
-        loading.value = false
-    })
-}
-
-const open = (addonKey: string = '', callback = null) => {
-    errorDialog.value = false // 隐藏错误弹窗
-    if (upgradeTask.value) {
-        ElMessage({ message: '已有正在执行中的升级任务', type: 'error' })
-        showDialog.value = true
-        step.value = 2
-        numberOfSteps.value = 3
-        active.value = 'upgrade'
-        if (callback) callback()
-    } else {
-        if (addonKey && addonKey.indexOf('niucloud-admin') == -1 && frameworkVersion.value != newFrameworkVersion.value) {
-            ElMessage({ message: '存在新版本框架，请先升级框架', type: 'error' })
-            if (callback) callback()
-            return
+    getUpgradeContent(addonKey).then(({ data }) => {
+      loading.value = false
+      upgradeContent.value = data
+      let upgradeCount = 0
+      let failUpgradeCount = 0
+      for (let i = 0; i < upgradeContent.value.content.length; i++) {
+        if (upgradeContent.value.content[i].version_list.length) {
+          upgradeCount++
+        } else {
+          failUpgradeCount++
         }
-        if (loading.value) return
-        loading.value = true
-        getUpgradeContent(addonKey).then(({ data }) => {
-            loading.value = false
-            upgradeContent.value = data
-            let upgradeCount = 0
-            let failUpgradeCount = 0
-            for (let i = 0; i < upgradeContent.value.content.length; i++) {
-                if (upgradeContent.value.content[i].version_list.length) {
-                    upgradeCount++
-                } else {
-                    failUpgradeCount++
-                }
-            }
-            if (upgradeContent.value.content.length == upgradeCount) {
-                isAllowUpgrade.value = true
-            } else if (upgradeContent.value.content.length == failUpgradeCount) {
-                isAllowUpgrade.value = false
-            }
-            if (Storage.get('upgradeTipsLock')) {
-                handleUpgrade()
-            } else {
-                upgradeTipsShowDialog.value = true
-            }
-            if (callback) callback()
-        }).catch(() => {
-            loading.value = false
-            if (callback) callback()
-        })
-    }
+      }
+      if (upgradeContent.value.content.length == upgradeCount) {
+        isAllowUpgrade.value = true
+      } else if (upgradeContent.value.content.length == failUpgradeCount) {
+        isAllowUpgrade.value = false
+      }
+      if (Storage.get('upgradeTipsLock')) {
+        handleUpgrade()
+      } else {
+        upgradeTipsShowDialog.value = true
+      }
+      if (callback) callback()
+    }).catch(() => {
+      loading.value = false
+      if (callback) callback()
+    })
+  }
 }
 
 /**
@@ -567,70 +590,70 @@ const open = (addonKey: string = '', callback = null) => {
 let flashInterval: any = null
 const terminalFlash = new TerminalFlash()
 const onExecCmd = (key, command, success, failed, name) => {
-    if (command == '开始升级') {
-        success(terminalFlash)
-        const frames = makeIterator(['/', '——', '\\', '|'])
-        flashInterval = setInterval(() => {
-            terminalFlash.flush('> ' + frames.next().value)
-        }, 150)
-    }
+  if (command == '开始升级') {
+    success(terminalFlash)
+    const frames = makeIterator(['/', '——', '\\', '|'])
+    flashInterval = setInterval(() => {
+      terminalFlash.flush('> ' + frames.next().value)
+    }, 150)
+  }
 }
 
 const makeIterator = (array: string[]) => {
-    let nextIndex = 0
-    return {
-        next () {
-            if (nextIndex + 1 == array.length) {
-                nextIndex = 0
-            }
-            return { value: array[nextIndex++] }
-        }
+  let nextIndex = 0
+  return {
+    next () {
+      if (nextIndex + 1 == array.length) {
+        nextIndex = 0
+      }
+      return { value: array[nextIndex++] }
     }
+  }
 }
 
 const dialogClose = (done: () => {}) => {
-    if (active.value == 'upgrade' && upgradeTask.value && ['upgradeComplete', 'restoreComplete'].includes(upgradeTask.value.step) === false && !isBack.value) {
-        ElMessageBox.confirm(t('upgrade.showDialogCloseTips'), t('warning'), {
-            confirmButtonText: t('confirm'),
-            cancelButtonText: t('cancel'),
-            type: 'warning'
-        }).then(() => {
-            done()
-        })
-    } else {
-        done()
-    }
+  if (active.value == 'upgrade' && upgradeTask.value && ['upgradeComplete', 'restoreComplete'].includes(upgradeTask.value.step) === false && !isBack.value) {
+    ElMessageBox.confirm(t('upgrade.showDialogCloseTips'), t('warning'), {
+      confirmButtonText: t('confirm'),
+      cancelButtonText: t('cancel'),
+      type: 'warning'
+    }).then(() => {
+      done()
+    })
+  } else {
+    done()
+  }
 }
 
 watch(
     () => showDialog.value,
     () => {
-        if (!showDialog.value) {
-            clearUpgradeTaskFn()
-        }
+      if (!showDialog.value) {
+        clearUpgradeTaskFn()
+      }
     }
 )
 
 const clearUpgradeTaskFn = () => {
-    active.value = 'upgrade'
-    loading.value = false
-    upgradeTask.value = null
-    isBack.value = false
-    errorDialog.value = false
-    errorMsg.value = ''
-    showTerminal.value = false
-    upgradeLog = []
-    errorLog = []
-    numberOfSteps.value = 0
-    flashInterval && clearInterval(flashInterval)
-    retrySecondInterval && clearInterval(retrySecondInterval)
-    upgradeOption.value = {
-        is_need_backup: true,
-        is_need_cloudbuild: true
-    }
-    step.value = 1
-    clearUpgradeTask().then(() => {
-    })
+  active.value = 'upgrade'
+  loading.value = false
+  upgradeTask.value = null
+  isBack.value = false
+  errorDialog.value = false
+  errorMsg.value = ''
+  showTerminal.value = false
+  upgradeLog = []
+  errorLog = []
+  numberOfSteps.value = 0
+  flashInterval && clearInterval(flashInterval)
+  retrySecondInterval && clearInterval(retrySecondInterval)
+  upgradeOption.value = {
+    is_need_backup: true,
+    is_need_cloudbuild: true
+  }
+  step.value = 1
+  clearUpgradeTask().then(() => {
+  })
 }
 
 /**
@@ -638,289 +661,289 @@ const clearUpgradeTaskFn = () => {
  * @param event
  */
 const cloudBuildError = (event: string) => {
-    cloudBuildErrorTipsShowDialog.value = false
-    switch (event) {
-        case 'local':
-            upgradeUserOperate(event).then(() => {
-                getUpgradeTaskFn()
-            })
-            break
-        case 'retry':
-            executeUpgradeFn()
-            retrySecondInterval && clearInterval(retrySecondInterval)
-            break
-        case 'rollback':
-            upgradeUserOperate(event).then(() => {
-                getUpgradeTaskFn()
-            })
-            break
-        case 'cloud_build_error_rollback':
-            upgradeUserOperate(event).then(() => {
-                handleBack()
-                executeUpgradeFn()
-            })
-            break
-    }
+  cloudBuildErrorTipsShowDialog.value = false
+  switch (event) {
+    case 'local':
+      upgradeUserOperate(event).then(() => {
+        getUpgradeTaskFn()
+      })
+      break
+    case 'retry':
+      executeUpgradeFn()
+      retrySecondInterval && clearInterval(retrySecondInterval)
+      break
+    case 'rollback':
+      upgradeUserOperate(event).then(() => {
+        getUpgradeTaskFn()
+      })
+      break
+    case 'cloud_build_error_rollback':
+      upgradeUserOperate(event).then(() => {
+        handleBack()
+        executeUpgradeFn()
+      })
+      break
+  }
 }
 
 const timeSplit = (str: string) => {
-    const [date, time] = str.split(' ')
-    const [hours, minutes] = time.split(':')
-    return [date, `${hours}:${minutes}`]
+  const [date, time] = str.split(' ')
+  const [hours, minutes] = time.split(':')
+  return [date, `${hours}:${minutes}`]
 }
 
 const upgradeTipsConfirm = (isLock: boolean = false) => {
-    isLock && Storage.set({ key: 'upgradeTipsLock', data: isLock })
-    upgradeTipsShowDialog.value = false
-    !isLock && (showDialog.value = true)
+  isLock && Storage.set({ key: 'upgradeTipsLock', data: isLock })
+  upgradeTipsShowDialog.value = false
+  !isLock && (showDialog.value = true)
 }
 const activeName = ref(0)
 const numberOfSteps = ref(0)
 
 const toBackupRecord = () => {
-    const routeUrl = router.resolve({
-        path: '/tools/backup_records'
-    })
-    window.open(routeUrl.href, '_blank')
+  const routeUrl = router.resolve({
+    path: '/tools/backup_records'
+  })
+  window.open(routeUrl.href, '_blank')
 }
 
 defineExpose({
-    open,
-    loading
+  open,
+  loading
 })
 </script>
 
 <style lang="scss" scoped>
 :deep(.el-button){
-    border-radius: 4px !important;
+  border-radius: 4px !important;
 }
 .table-head-bg {
-    background-color: var(--el-table-header-bg-color);
+  background-color: var(--el-table-header-bg-color);
 }
 :deep(.el-checkbox__label){
-    color: var(--el-color-primary);
+  color: var(--el-color-primary);
 }
 
 :deep(.terminal .t-log-box span) {
-    white-space: pre-wrap;
+  white-space: pre-wrap;
 }
 
 :deep(.number-of-steps) {
+  .el-step__line {
+    margin: 0 25px;
+    background: #dddddd;
+  }
+
+  .el-step__head {
+    margin-top: 10px;
+  }
+
+  .is-success {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+
+    .el-step__icon {
+      background: var(--el-color-primary);
+      color: #fff;
+      // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
+
+      i {
+        color: #fff;
+      }
+    }
+
     .el-step__line {
-        margin: 0 25px;
-        background: #dddddd;
+      margin: 0 25px;
+      background: var(--el-color-primary);
+    }
+  }
+  .is-finish {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+
+    .el-step__icon {
+      background: var(--el-color-primary)!important;
+      color: #fff !important;
+      // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
+
+      i {
+        color: #fff;
+      }
     }
 
-    .el-step__head {
-        margin-top: 10px;
+    .el-step__line {
+      margin: 0 25px;
+      background: var(--el-color-primary);
     }
+  }
 
-    .is-success {
-        color: var(--el-color-primary);
-        border-color: var(--el-color-primary);
+  .is-process {
+    color: var(--el-color-primary);
+    font-weight: inherit;
 
-        .el-step__icon {
-            background: var(--el-color-primary);
-            color: #fff;
-            // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
-
-            i {
-                color: #fff;
-            }
-        }
-
-        .el-step__line {
-            margin: 0 25px;
-            background: var(--el-color-primary);
-        }
+    // font-size: 18px;
+    .el-step__icon {
+      padding: 10px;
+      border: 1px solid var(--el-color-primary);
+      background: var(--el-color-primary)!important;
+      color: #fff !important;
+      // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
     }
-    .is-finish {
-        color: var(--el-color-primary);
-        border-color: var(--el-color-primary);
+  }
 
-        .el-step__icon {
-            background: var(--el-color-primary)!important;
-            color: #fff !important;
-            // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
-
-            i {
-                color: #fff;
-            }
-        }
-
-        .el-step__line {
-            margin: 0 25px;
-            background: var(--el-color-primary);
-        }
-    }
-
-    .is-process {
-        color: var(--el-color-primary);
-        font-weight: inherit;
-
-        // font-size: 18px;
-        .el-step__icon {
-            padding: 10px;
-            border: 1px solid var(--el-color-primary);
-            background: var(--el-color-primary)!important;
-            color: #fff !important;
-            // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
-        }
-    }
-
-    .is-wait {
-        color: #333;
-    }
+  .is-wait {
+    color: #333;
+  }
 }
 :deep(.el-dialog__title){
-    font-size: 20px;
-    font-weight: bold;
+  font-size: 20px;
+  font-weight: bold;
 }
 :deep(.el-result__title p){
-    font-size: 25px;
-    color: #1D1F3A;
-    font-weight: 500;
+  font-size: 25px;
+  color: #1D1F3A;
+  font-weight: 500;
 }
 :deep(.el-result__subtitle p){
-    font-size: 15px;
-    color: #4F516D;
-    font-weight: 500;
-    word-break: break-all;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
+  font-size: 15px;
+  color: #4F516D;
+  font-weight: 500;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 </style>
 
 <style scoped>
 .el-timeline-item {
-    min-height: 100px;
+  min-height: 100px;
 }
 
 .el-timeline-item >>> .el-timeline-item__node--normal {
-    left: 117px;
-    width: 18px;
-    height: 18px;
+  left: 117px;
+  width: 18px;
+  height: 18px;
 
-    background: rgba(25, 103, 249, 0.12) !important;
-    border-radius: 50%;
-    /* 创建圆形 */
-    position: relative;
-    /* 用于定位伪元素 */
+  background: rgba(25, 103, 249, 0.12) !important;
+  border-radius: 50%;
+  /* 创建圆形 */
+  position: relative;
+  /* 用于定位伪元素 */
 }
 
 .el-timeline-item >>> .el-timeline-item__node--normal::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 8px;
-    /* 中心圆直径 */
-    height: 8px;
-    background-color: var(--el-color-primary);
-    /* 中心圆颜色 */
-    border-radius: 50%;
-    /* 中心圆为圆形 */
-    transform: translate(-50%, -50%);
-    /* 居中显示 */
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  /* 中心圆直径 */
+  height: 8px;
+  background-color: var(--el-color-primary);
+  /* 中心圆颜色 */
+  border-radius: 50%;
+  /* 中心圆为圆形 */
+  transform: translate(-50%, -50%);
+  /* 居中显示 */
 }
 
 .el-timeline-item >>> .el-timeline-item__tail {
-    left: 125px;
-    border-left-color: #dddddd;
-    border-left-style: dashed;
-    margin: 24px 0 12px;
-    height: calc(100% - 24px - 12px);
+  left: 125px;
+  border-left-color: #dddddd;
+  border-left-style: dashed;
+  margin: 24px 0 12px;
+  height: calc(100% - 24px - 12px);
 }
 
 .time-dialog-wrap >>> .el-dialog__header {
-    padding: 10px 20px;
-    height: 25px;
-    line-height: 25px;
-    text-align: left;
-    background: #fff;
-    border-bottom: solid 1px #e4e7ed;
+  padding: 10px 20px;
+  height: 25px;
+  line-height: 25px;
+  text-align: left;
+  background: #fff;
+  border-bottom: solid 1px #e4e7ed;
 }
 
 .time-dialog-wrap >>> .el-card__body {
-    padding: 8px;
+  padding: 8px;
 }
 
 .time-dialog-wrap >>> .el-card.is-always-shadow {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 .time-dialog-wrap >>> .el-dialog__headerbtn .el-dialog__close {
-    color: #666;
+  color: #666;
 }
 
 .time-dialog-wrap >>> .el-dialog__headerbtn:hover .el-dialog__close {
-    color: #666;
+  color: #666;
 }
 
 .time-dialog-wrap >>> .el-dialog__headerbtn {
-    top: 14px;
+  top: 14px;
 }
 
 .time-dialog-wrap >>> .el-collapse {
-    margin-left: 119px;
-    border: none;
-    margin-top: -22px;
+  margin-left: 119px;
+  border: none;
+  margin-top: -22px;
 }
 
 .time-dialog-wrap >>> .el-collapse-item__header {
-    border: none;
-    line-height: 25px;
-    height: 25px;
-    position: relative;
-    z-index: 999;
+  border: none;
+  line-height: 25px;
+  height: 25px;
+  position: relative;
+  z-index: 999;
 }
 
 .time-dialog-wrap >>> .el-collapse-item__wrap {
-    border: none;
+  border: none;
 }
 
 .time-dialog-wrap >>> .el-collapse-item__content {
-    margin-top: 15px;
-    padding-bottom: 0 !important;
+  margin-top: 15px;
+  padding-bottom: 0 !important;
 }
 
 .time-dialog-wrap >>> .el-timeline-item__node--01 {
-    width: 18px !important;
-    height: 18px !important;
-    left: 117px !important;
+  width: 18px !important;
+  height: 18px !important;
+  left: 117px !important;
 }
 </style>
 <style>
 .time-dialog-wrap .el-dialog {
-    margin: 0 auto !important;
-    max-height: 90%;
-    overflow: hidden;
-    top: 5%;
+  margin: 0 auto !important;
+  max-height: 90%;
+  overflow: hidden;
+  top: 5%;
 }
 
 .time-dialog-wrap .el-dialog {
-    margin: 0 auto !important;
-    height: 65%;
-    overflow: hidden;
-    top: 10%;
+  margin: 0 auto !important;
+  height: 65%;
+  overflow: hidden;
+  top: 10%;
 }
 
 .time-dialog-wrap .el-dialog__body {
-    position: absolute;
-    left: 0;
-    top: 46px;
-    bottom: 0;
-    right: 0;
-    z-index: 1;
-    overflow: hidden;
-    overflow-y: auto;
-    padding: 10px 20px 0 0;
+  position: absolute;
+  left: 0;
+  top: 46px;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 10px 20px 0 0;
 }
 
 .time-dialog-wrap .el-timeline-item__wrapper {
-    top: -20px !important;
+  top: -20px !important;
 }
 </style>
diff --git a/admin/src/app/lang/zh-cn/setting.login.json b/admin/src/app/lang/zh-cn/setting.login.json
index 1eec51781..77f29d7ce 100644
--- a/admin/src/app/lang/zh-cn/setting.login.json
+++ b/admin/src/app/lang/zh-cn/setting.login.json
@@ -17,7 +17,7 @@
   "mobileOrUsernameNoEmpty": "普通注册方式至少需启用一种",
   "loginPageSet": "界面设置",
   "bgUrl": "背景图",
-  "bgUrlPlaceholder": "建议图片尺寸：750*669像素；图片格式：jpg、png、jpeg",
+  "bgUrlPlaceholder": "前台快捷登录/注册页的背景图，建议图片尺寸：750*669像素；图片格式：jpg、png、jpeg",
   "desc": "描述",
   "descPlaceholder": "请输入描述"
 }
diff --git a/admin/src/app/lang/zh-cn/setting.system.json b/admin/src/app/lang/zh-cn/setting.system.json
index af44cb0a2..3acaeb4d9 100644
--- a/admin/src/app/lang/zh-cn/setting.system.json
+++ b/admin/src/app/lang/zh-cn/setting.system.json
@@ -30,8 +30,8 @@
   "customerServiceCode": "客服二维码",
   "contactsTel": "联系电话",
   "contactsTelPlaceholder": "请输入联系电话",
-  "logoPlaceholder": "建议图片尺寸：210*30像素；图片格式：jpg、png、jpeg。",
-  "iconPlaceholder": "建议图片尺寸：100*100像素；图片格式：jpg、png、jpeg。",
+  "logoPlaceholder": "管理系统左上角的长方形Logo，建议图片尺寸：210*30像素；图片格式：jpg、png、jpeg。",
+  "iconPlaceholder": "管理系统左上角的正方形Logo，建议图片尺寸：100*100像素；图片格式：jpg、png、jpeg。",
   "siteLoginLogo": "站点登录Logo",
   "siteLoginLogoTips": "站点端登录Logo，建议图片尺寸：132*40像素；图片格式：jpg、png、jpeg。",
   "siteLoginBgImg": "站点登录背景图",
diff --git a/admin/src/app/views/channel/weapp/code.vue b/admin/src/app/views/channel/weapp/code.vue
index 4bb251c62..ca6dabd10 100644
--- a/admin/src/app/views/channel/weapp/code.vue
+++ b/admin/src/app/views/channel/weapp/code.vue
@@ -479,7 +479,7 @@ const handleFailReason = (data: any) => {
 }
 
 const helpInfo = () => {
-    window.open('https://doc.niucloud.com/saasUse.html?keywords=/configFAQ/minWaChatUpload')
+    window.open('https://doc.press.niucloud.com/php/saas-framework/use/configFAQ/minWaChatUpload.html')
 }
 
 const knownToKnow = () => {
diff --git a/admin/src/app/views/channel/weapp/template.vue b/admin/src/app/views/channel/weapp/template.vue
index e093ffb18..9db5bcd4e 100644
--- a/admin/src/app/views/channel/weapp/template.vue
+++ b/admin/src/app/views/channel/weapp/template.vue
@@ -33,6 +33,12 @@
                         </template>
                     </el-table-column>
 
+                    <el-table-column :label="t('消息类型')" min-width="100" align="center">
+                        <template #default="{ row }">
+                            <span class="text-[#fff] rounded-[3px] px-[8px] py-[2px]" :class="{'bg-[#008000]': row.receiver_type == 1, 'bg-[#0000ff]': row.receiver_type == 0}">{{ row.receiver_type == 1 ? t('buyerNews') : t('sellerMessage') }}</span>
+                        </template>
+                    </el-table-column>
+
                     <el-table-column :label="t('response')" min-width="180">
                         <template #default="{ row }">
                             <div v-for="(item, index) in row.weapp.content" :key="'a' + index" class="text-left">{{ item.join(":") }}</div>
diff --git a/admin/src/app/views/channel/wechat/template.vue b/admin/src/app/views/channel/wechat/template.vue
index 1df0e57b5..b9c2f688d 100644
--- a/admin/src/app/views/channel/wechat/template.vue
+++ b/admin/src/app/views/channel/wechat/template.vue
@@ -15,50 +15,53 @@
                 <el-tab-pane :label="t('reply')" name="/channel/wechat/reply" />
             </el-tabs>
 
-            <el-table :data="cronTableData.data" :span-method="templateSpan" size="large" v-loading="cronTableData.loading">
-                <template #empty>
-                    <span>{{ !cronTableData.loading ? t('emptyData') : '' }}</span>
-                </template>
-
-                <el-table-column prop="addon_name" :label="t('addon')" min-width="120" />
-                <el-table-column prop="name" :show-overflow-tooltip="true" :label="t('name')" min-width="150" >
-                    <template #default="{ row }">
-                        <div class="flex items-center">
-                            <span class="mr-[5px]">{{row.name }}</span>
-                            <el-tooltip :content="row.wechat.tips" v-if="row.wechat.tips" placement="top">
-                                <icon name="element WarningFilled" />
-                            </el-tooltip>
-                        </div>
+            <el-alert :title="t('微信平台最多支持25个消息模板获取时请注意微信平台剩余模板数量是否充足')" type="info" show-icon />
+            <div class="mt-[20px]">
+                <el-table :data="cronTableData.data" :span-method="templateSpan" size="large" v-loading="cronTableData.loading">
+                    <template #empty>
+                        <span>{{ !cronTableData.loading ? t('emptyData') : '' }}</span>
                     </template>
-                </el-table-column>
 
-                <el-table-column :label="t('messageType')" min-width="100" align="center">
-                    <template #default="{ row }">
-                        <span>{{ row.message_type == 1 ? t('buyerNews') : t('sellerMessage') }}</span>
-                    </template>
-                </el-table-column>
+                    <el-table-column prop="addon_name" :label="t('addon')" min-width="120" />
+                    <el-table-column prop="name" :show-overflow-tooltip="true" :label="t('name')" min-width="150" >
+                        <template #default="{ row }">
+                            <div class="flex items-center">
+                                <span class="mr-[5px]">{{row.name }}</span>
+                                <el-tooltip :content="row.wechat.tips" v-if="row.wechat.tips" placement="top">
+                                    <icon name="element WarningFilled" />
+                                </el-tooltip>
+                            </div>
+                        </template>
+                    </el-table-column>
 
-                <el-table-column :label="t('isStart')" min-width="100" align="center">
-                    <template #default="{ row }">
-                        {{ row.is_wechat == 1 ? t('startUsing') : t('statusDeactivate') }}
-                    </template>
-                </el-table-column>
+                    <el-table-column :label="t('messageType')" min-width="100" align="center">
+                        <template #default="{ row }">
+                            <span class="text-[#fff] rounded-[3px] px-[8px] py-[2px]" :class="{'bg-[#008000]': row.receiver_type == 1, 'bg-[#0000ff]': row.receiver_type == 0}">{{ row.receiver_type == 1 ? t('buyerNews') : t('sellerMessage') }}</span>
+                        </template>
+                    </el-table-column>
 
-                <el-table-column :label="t('response')" min-width="180">
-                    <template #default="{ row }">
-                        <div v-for="(item, index) in row.wechat.content" :key="'a' + index" class="text-left">{{ item.join("：") }}</div>
-                    </template>
-                </el-table-column>
+                    <el-table-column :label="t('isStart')" min-width="100" align="center">
+                        <template #default="{ row }">
+                            {{ row.is_wechat == 1 ? t('startUsing') : t('statusDeactivate') }}
+                        </template>
+                    </el-table-column>
 
-                <el-table-column prop="wechat_template_id" :label="t('serialNumber')" min-width="140" />
+                    <el-table-column :label="t('response')" min-width="180">
+                        <template #default="{ row }">
+                            <div v-for="(item, index) in row.wechat.content" :key="'a' + index" class="text-left">{{ item.join("：") }}</div>
+                        </template>
+                    </el-table-column>
 
-                <el-table-column :label="t('operation')" fixed="right" align="right" width="200">
-                    <template #default="{ row }">
-                        <el-button type="primary" link @click="infoSwitch(row)">{{ row.is_wechat == 1 ? t('close') : t('open') }}</el-button>
-                        <el-button type="primary" link @click="batchAcquisitionFn(row)">{{ t('regain') }}</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+                    <el-table-column prop="wechat_template_id" :label="t('serialNumber')" min-width="140" />
+
+                    <el-table-column :label="t('operation')" fixed="right" align="right" width="200">
+                        <template #default="{ row }">
+                            <el-button type="primary" link @click="infoSwitch(row)">{{ row.is_wechat == 1 ? t('close') : t('open') }}</el-button>
+                            <el-button type="primary" link @click="batchAcquisitionFn(row)">{{ t('regain') }}</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
         </el-card>
     </div>
 </template>
diff --git a/admin/src/app/views/index/store.vue b/admin/src/app/views/index/store.vue
index c27d87873..75d9b0933 100644
--- a/admin/src/app/views/index/store.vue
+++ b/admin/src/app/views/index/store.vue
@@ -1,601 +1,953 @@
 <template>
-    <!--应用市场-->
-    <div class="main-container bg-body min-h-[70vh]" v-loading="loading">
-        <el-card class="box-card !border-none" shadow="never" v-if="!loading">
-            <div class="flex items-center mb-4">
-                <div class="flex items-center flex-1">
-                    <h2 class="text-lg font-semibold mr-[20px]">应用列表</h2>
-                    <button class="text-gray-500 text-sm mr-[20px]" @click="activeNameTabFn('installed')" :class="{'!text-primary': activeName == 'installed'}">已安装</button>
-                    <button class="text-gray-500 text-sm mr-[20px]" @click="activeNameTabFn('uninstalled')" :class="{'!text-primary': activeName == 'uninstalled'}">未安装</button>
-                    <button class="text-gray-500 text-sm mr-[20px]" @click="activeNameTabFn('all')" :class="{'!text-primary': activeName == 'all'}">已购买</button>
-                    <button class="text-gray-500 text-sm relative" @click="activeNameTabFn('recentlyUpdated')" :class="{'!text-primary': activeName == 'recentlyUpdated'}">
-                        可更新
-                        <div v-if="localList.recentlyUpdated.length" class="w-[8px] h-[8px] bg-[red] rounded-[8px] z-1 absolute top-[-2px] right-[-2px]"></div>
-                    </button>
-                </div>
-                <i class="iconfont cursor-pointer" @click="switchShowType" :class="showType == 'card' ? 'iconliebiao' : 'iconliebiaoqiehuan'"></i>
-            </div>
-
-            <!-- 系统版本栏 -->
-            <div class="flex items-center justify-between bg-body p-4 rounded-md border rounded border-solid border-[var(--el-color-info-light-8)]">
-                <div class="flex">
-                    <div class="flex items-center">
-                        <div class="w-[40px] h-[40px] bg-purple-100 rounded flex items-center justify-center mr-2 relative">
-                            <img class="max-w-full max-h-full" src="@/app/assets/images/app_store/system_version.png" alt="" />
-                            <div v-if="frameworkVersion != frameworkNewVersion" class="w-[8px] h-[8px] bg-[red] rounded-[8px] z-1 absolute top-[-2px] right-[-2px]"></div>
-                        </div>
-                        <div>
-                            <p class="text-sm font-bold">系统版本:
-                                <span v-if="frameworkVersion">V{{frameworkVersion}} ({{frameworkVersionCode}})</span>
-                            </p>
-                            <p class="text-xs text-gray-500">最新版本: V{{ frameworkNewVersion }}</p>
-                        </div>
-                        <el-button class="ml-[25px]" @click="updateInformationFn({key: 'niucloud-admin'})"><el-icon class="mr-[5px]"><DocumentCopy /></el-icon>更新记录</el-button>
-                    </div>
-                    <div class="border-r mx-[25px] border-solid border-[var(--el-color-info-light-8)] hidden xl:inline-block"></div>
-                    <div class="items-center hidden xl:flex">
-                        <div class="flex items-center mr-4">
-                            <div class="w-[40px] h-[40px] bg-green-100 rounded flex items-center justify-center mr-2">
-                                <img class="max-w-full max-h-full" src="@/app/assets/images/app_store/app_manage.png" alt="" />
-                            </div>
-                            <div>
-                                <p class="text-sm font-bold">应用管理</p>
-                                <p class="text-xs text-gray-500">
-                                    <span class="mr-[15px] text-success">已安装: {{ localList.installed.length }}</span>
-                                    <span class="mr-[15px] text-warning">可更新: {{ localList.recentlyUpdated.length }}</span>
-                                    <span class="mr-[15px] text-primary">未安装: {{ localList.uninstalled.length }}</span>
-                                    <span class="mr-[15px] text-error">已购买: {{ localList.all.length }}</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex items-center flex-1 w-0 justify-end">
-                    <el-button @click="oneClickRepair"><i class="iconfont iconyijianxiufu mr-[5px]" ></i>一键修复</el-button>
-                    <el-button type="primary" v-show="activeName == 'uninstalled'" @click="batchInstall"><i class="iconfont iconanzhuang1 mr-[5px]"></i>安装<span v-if="batchUpgradeApp.length">({{ batchUpgradeApp.length }})</span></el-button>
-                    <el-button type="primary" v-show="activeName == 'recentlyUpdated' || (frameworkVersion != frameworkNewVersion && activeName != 'uninstalled')" @click="batchUpgrade">
-                        <i class="iconfont iconyijianshengji mr-[5px]"></i>一键升级<span v-if="batchUpgradeApp.length">({{ batchUpgradeApp.length }})</span>
-                    </el-button>
-                    <el-checkbox label="全选" :model-value="localList[activeName].length && localList[activeName].length == batchUpgradeApp.length" @change="appKeyAllSelect" v-show="activeName == 'uninstalled' || activeName == 'recentlyUpdated'" value="Value A" class="ml-[12px]"/>
-                </div>
-            </div>
-        </el-card>
-
-        <div class="flex mb-4 flex-wrap" v-show="showType == 'card'" v-if="localList[activeName].length && !loading">
-            <div class="rounded-md border p-[16px] app-card mb-[20px] ml-[20px] cursor-pointer"
-                 @click="appKeySingleSelect($event, row.key)"
-                 :class="{'selected': batchUpgradeApp.includes(row.key)}" v-for="row in localList[activeName]" :key="row.key">
-
-                <div class="flex justify-between mb-2">
-                    <div class="flex items-center flex-1 w-0">
-                        <div class="w-[48px] h-[48px] bg-purple-100 rounded flex items-center justify-center mr-2 relative">
-                            <div class="w-full h-full overflow-hidden rounded">
-                                <el-image class="w-full h-full overflow-hidden rounded" :src="row.icon" fit="contain">
-                                    <template #error>
-                                        <div class="flex items-center w-full h-full">
-                                            <img class="max-w-full max-h-full" src="@/app/assets/images/icon-addon-one.png" alt="" />
-                                        </div>
-                                    </template>
-                                </el-image>
-                                <img src="@/app/assets/images/app_store/app_type_addon.png" alt="" class="absolute z-1 right-0 bottom-0" v-if="row.type == 'addon'">
-                                <img src="@/app/assets/images/app_store/app_type_app.png" alt="" class="absolute z-1 right-0 bottom-0" v-else>
-                            </div>
-                            <div class="w-[8px] h-[8px] bg-[red] rounded-[8px] z-1 absolute top-[-2px] right-[-2px]" v-if="row.install_info && Object.keys(row.install_info)?.length && row.install_info.version != row.version"></div>
-                        </div>
-                        <div class="flex-1 w-0">
-                            <p class="text-sm font-medium truncate" :title="row.title">{{ row.title }}</p>
-                            <p class="text-xs text-gray-500 truncate"  :title="row.key">{{ row.key }}</p>
-                        </div>
-                    </div>
-                    <view class="w-[60px]">
-                        <template v-if="!row.is_download">
-                            <el-button type="primary" class="flex-1" :loading="downloading == row.key" :disabled="downloading != ''" @click.stop="downEvent(row)">下载</el-button>
-                        </template>
-                        <template v-else-if="!row.install_info || Object.keys(row.install_info).length == 0">
-                            <el-button type="primary" class="flex-1" @click.stop="installAddonFn(row.key)">安装</el-button>
-                        </template>
-                        <template v-else>
-                            <el-button type="warning" class="flex-1" @click.stop="upgradeAddonFn(row.key)" v-if="row.install_info.version != row.version">
-                                更新
-                            </el-button>
-                            <el-button class="flex-1" :disabled="true" v-else>
-                                最新
-                            </el-button>
-                        </template>
-                    </view>
-                </div>
-                <div class="flex justify-between items-center">
-                    <div class="text-base">
-                        <span>版本: </span>
-                        <span>{{ row.install_info && Object.keys(row.install_info)?.length ? row.install_info.version : row.version }}</span>
-                        <template v-if="row.install_info && Object.keys(row.install_info)?.length && row.install_info.version != row.version">
-                            <i class="iconfont iconyoujiantou text-warning mx-[2px]"></i>
-                            <span class="text-warning">{{ row.version }}</span>
-                        </template>
-                    </div>
-                    <el-dropdown class="ml-[12px]">
-                        <i class="iconfont iconzhankai !text-xs"></i>
-                        <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item @click="getAddonDetailFn(row)">{{ t("detail") }}</el-dropdown-item>
-                            <el-dropdown-item @click="updateInformationFn(row)">更新记录</el-dropdown-item>
-                            <el-dropdown-item v-if="row.is_download && (!row.install_info || !Object.keys(row.install_info).length)"  @click="deleteAddonFn(row.key)">删除</el-dropdown-item>
-                            <el-dropdown-item v-if="row.is_download && row.install_info && Object.keys(row.install_info).length"  @click="uninstallAddonFn(row.key)">卸载</el-dropdown-item>
-                        </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
-                </div>
-            </div>
+  <!--应用市场-->
+  <div class="main-container app-market bg-body min-h-[70vh]" v-loading="loading">
+    <el-card class="box-card app-head !border-none !pb-[0]" shadow="never">
+      <div class="flex flex-col mb-[8px]">
+        <div class="flex items-center justify-between mb-[5px]">
+          <h2 class="text-lg font-semibold">应用列表</h2>
+          <i class="iconfont cursor-pointer" @click="switchShowType" :class="showType == 'card' ? 'iconliebiao' : 'iconliebiaoqiehuan'"></i>
         </div>
+        <el-tabs v-model="activeName" @tab-change="activeNameTabFn">
+          <el-tab-pane name="installed">
+            <template #label>
+              <span>已安装</span>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane name="uninstalled">
+            <template #label>
+              <span>未安装</span>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane name="all">
+            <template #label>
+              <span>已购买</span>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane name="recentlyUpdated">
+            <template #label>
+							<span class="relative">
+								可更新
+								<div
+                    v-if="localList.recentlyUpdated.length"
+                    class="w-[8px] h-[8px] bg-[red] rounded-[8px] z-1 absolute top-[-2px] right-[-2px]"
+                ></div>
+							</span>
+            </template>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
 
-        <div class="relative px-[20px] pb-[20px]" v-show="showType == 'list'">
-            <el-table v-if="localList[activeName].length && !loading" ref="tableRef" :tree-props="{ children: 'children' }" :default-expand-all="true" :data="info[activeName]" row-key="key" size="large">
-                <el-table-column width="24">
-                    <template #default="{ row }">
-                        <div class="tree-child-cell" :class="{ 'is-tree-parent': row.children?.length, 'is-tree-child': typeof row.support_app === 'string' && row.support_app !== '' && visibleRowKeys.has(row.support_app)}">
-                        <span style="opacity: 0;">.</span>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column v-if="activeName === 'recentlyUpdated' || activeName === 'uninstalled'" width="60px">
-                    <template #default="{ row }">
-                        <el-checkbox @click.stop :model-value="batchUpgradeApp.includes(row.key)" :value="row.key" @change="appKeySingleSelect($event, row.key)"></el-checkbox>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="t('appName')" align="left" width="500">
-                    <template #default="{ row }">
-                        <div class="flex items-center cursor-pointer relative left-[-10px]">
-                            <el-image class="w-[54px] h-[54px]" :src="row.icon" fit="contain">
-                                <template #error>
-                                    <div class="flex items-center w-full h-full">
-                                    <img class="max-w-full max-h-full" src="@/app/assets/images/icon-addon-one.png" alt="" />
-                                    </div>
-                                </template>
-                            </el-image>
-                            <div class="flex-1 w-0 flex flex-col justify-center pl-[20px] font-500 text-[13px]">
-                                <div class="w-[236px] truncate leading-[18px]">{{ row.title }}</div>
-                                <div class="w-[236px] truncate leading-[18px] mt-[6px]" v-if="row.install_info && Object.keys(row.install_info)?.length">{{ row.install_info.version }}</div>
-                                <div class="w-[236px] truncate leading-[18px] mt-[6px]" v-else>{{ row.version }}</div>
-                                <div class="mt-[3px] flex flex-nowrap">
-                                    <el-tag type="danger" size="small" v-if="activeName == 'recentlyUpdated' && row.install_info && Object.keys(row.install_info)?.length && row.install_info.version != row.version">{{ t("newVersion") }}{{ row.version }}</el-tag>
-                                    <el-tooltip v-if="versionJudge(row)" effect="dark" :content="`该插件适配框架版本为${ row.support_version }，与已安装框架版本${frameworkVersion}不完全兼容`" placement="top-start">
-                                        <el-tag type="warning" size="small" class="ml-[3px]">该插件适配框架版本为{{ row.support_version }}，与已安装框架版本{{frameworkVersion}}不完全兼容</el-tag>
-                                    </el-tooltip>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </el-table-column>
+      <el-form :inline="true" :model="searchParam" ref="searchFormRef" class="search-form" v-if="!loading && !isShowDetail && (activeName == 'installed' || activeName == 'all' || activeName == 'uninstalled')">
+        <el-form-item prop="type">
+          <el-select v-model="searchParam.type" clearable :placeholder="t('应用类型')" class="input-width">
+            <el-option :label="t('应用')" value="app" />
+            <el-option :label="t('插件')" value="addon" />
+          </el-select>
+        </el-form-item>
 
-                <el-table-column align="left" min-width="150">
-                    <template #header>
-                        <div class="flex items-center">
-                            <span class="font-500 text-[13px] mr-[5px]">{{ t("appIdentification") }}</span>
-                            <el-tooltip class="box-item" effect="light" :content="t('tipText')" placement="bottom">
-                            <el-icon class="cursor-pointer text-[16px] text-[#a9a9a9]">
-                                <QuestionFilled />
-                            </el-icon>
-                            </el-tooltip>
-                        </div>
-                    </template>
-                    <template #default="{ row }">
-                        <span class="font-500 text-[13px]">{{ row.key }}</span>
-                    </template>
-                </el-table-column>
+        <el-form-item prop="keywords">
+          <el-input v-model.trim="searchParam.keywords" class="!w-[200px]" :placeholder="t('搜索关键词')" clearable />
+        </el-form-item>
 
-                <el-table-column :label="t('introduction')" align="left" min-width="250">
-                    <template #default="{ row }">
-                        <span class="font-500 text-[13px] multi-hidden">{{ row.desc }}</span>
-                    </template>
-                </el-table-column>
+        <el-form-item>
+          <el-button type="primary" @click="searchFn()">{{ t('search') }}</el-button>
+          <el-button @click="resetForm(searchFormRef)">{{ t('重置') }}</el-button>
+        </el-form-item>
+      </el-form>
 
-                <el-table-column :label="t('type')" align="left" min-width="80">
-                    <template #default="{ row }">
-                        <span class="font-500 text-[13px] multi-hidden">{{ row.type === "app" ? t("app") : t("addon") }}</span>
-                    </template>
-                </el-table-column>
-
-                <el-table-column :label="t('author')" align="left" min-width="80">
-                    <template #default="{ row }">
-                        <span class="font-500 text-[13px]">{{ row.author }}</span>
-                    </template>
-                </el-table-column>
-
-                <el-table-column :label="t('operation')" fixed="right" align="right" width="250">
-                    <template #default="{ row }">
-                        <el-button class="!text-[13px]" v-if="activeName == 'recentlyUpdated' && row.install_info && Object.keys(row.install_info)?.length && row.install_info.version != row.version" type="primary" link @click="upgradeAddonFn(row.key)">{{ t("upgrade") }}</el-button>
-                        <el-button class="!text-[13px]" v-if="row.install_info && Object.keys(row.install_info)?.length" type="primary" link @click="uninstallAddonFn(row.key)">{{ t("unload") }}</el-button>
-                        <template v-if="row.is_download && (!row.install_info || !Object.keys(row.install_info).length)">
-                            <el-button class="!text-[13px]" type="primary" link @click="installAddonFn(row.key)">{{ t("install") }}</el-button>
-                            <el-button class="!text-[13px]" type="primary" link @click="deleteAddonFn(row.key)">{{ t("delete") }}</el-button>
-                        </template>
-                        <el-button class="!text-[13px]" v-if="!row.is_download" :loading="downloading == row.key" :disabled="downloading != ''" type="primary" link @click.stop="downEvent(row)">
-                            <span>{{ t("down") }}</span>
-                        </el-button>
-                        <el-button class="!text-[13px]" type="primary" link @click="getAddonDetailFn(row)">{{ t("detail") }}</el-button>
-                        <el-button class="!text-[13px]" type="primary" link @click="updateInformationFn(row)">更新信息</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <div class="data-loading" v-if="loading || !localList[activeName].length">
-                <el-table :data="[]" size="large" class="pt-[5px]">
-                    <el-table-column :label="t('appName')" align="left" width="320" />
-                    <el-table-column align="left" min-width="120" />
-                    <el-table-column :label="t('introduction')" align="left" min-width="200" />
-                    <el-table-column :label="t('type')" align="left" min-width="100" />
-                    <el-table-column :label="t('author')" align="left" min-width="100" />
-                    <el-table-column :label="t('operation')" fixed="right" align="right" width="150" />
-                    <template #empty>
-                        <span></span>
-                    </template>
-                </el-table>
-                <div class="h-[100px]" v-loading="loading" v-if="loading"></div>
+      <div v-if="!loading && !isShowDetail && activeName == 'recentlyUpdated'">
+        <div class="flex items-center bg-[#F4F5F7] h-[80px] justify-between px-[20px]">
+          <div class="flex items-center">
+            <div class="w-[42px] h-[42px] bg-purple-100 rounded flex items-center justify-center mr-2 relative">
+              <img class="max-w-full max-h-full" src="@/app/assets/images/app_store/system_version.png" alt="" />
+              <div
+                  v-if="frameworkVersion != frameworkNewVersion"
+                  class="w-[8px] h-[8px] bg-[red] rounded-[8px] z-1 absolute top-[-2px] right-[-2px]"
+              ></div>
             </div>
+            <div>
+              <p class="flex items-center" v-if="frameworkNewVersion != frameworkVersion">
+                <span class="text-[16px] font-[500] text-[#1D1F3A]">框架更新</span>
+                <span class="text-[12px] text-[#9699B6] ml-[10px]">必须优先更新</span>
+              </p>
+              <p class="flex items-center" v-else>
+                <span class="text-[16px] font-[500] text-[#1D1F3A]">当前框架为最新版 V{{frameworkVersion}}</span>
+              </p>
+              <p class="text-[14px] text-[#374151]">
+                <span v-if="frameworkNewVersion != frameworkVersion" class="">框架 V{{ frameworkVersion }}</span>
+                <span v-if="frameworkNewVersion != frameworkVersion" class="iconfont iconjiang-right text-[#F09000] mx-[2px]"></span>
+                <span v-if="frameworkNewVersion != frameworkVersion" class="text-[#F09000] mr-[4px]">{{ frameworkNewVersion }}</span>
+                <span v-if="frameworkNewVersion != frameworkVersion" class="mr-[4px]">和</span>
+                <span class="text-[#F09000] mr-[4px]">{{batchUpgradeApp.length}}</span>
+                <span>个应用可更新</span>
+              </p>
+            </div>
+          </div>
+
+          <el-button class="ml-[auto]" @click="updateInformationFn({ key: 'niucloud-admin' })">
+            <el-icon class="mr-[5px]">
+              <DocumentCopy />
+            </el-icon>
+            更新记录
+          </el-button>
+          <el-button
+              type="primary"
+              v-show="activeName == 'recentlyUpdated' || (frameworkVersion != frameworkNewVersion && activeName != 'uninstalled')"
+              @click="batchUpgrade"
+          >
+            一键升级<span v-if="batchUpgradeApp.length"
+          >({{ batchUpgradeApp.length }})</span
+          >
+          </el-button>
         </div>
-
-        <el-empty class="mx-auto overview-empty" v-if="!localList.installed.length && !loading && activeName == 'installed' && !authLoading">
-            <template #image>
-                <div class="w-[230px] mx-auto">
-                    <img src="@/app/assets/images/index/apply_empty.png" class="max-w-full" alt="" />
-                </div>
-            </template>
-            <template #description>
-                <p class="flex items-center">{{ t("installed-empty") }}</p>
-            </template>
-        </el-empty>
-        <el-empty class="mx-auto overview-empty" v-if="!localList.uninstalled.length && !loading && activeName == 'uninstalled' && !authLoading">
-            <template #image>
-                <div class="w-[230px] mx-auto">
-                    <img src="@/app/assets/images/index/apply_empty.png" class="max-w-full" alt="" />
-                </div>
-            </template>
-            <template #description>
-                <p class="flex items-center">
-                    <span>{{ t("descriptionLeft") }}</span>
-                    <el-link type="primary" @click="goRouter" class="mx-[5px]">{{ t("link") }}</el-link>
-                    <span>{{ t("descriptionRight") }}</span>
-                </p>
-            </template>
-        </el-empty>
-        <div v-if="!localList.all.length && !loading && !authinfo && activeName == 'all' && !authLoading" class="mx-auto overview-empty flex flex-col items-center pt-14 pb-6">
-            <div class="mb-[20px] text-sm text-[#888]">检测到当前账号尚未绑定授权，请先绑定授权！</div>
-            <div class="flex flex-1 flex-wrap justify-center relative">
-                <el-button class="w-[154px] !h-[48px] mt-[8px]" type="primary" @click="authCodeApproveFn">授权码认证</el-button>
-                <el-popover ref="getAuthCodeDialog" placement="bottom" :width="478" trigger="click" class="mt-[8px]">
-                    <div class="px-[18px] py-[8px]">
-                        <p class="leading-[32px] text-[14px]">您在官方应用市场购买任意一款应用，即可获得授权码。输入正确授权码认证通过后，即可支持在线升级和其它相关服务</p>
-                        <div class="flex justify-end mt-[36px]">
-                            <el-button class="w-[182px] !h-[48px]" plain @click="market">去应用市场逛逛</el-button>
-                            <el-button class="w-[100px] !h-[48px]" plain @click="getAuthCodeDialog.hide()">关闭</el-button>
-                        </div>
-                    </div>
-                    <template #reference>
-                        <el-button class="w-[154px] !h-[48px] mt-[8px] !text-[var(--el-color-primary)] hover:!text-[var(--el-color-primary)] !bg-transparent" plain type="primary">如何获取授权码?</el-button>
-                    </template>
-                </el-popover>
-            </div>
+        <div class="flex items-center justify-between mt-[14px] mb-[6px]">
+          <p class="flex items-center text-[12px]">
+            <span>共</span>
+            <span class="text-[#EF3826]">{{batchUpgradeApp.length}}</span>
+            <span>个应用更新</span>
+          </p>
+          <el-checkbox
+              label="全选"
+              :model-value="localList[activeName].length && localList[activeName].length == batchUpgradeApp.length"
+              @change="appKeyAllSelect"
+              value="Value A"
+              class="ml-[12px]"
+          />
         </div>
-        <el-empty class="mx-auto overview-empty" v-if="!localList.all.length && !loading && authinfo && activeName == 'all' && !authLoading">
-            <template #image>
-                <div class="w-[230px] mx-auto">
-                    <img src="@/app/assets/images/index/apply_empty.png" class="max-w-full" alt="" />
-                </div>
-            </template>
-            <template #description>
-                <p class="flex items-center">
-                    <span>{{ t("buyDescriptionLeft") }}</span>
-                    <el-link type="primary" @click="goRouter" class="mx-[5px]">{{ t("link") }}</el-link>
-                    <span>{{ t("descriptionRight") }}</span>
-                </p>
-            </template>
-        </el-empty>
-        <el-empty class="mx-auto overview-empty" v-if="!localList.recentlyUpdated.length && !loading && activeName == 'recentlyUpdated'">
-            <template #image>
-                <div class="w-[230px] mx-auto">
-                    <img src="@/app/assets/images/index/apply_empty.png" class="max-w-full" alt="" />
-                </div>
-            </template>
-            <template #description>
-                <p class="flex items-center">{{ t("recentlyUpdatedEmpty") }}</p>
-            </template>
-        </el-empty>
-
-        <el-dialog v-model="authCodeApproveDialog" title="授权码认证" width="400px">
-            <el-form :model="formData" label-width="0" ref="formRef" :rules="formRules" class="page-form">
-                <el-card class="box-card !border-none" shadow="never">
-                    <el-form-item prop="auth_code">
-                        <el-input v-model.trim="formData.auth_code" :placeholder="t('authCodePlaceholder')" class="input-width" clearable size="large" />
-                    </el-form-item>
-
-                    <div class="mt-[20px]">
-                        <el-form-item prop="auth_secret">
-                            <el-input v-model.trim="formData.auth_secret" clearable :placeholder="t('authSecretPlaceholder')" class="input-width" size="large" />
-                        </el-form-item>
+      </div>
+    </el-card>
+    <div class="flex mb-4 flex-wrap" v-show="showType == 'card' && !isShowDetail">
+      <template v-if="localList[activeName].length && !loading">
+        <div
+            class="rounded-md p-[16px] app-card mb-[20px] ml-[20px] cursor-pointer product-card-item flex justify-between items-start"
+            @click="openDetail(row)"
+            :class="{ selected: batchUpgradeApp.includes(row.key), 'hidden': row.isHideen}"
+            v-for="row in localList[activeName]"
+            :key="row.key"
+        >
+          <div class="flex items-start flex-1 w-0">
+            <div class="w-[42px] h-[42px] bg-purple-100 rounded flex items-center justify-center mr-2 relative">
+              <div class="w-full h-full overflow-hidden rounded">
+                <el-image class="w-full h-full overflow-hidden rounded" :src="row.icon" fit="contain">
+                  <template #error>
+                    <div class="flex items-center w-full h-full">
+                      <img class="max-w-full max-h-full" src="@/app/assets/images/icon-addon-one.png" alt="" />
                     </div>
-
-                    <div class="text-sm mt-[10px] text-info">{{ t("authInfoTips") }}</div>
-
-                    <div class="mt-[20px]">
-                        <el-button type="primary" class="w-full" size="large" :loading="saveLoading" @click="save(formRef)">{{ t("confirm") }}
-                        </el-button>
-                    </div>
-                    <div class="mt-[10px] text-right">
-                        <el-button type="primary" link @click="market">{{ t("notHaveAuth") }}</el-button>
-                    </div>
-                </el-card>
-            </el-form>
-        </el-dialog>
-        <!-- 详情 -->
-        <el-dialog v-model="appStoreShowDialog" :title="t('plugDetail')" width="500px" :destroy-on-close="true">
-            <el-form :model="appStoreInfo" label-width="120px" ref="formRef" class="page-form">
-                <el-form-item :label="t('title')">
-                    <div class="input-width">{{ appStoreInfo.title }}</div>
-                </el-form-item>
-                <el-form-item :label="t('desc')">
-                    <div class="input-width">{{ appStoreInfo.desc }}</div>
-                </el-form-item>
-                <el-form-item :label="t('author')">
-                    <div class="input-width">{{ appStoreInfo.author }}</div>
-                </el-form-item>
-                <el-form-item :label="t('version')">
-                    <div class="input-width">{{ appStoreInfo.version }}</div>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button type="primary" @click="appStoreShowDialog = false">{{ t("confirm") }}</el-button>
-                </span>
-            </template>
-        </el-dialog>
-
-        <!-- 安装弹窗 -->
-        <el-dialog v-model="installShowDialog" :title="t('addonInstall')" width="850px" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="installShowDialogClose">
-            <el-steps :space="200" :active="installStep" class="number-of-steps" process-status="process" align-center v-if="installStep != 2 && !errorDialog ">
-                <el-step :title="t('envCheck')" class="flex-1" />
-                <el-step :title="t('installProgress')" class="flex-1" />
-                <el-step :title="t('installComplete')" class="flex-1" />
-            </el-steps>
-            <div v-show="installStep == 0" v-loading="!installCheckResult.dir">
-                <!-- <el-scrollbar max-height="50vh"> -->
-                    <div class="min-h-[150px]">
-                        <el-scrollbar style="height: calc(50vh); overflow: auto">
-                            <div class="mt-3" v-if="installCheckResult.dir">
-                                <p class="pt-[20px] pl-[20px]">{{ t("dirPermission") }}</p>
-                                <div v-if="!installCheckResult.file_permission_is_pass" class="mt-[10px] mx-[20px] text-[14px] cursor-pointer text-primary flex items-center justify-between bg-[#EFF6FF] rounded-[4px] p-[10px]" @click="cloudBuildCheckDirFn">
-                                    <div class="flex items-center">
-                                        <el-icon :size="17"><QuestionFilled /></el-icon>
-                                        <span class="ml-[5px] leading-[20px]">编译权限错误，查看解决方案</span></div>
-                                    <div class="border-[1px] border-primary rounded-[3px] w-[72px] h-[26px] leading-[25px] text-center">立即查看</div>
-                                </div>
-                                <div class="px-[20px] pt-[10px] text-[14px]">
-                                    <el-row class="py-[10px] items table-head-bg pl-[15px] mb-[10px]">
-                                        <el-col :span="18">
-                                            <span>{{ t("path") }}</span>
-                                        </el-col>
-                                        <el-col :span="3">
-                                            <span>{{ t("demand") }}</span>
-                                        </el-col>
-                                        <el-col :span="3">
-                                            <span>{{ t("status") }}</span>
-                                        </el-col>
-                                    </el-row>
-                                    <el-row class="pb-[10px] items pl-[15px]" v-for="(item, index) in installCheckResult.dir.is_readable" :key="index">
-                                        <el-col :span="18">
-                                            <span>{{ item.dir }}</span>
-                                        </el-col>
-                                        <el-col :span="3">
-                                            <span>{{ t("readable") }}</span>
-                                        </el-col>
-                                        <el-col :span="3" >
-                                            <span v-if="item.status">
-                                                <el-icon color="green">
-                                                    <Select />
-                                                </el-icon>
-                                            </span>
-                                            <span v-else>
-                                                <el-icon color="red">
-                                                    <CloseBold />
-                                                </el-icon>
-                                            </span>
-                                        </el-col>
-                                    </el-row>
-                                    <el-row class="pb-[10px] items pl-[15px]" v-for="(item, index) in installCheckResult.dir.is_write" :key="index">
-                                        <el-col :span="18">
-                                            <span>{{ item.dir }}</span>
-                                        </el-col>
-                                        <el-col :span="3">
-                                            <span>{{ t("write") }}</span>
-                                        </el-col>
-                                        <el-col :span="3">
-                                            <span v-if="item.status" class="text-right">
-                                                <el-icon color="green">
-                                                    <Select />
-                                                </el-icon>
-                                            </span>
-                                            <span v-else>
-                                                <el-icon color="red">
-                                                    <CloseBold />
-                                                </el-icon>
-                                            </span>
-                                        </el-col>
-                                    </el-row>
-                                </div>
-                            </div>
-                            <div class="my-3" v-if="installCheckResult.addon_check && installCheckResult.addon_check.length">
-                                <p class="pl-[20px]">插件验证</p>
-                                <div class="px-[20px] pt-[10px] text-[14px]">
-                                    <el-alert class="!mb-[10px]" v-for="item in installCheckResult.addon_check" type="error" :closable="false">
-                                        <div v-html="item.msg"></div>
-                                    </el-alert>
-                                </div>
-                            </div>
-                        </el-scrollbar>
-                    </div>
-                <!-- </el-scrollbar> -->
-                <div class="flex justify-end">
-                    <el-tooltip effect="dark" placement="top">
-                        <template #content>
-                            <div class="w-[400px]">
-                                {{t("installTips")}}
-                            </div>
-                        </template>
-                        <el-button :disabled="!installCheckResult.is_pass || cloudInstalling" :loading="localInstalling" @click="handleInstall">{{ t("localInstall") }}</el-button>
-                    </el-tooltip>
-                    <el-tooltip effect="dark" placement="top">
-                        <template #content>
-                            <div class="w-[400px]">
-                                {{t("cloudInstallTips")}}
-                            </div>
-                        </template>
-                        <el-button type="primary" :disabled="!installCheckResult.is_pass || localInstalling" :loading="cloudInstalling" @click="handleCloudInstall">{{ t("cloudInstall") }}</el-button>
-                    </el-tooltip>
-                </div>
+                  </template>
+                </el-image>
+              </div>
             </div>
-            <div v-show="installStep == 1 && !errorDialog" class="h-[50vh] mt-[20px]">
-                <div class="flex flex-col h-full">
-                    <div class="flex-1 h-0">
-                        <terminal ref="terminalRef" :name="`install-${terminalId}`" :context="currAddon" :init-log="null" :show-header="false" :show-log-time="true" @exec-cmd="onExecCmd" />
-                    </div>
-                    <div class="flex justify-end mt-[20px]">
-                        <el-button type="primary" :loading="true" class="!w-[140px]">已用时 {{ formatUpgradeDuration }}</el-button>
-                    </div>
-                </div>
+            <div class="flex-1 w-0">
+              <div class="flex items-center">
+                <p class="text-[16px] text-[#374151] truncate leading-[20px]" :title="row.title">{{ row.title }}</p>
+                <span :class="{'app-ident': row.type == 'app', 'addon-ident': row.type == 'addon'}">{{row.type == 'app' ? '应用' : '插件'}}</span>
+              </div>
+              <p class="text-xs text-[#4F516D] truncate mt-[2px] font-bold" :title="row.key">{{ row.key }}</p>
+              <div class="text-[#374151] text-[12px] leading-[16px] mt-[4px]">
+                <span>当前版本：</span>
+                <span>{{ row.install_info && Object.keys(row.install_info)?.length ? row.install_info.version : row.version }}</span>
+                <span v-if="row.install_info && Object.keys(row.install_info)?.length && row.install_info.version != row.version && activeName == 'recentlyUpdated'" class="text-[#374151] ml-[5px] text-[12px]">最新版本：{{ row.version }}</span>
+              </div>
             </div>
-            <div v-show="installStep == 2" class="h-[50vh] mt-[20px] flex flex-col">
-                <!-- <el-result icon="success" :title="t('addonInstallSuccess')"></el-result> -->
-                <!-- 提示信息 -->
-                <!-- <div v-for="(item, index) in installAfterTips" class="mb-[10px]" :key="index">
-                    <el-alert :title="item" type="error" :closable="false" />
-                </div> -->
-                <el-result icon="success" :title="t('addonInstallSuccess')">
-                    <template #icon>
-                        <img src="@/app/assets/images/success_icon.png" alt="">
-                    </template>
-                    <template #extra>
-                        <div v-for="(item, index) in installAfterTips" class="mb-[10px]" :key="index">
-                            <div class="text-[16px] text-[#4F516D] mt-[5px]">{{ item }}</div>
-                        </div>
-                        <div class="text-[16px] text-[#9699B6] mt-[10px]" v-if="upgradeDuration>0">本次安装用时{{ formatUpgradeDuration }}</div>
-                        <div class="mt-[20px]">
-                            <el-button @click="handleBack()" v-if="installType=='cloud'" class="!w-[90px]">返回</el-button>
-                            <el-button @click="installShowDialog=false" type="primary" class="!w-[90px]">完成</el-button>
-                        </div>
-                    </template>
-                </el-result>
-            </div>
-            <div class="h-[50vh] mt-[20px] flex flex-col" v-show="errorDialog">
-                <el-result icon="error" :title="t('安装失败')">
-                    <template #icon>
-                        <img src="@/app/assets/images/error_icon.png" alt="">
-                    </template>
-                    <template #extra>
-                        <el-scrollbar class="max-h-[120px] !overflow-auto text-[15px] text-[#4F516D] mb-[15px] mt-[-15px]">
-                            {{errorMsg}}
-                        </el-scrollbar>
-                        <el-button @click="handleBack()" v-if="installType=='cloud'" class="!w-[90px]">错误信息</el-button>
-                        <el-button @click="installShowDialog=false" type="primary" class="!w-[90px]">完成</el-button>
-                    </template>
-                </el-result>
-            </div>
-        </el-dialog>
-
-        <el-dialog v-model="uninstallShowDialog" :title="t('addonUninstall')" width="850px" :close-on-click-modal="false" :close-on-press-escape="false">
-            <el-scrollbar max-height="50vh">
-                <div class="min-h-[150px]">
-                    <div class="bg-[#fff] my-3" v-if="uninstallCheckResult.dir">
-                        <p class="pt-[20px] pl-[20px]">{{ t("dirPermission") }}</p>
-                        <div class="px-[20px] pt-[10px] text-[14px]">
-                            <el-row class="py-[10px] items table-head-bg pl-[15px] mb-[10px]">
-                                <el-col :span="18">
-                                    <span>{{ t("path") }}</span>
-                                </el-col>
-                                <el-col :span="3">
-                                    <span>{{ t("demand") }}</span>
-                                </el-col>
-                                <el-col :span="3">
-                                    <span>{{ t("status") }}</span>
-                                </el-col>
-                            </el-row>
-                            <el-row class="pb-[10px] items pl-[15px]" v-for="(item, index) in uninstallCheckResult.dir.is_readable" :key="index">
-                                <el-col :span="18">
-                                    <span>{{ item.dir }}</span>
-                                </el-col>
-                                <el-col :span="3">
-                                    <span>{{ t("readable") }}</span>
-                                </el-col>
-                                <el-col :span="3">
-                                    <span v-if="item.status">
-                                        <el-icon color="green">
-                                            <Select />
-                                        </el-icon>
-                                    </span>
-                                    <span v-else>
-                                        <el-icon color="red">
-                                            <CloseBold />
-                                        </el-icon>
-                                    </span>
-                                </el-col>
-                            </el-row>
-                            <el-row class="pb-[10px] items pl-[15px]" v-for="(item, index) in uninstallCheckResult.dir.is_write" :key="index">
-                                <el-col :span="18">
-                                    <span>{{ item.dir }}</span>
-                                </el-col>
-                                <el-col :span="3">
-                                    <span>{{ t("write") }}</span>
-                                </el-col>
-                                <el-col :span="3" >
-                                    <span v-if="item.status">
-                                        <el-icon color="green">
-                                            <Select />
-                                        </el-icon>
-                                    </span>
-                                    <span v-else>
-                                        <el-icon color="red">
-                                            <CloseBold />
-                                        </el-icon>
-                                    </span>
-                                </el-col>
-                            </el-row>
-                        </div>
-                    </div>
-                </div>
-            </el-scrollbar>
-        </el-dialog>
-
-        <!-- 下载提示 -->
-        <el-dialog v-model="unloadHintDialog" title="下载提示" width="30%">
-            <span>本地已经存在该插件/应用，再次下载会覆盖该插件/应用。</span>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="unloadHintDialog = false">取消</el-button>
-                    <el-button type="primary" @click="downEventHintFn">确定</el-button>
-                </span>
+          </div>
+          <view class="w-[25px] flex items-end flex-col h-full justify-between" :class="{ 'w-[40px]': !row.is_download && downloading == row.key }">
+            <template v-if="activeName == 'recentlyUpdated'">
+              <el-checkbox class="!h-[auto] leading-[1]" v-if="batchUpgradeApp.includes(row.key)" checked @click.stop="appKeySingleSelect($event, row.key)" />
+              <el-checkbox class="!h-[auto] leading-[1]" v-else @click.stop="appKeySingleSelect($event, row.key)" />
             </template>
-        </el-dialog>
-        <!-- 更新信息 -->
+            <template v-if="activeName == 'installed' || activeName == 'all' || activeName == 'uninstalled'">
+              <el-button
+                  v-if="!row.is_download"
+                  class="!text-[#0766F5] mt-[auto] !p-0 !border-[0] !bg-transparent !text-[12px] !h-[20px]"
+                  :loading="downloading == row.key"
+                  :disabled="downloading != ''"
+                  @click.stop="downEvent(row)"
+              >安装
+              </el-button>
+              <el-button v-else-if="!row.install_info || Object.keys(row.install_info).length == 0" class=" mt-[auto] !text-[#0766F5] !p-0 !border-[0] !bg-transparent !text-[12px] !h-[20px]" @click.stop="installAddonFn(row.key)">安装</el-button>
+              <el-button class=" mt-[auto] !text-[#4F516D] !p-0 !border-[0] !bg-transparent !text-[12px] !h-[20px]" v-if="row.install_info && Object.keys(row.install_info)?.length"
+                         link @click.stop="uninstallAddonFn(row.key)"
+              >{{ t('unload') }}
+              </el-button>
+            </template>
+            <template v-else>
+              <el-button
+                  class="!text-[#008C1E] mt-[auto] !p-0 !border-[0] !bg-transparent !text-[12px] !h-[20px]"
+                  @click.stop="upgradeAddonFn(row)"
+                  v-if="row.install_info.version != row.version"
+              >
+                升级
+              </el-button>
+            </template>
+          </view>
+        </div>
+      </template>
     </div>
-    <upgrade-log :upgradeKey="upgradeKey" ref="upgradeLogRef" />
-    <upgrade ref="upgradeRef" @complete="localListFn" @cloudbuild="handleCloudBuild" />
-    <cloud-build ref="cloudBuildRef" />
+
+    <div class="relative px-[20px] pb-[20px]" v-show="showType == 'list' && !isShowDetail">
+      <el-table
+          v-if="localList[activeName].length && !loading && !isShowDetail"
+          ref="tableRef"
+          :tree-props="{ children: 'children' }"
+          :default-expand-all="true"
+          :data="info[activeName]"
+          row-key="key"
+          size="large"
+      >
+        <el-table-column width="24">
+          <template #default="{ row }">
+            <div
+                class="tree-child-cell"
+                :class="{
+								'is-tree-parent': row.children?.length,
+								'is-tree-child': typeof row.support_app === 'string' && row.support_app !== '' && visibleRowKeys.has(row.support_app),
+							}"
+            >
+              <span style="opacity: 0">.</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="activeName === 'recentlyUpdated'" width="60px">
+          <template #default="{ row }">
+            <el-checkbox
+                @click.stop
+                :model-value="batchUpgradeApp.includes(row.key)"
+                :value="row.key"
+                @change="appKeySingleSelect($event, row.key)"
+            ></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('appName')" align="left" width="300">
+          <template #default="{ row }">
+            <div class="flex items-center cursor-pointer relative left-[-10px]" @click="openDetail(row)">
+              <el-image class="w-[54px] h-[54px]" :src="row.icon" fit="contain">
+                <template #error>
+                  <div class="flex items-center w-full h-full">
+                    <img class="max-w-full max-h-full" src="@/app/assets/images/icon-addon-one.png" alt="" />
+                  </div>
+                </template>
+              </el-image>
+              <div class="flex-1 w-0 flex flex-col justify-center pl-[20px] font-500 text-[13px]">
+                <div class="w-[236px] truncate leading-[18px]">{{ row.title }}</div>
+                <div
+                    class="w-[236px] truncate leading-[18px] mt-[6px]"
+                    v-if="row.install_info && Object.keys(row.install_info)?.length"
+                >
+                  {{ row.install_info.version }}
+                </div>
+                <div class="w-[236px] truncate leading-[18px] mt-[6px]" v-else>{{ row.version }}</div>
+                <div class="mt-[3px] flex flex-nowrap">
+                  <el-tag
+                      type="danger"
+                      size="small"
+                      v-if="
+											activeName == 'recentlyUpdated' &&
+											row.install_info &&
+											Object.keys(row.install_info)?.length &&
+											row.install_info.version != row.version
+										"
+                  >
+                    {{ t('newVersion') }}{{ row.version }}
+                  </el-tag>
+                  <el-tooltip
+                      v-if="versionJudge(row) && activeName == 'recentlyUpdated'"
+                      effect="dark"
+                      :content="`该插件适配框架版本为${row.support_version}，与已安装框架版本${frameworkVersion}不完全兼容`"
+                      placement="top-start"
+                  >
+                    <el-tag type="warning" size="small" class="app-list-tip ml-[3px] overflow-hidden"
+                    >该插件适配框架版本为{{ row.support_version }}，与已安装框架版本{{ frameworkVersion }}不完全兼容
+                    </el-tag>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="left" min-width="150">
+          <template #header>
+            <div class="flex items-center">
+              <span class="font-500 text-[13px] mr-[5px]">{{ t('appIdentification') }}</span>
+              <el-tooltip class="box-item" effect="light" :content="t('tipText')" placement="bottom">
+                <el-icon class="cursor-pointer text-[16px] text-[#a9a9a9]">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="{ row }">
+            <span class="font-500 text-[13px]">{{ row.key }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column :label="t('introduction')" align="left" min-width="250">
+          <template #default="{ row }">
+            <span class="font-500 text-[13px] multi-hidden">{{ row.desc }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column :label="t('type')" align="left" min-width="80">
+          <template #default="{ row }">
+            <span class="font-500 text-[13px] multi-hidden">{{ row.type === 'app' ? t('app') : t('addon') }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column :label="t('author')" align="left" min-width="80">
+          <template #default="{ row }">
+            <span class="font-500 text-[13px]">{{ row.author }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column :label="t('operation')" fixed="right" align="right" min-width="200">
+          <template #default="{ row }">
+            <template v-if="activeName == 'installed' || activeName == 'all' || activeName == 'uninstalled'">
+              <el-button
+                  class="!text-[13px]"
+                  v-if="row.install_info && Object.keys(row.install_info)?.length"
+                  type="primary"
+                  link
+                  @click="uninstallAddonFn(row.key)"
+              >{{ t('unload') }}
+              </el-button>
+              <template v-if="row.is_download && (!row.install_info || !Object.keys(row.install_info).length)">
+                <el-button class="!text-[13px]" type="primary" link @click="installAddonFn(row.key)">{{ t('install') }}</el-button>
+              </template>
+              <el-button
+                  class="!text-[13px]"
+                  v-if="!row.is_download"
+                  :loading="downloading == row.key"
+                  :disabled="downloading != ''"
+                  type="primary"
+                  link
+                  @click.stop="downEvent(row)"
+              >
+                <span>{{ t('down') }}</span>
+              </el-button>
+            </template>
+            <template v-else>
+              <el-button
+                  class="!text-[13px]"
+                  v-if="
+									activeName == 'recentlyUpdated' &&
+									row.install_info &&
+									Object.keys(row.install_info)?.length &&
+									row.install_info.version != row.version
+								"
+                  type="primary"
+                  link
+                  @click="upgradeAddonFn(row)"
+              >{{ t('升级') }}
+              </el-button>
+            </template>
+            <el-button class="!text-[13px]" type="primary" link @click="openDetail(row)">{{ t('detail') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="data-loading" v-if="loading || !localList[activeName].length">
+        <el-table :data="[]" size="large" class="pt-[5px]">
+          <el-table-column :label="t('appName')" align="left" width="320" />
+          <el-table-column align="left" min-width="120" />
+          <el-table-column :label="t('introduction')" align="left" min-width="200" />
+          <el-table-column :label="t('type')" align="left" min-width="100" />
+          <el-table-column :label="t('author')" align="left" min-width="100" />
+          <el-table-column :label="t('operation')" fixed="right" align="right" width="150" />
+          <!-- <template #empty>
+            <span></span>
+          </template> -->
+        </el-table>
+        <div class="h-[100px]" v-loading="loading" v-if="loading"></div>
+      </div>
+    </div>
+
+    <el-empty class="mx-auto overview-empty" v-if="showType == 'card' && noAppLen && !loading && activeName == 'installed' && !authLoading && !isShowDetail">
+      <template #image>
+        <div class="w-[230px] mx-auto">
+          <img src="@/app/assets/images/index/apply_empty.png" class="max-w-full" alt="" />
+        </div>
+      </template>
+      <template #description>
+        <p class="flex items-center">{{ t('installed-empty') }}</p>
+      </template>
+    </el-empty>
+    <el-empty class="mx-auto overview-empty" v-if="showType == 'card' && noAppLen && !loading && activeName == 'uninstalled' && !authLoading && !isShowDetail">
+      <template #image>
+        <div class="w-[230px] mx-auto">
+          <img src="@/app/assets/images/index/apply_empty.png" class="max-w-full" alt="" />
+        </div>
+      </template>
+      <template #description>
+        <p class="flex items-center">
+          <span>{{ t('descriptionLeft') }}</span>
+          <el-link type="primary" @click="goRouter" class="mx-[5px]">{{ t('link') }}</el-link>
+          <span>{{ t('descriptionRight') }}</span>
+        </p>
+      </template>
+    </el-empty>
+    <div
+        v-if="!localList.all.length && !loading && !authinfo && activeName == 'all' && !authLoading && !isShowDetail"
+        class="mx-auto overview-empty flex flex-col items-center pt-14 pb-6"
+    >
+      <div class="mb-[20px] text-sm text-[#888]">检测到当前账号尚未绑定授权，请先绑定授权！</div>
+      <div class="flex flex-1 flex-wrap justify-center relative">
+        <el-button class="w-[154px] !h-[48px] mt-[8px]" type="primary" @click="authCodeApproveFn">授权码认证</el-button>
+        <el-popover ref="getAuthCodeDialog" placement="bottom" :width="478" trigger="click" class="mt-[8px]">
+          <div class="px-[18px] py-[8px]">
+            <p class="leading-[32px] text-[14px]">
+              您在官方应用市场购买任意一款应用，即可获得授权码。输入正确授权码认证通过后，即可支持在线升级和其它相关服务
+            </p>
+            <div class="flex justify-end mt-[36px]">
+              <el-button class="w-[182px] !h-[48px]" plain @click="market">去应用市场逛逛</el-button>
+              <el-button class="w-[100px] !h-[48px]" plain @click="getAuthCodeDialog.hide()">关闭</el-button>
+            </div>
+          </div>
+          <template #reference>
+            <el-button
+                class="w-[154px] !h-[48px] mt-[8px] !text-[var(--el-color-primary)] hover:!text-[var(--el-color-primary)] !bg-transparent"
+                plain
+                type="primary"
+            >如何获取授权码?
+            </el-button>
+          </template>
+        </el-popover>
+      </div>
+    </div>
+    <el-empty class="mx-auto overview-empty" v-if="showType == 'card' && noAppLen && !loading && authinfo && activeName == 'all' && !authLoading && !isShowDetail">
+      <template #image>
+        <div class="w-[230px] mx-auto">
+          <img src="@/app/assets/images/index/apply_empty.png" class="max-w-full" alt="" />
+        </div>
+      </template>
+      <template #description>
+        <p class="flex items-center">
+          <span>{{ t('buyDescriptionLeft') }}</span>
+          <el-link type="primary" @click="goRouter" class="mx-[5px]">{{ t('link') }}</el-link>
+          <span>{{ t('descriptionRight') }}</span>
+        </p>
+      </template>
+    </el-empty>
+    <el-empty class="mx-auto overview-empty" v-if="showType == 'card' && noAppLen && !loading && activeName == 'recentlyUpdated' && !isShowDetail">
+      <template #image>
+        <div class="w-[230px] mx-auto">
+          <img src="@/app/assets/images/index/apply_empty.png" class="max-w-full" alt="" />
+        </div>
+      </template>
+      <template #description>
+        <p class="flex items-center">{{ t('recentlyUpdatedEmpty') }}</p>
+      </template>
+    </el-empty>
+
+    <el-dialog v-model="authCodeApproveDialog" title="授权码认证" width="400px">
+      <el-form :model="formData" label-width="0" ref="formRef" :rules="formRules" class="page-form">
+        <el-card class="box-card !border-none" shadow="never">
+          <el-form-item prop="auth_code">
+            <el-input
+                v-model.trim="formData.auth_code"
+                :placeholder="t('authCodePlaceholder')"
+                class="input-width"
+                clearable
+                size="large"
+            />
+          </el-form-item>
+
+          <div class="mt-[20px]">
+            <el-form-item prop="auth_secret">
+              <el-input
+                  v-model.trim="formData.auth_secret"
+                  clearable
+                  :placeholder="t('authSecretPlaceholder')"
+                  class="input-width"
+                  size="large"
+              />
+            </el-form-item>
+          </div>
+
+          <div class="text-sm mt-[10px] text-info">{{ t('authInfoTips') }}</div>
+
+          <div class="mt-[20px]">
+            <el-button type="primary" class="w-full" size="large" :loading="saveLoading" @click="save(formRef)">
+              {{ t('confirm') }}
+            </el-button>
+          </div>
+          <div class="mt-[10px] text-right">
+            <el-button type="primary" link @click="market">{{ t('notHaveAuth') }}</el-button>
+          </div>
+        </el-card>
+      </el-form>
+    </el-dialog>
+
+    <!-- 安装弹窗 -->
+    <el-dialog
+        v-model="installShowDialog"
+        :title="t('addonInstall')"
+        width="850px"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :before-close="installShowDialogClose"
+    >
+      <el-steps
+          :space="200"
+          :active="installStep"
+          class="number-of-steps"
+          process-status="process"
+          align-center
+          v-if="installStep != 2 && !errorDialog"
+      >
+        <el-step :title="t('envCheck')" class="flex-1" />
+        <el-step :title="t('installProgress')" class="flex-1" />
+        <el-step :title="t('installComplete')" class="flex-1" />
+      </el-steps>
+      <div v-show="installStep == 0" v-loading="!installCheckResult.dir">
+        <!-- <el-scrollbar max-height="50vh"> -->
+        <div class="min-h-[150px]">
+          <el-scrollbar style="height: calc(50vh); overflow: auto">
+            <div class="mt-3" v-if="installCheckResult.dir">
+              <p class="pt-[20px] pl-[20px]">{{ t('dirPermission') }}</p>
+              <div
+                  v-if="!installCheckResult.file_permission_is_pass"
+                  class="mt-[10px] mx-[20px] text-[14px] cursor-pointer text-primary flex items-center justify-between bg-[#EFF6FF] rounded-[4px] p-[10px]"
+                  @click="cloudBuildCheckDirFn"
+              >
+                <div class="flex items-center">
+                  <el-icon :size="17">
+                    <QuestionFilled />
+                  </el-icon>
+                  <span class="ml-[5px] leading-[20px]">编译权限错误，查看解决方案</span>
+                </div>
+                <div class="border-[1px] border-primary rounded-[3px] w-[72px] h-[26px] leading-[25px] text-center">立即查看</div>
+              </div>
+              <div class="px-[20px] pt-[10px] text-[14px]">
+                <el-row class="py-[10px] items table-head-bg pl-[15px] mb-[10px]">
+                  <el-col :span="18">
+                    <span>{{ t('path') }}</span>
+                  </el-col>
+                  <el-col :span="3">
+                    <span>{{ t('demand') }}</span>
+                  </el-col>
+                  <el-col :span="3">
+                    <span>{{ t('status') }}</span>
+                  </el-col>
+                </el-row>
+                <el-row class="pb-[10px] items pl-[15px]" v-for="(item, index) in installCheckResult.dir.is_readable" :key="index">
+                  <el-col :span="18">
+                    <span>{{ item.dir }}</span>
+                  </el-col>
+                  <el-col :span="3">
+                    <span>{{ t('readable') }}</span>
+                  </el-col>
+                  <el-col :span="3">
+										<span v-if="item.status">
+											<el-icon color="green">
+												<Select />
+											</el-icon>
+										</span>
+                    <span v-else>
+											<el-icon color="red">
+												<CloseBold />
+											</el-icon>
+										</span>
+                  </el-col>
+                </el-row>
+                <el-row class="pb-[10px] items pl-[15px]" v-for="(item, index) in installCheckResult.dir.is_write" :key="index">
+                  <el-col :span="18">
+                    <span>{{ item.dir }}</span>
+                  </el-col>
+                  <el-col :span="3">
+                    <span>{{ t('write') }}</span>
+                  </el-col>
+                  <el-col :span="3">
+										<span v-if="item.status" class="text-right">
+											<el-icon color="green">
+												<Select />
+											</el-icon>
+										</span>
+                    <span v-else>
+											<el-icon color="red">
+												<CloseBold />
+											</el-icon>
+										</span>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+            <div class="my-3" v-if="installCheckResult.addon_check && installCheckResult.addon_check.length">
+              <p class="pl-[20px]">插件验证</p>
+              <div class="px-[20px] pt-[10px] text-[14px]">
+                <el-alert class="!mb-[10px]" v-for="item in installCheckResult.addon_check" type="error" :closable="false">
+                  <div v-html="item.msg"></div>
+                </el-alert>
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+        <!-- </el-scrollbar> -->
+        <div class="flex justify-end">
+          <el-tooltip effect="dark" placement="top">
+            <template #content>
+              <div class="w-[400px]">
+                {{ t('installTips') }}
+              </div>
+            </template>
+            <el-button :disabled="!installCheckResult.is_pass || cloudInstalling" :loading="localInstalling" @click="handleInstall"
+            >{{ t('localInstall') }}
+            </el-button>
+          </el-tooltip>
+          <el-tooltip effect="dark" placement="top">
+            <template #content>
+              <div class="w-[400px]">
+                {{ t('cloudInstallTips') }}
+              </div>
+            </template>
+            <el-button
+                type="primary"
+                :disabled="!installCheckResult.is_pass || localInstalling"
+                :loading="cloudInstalling"
+                @click="handleCloudInstall"
+            >{{ t('cloudInstall') }}
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+      <div v-show="installStep == 1 && !errorDialog" class="h-[50vh] mt-[20px]">
+        <div class="flex flex-col h-full">
+          <div class="flex-1 h-0">
+            <terminal
+                ref="terminalRef"
+                :name="`install-${terminalId}`"
+                :context="currAddon"
+                :init-log="null"
+                :show-header="false"
+                :show-log-time="true"
+                @exec-cmd="onExecCmd"
+            />
+          </div>
+          <div class="flex justify-end mt-[20px]">
+            <el-button type="primary" :loading="true" class="!w-[140px]">已用时 {{ formatUpgradeDuration }}</el-button>
+          </div>
+        </div>
+      </div>
+      <div v-show="installStep == 2" class="h-[50vh] mt-[20px] flex flex-col">
+        <!-- <el-result icon="success" :title="t('addonInstallSuccess')"></el-result> -->
+        <!-- 提示信息 -->
+        <!-- <div v-for="(item, index) in installAfterTips" class="mb-[10px]" :key="index">
+            <el-alert :title="item" type="error" :closable="false" />
+        </div> -->
+        <el-result icon="success" :title="t('addonInstallSuccess')">
+          <template #icon>
+            <img src="@/app/assets/images/success_icon.png" alt="" />
+          </template>
+          <template #extra>
+            <div v-for="(item, index) in installAfterTips" class="mb-[10px]" :key="index">
+              <div class="text-[16px] text-[#4F516D] mt-[5px]">{{ item }}</div>
+            </div>
+            <div class="text-[16px] text-[#9699B6] mt-[10px]" v-if="upgradeDuration > 0">本次安装用时{{ formatUpgradeDuration }}</div>
+            <div class="mt-[20px]">
+              <el-button @click="handleBack()" v-if="installType == 'cloud'" class="!w-[90px]">返回</el-button>
+              <el-button @click="installShowDialog = false" type="primary" class="!w-[90px]">完成</el-button>
+            </div>
+          </template>
+        </el-result>
+      </div>
+      <div class="h-[50vh] mt-[20px] flex flex-col" v-show="errorDialog">
+        <el-result icon="error" :title="t('安装失败')">
+          <template #icon>
+            <img src="@/app/assets/images/error_icon.png" alt="" />
+          </template>
+          <template #extra>
+            <el-scrollbar class="max-h-[120px] !overflow-auto text-[15px] text-[#4F516D] mb-[15px] mt-[-15px]">
+              {{ errorMsg }}
+            </el-scrollbar>
+            <el-button @click="handleBack()" v-if="installType == 'cloud'" class="!w-[90px]">错误信息</el-button>
+            <el-button @click="installShowDialog = false" type="primary" class="!w-[90px]">完成</el-button>
+          </template>
+        </el-result>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+        v-model="uninstallShowDialog"
+        :title="t('addonUninstall')"
+        width="850px"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+    >
+      <el-scrollbar max-height="50vh">
+        <div class="min-h-[150px]">
+          <div class="bg-[#fff] my-3" v-if="uninstallCheckResult.dir">
+            <p class="pt-[20px] pl-[20px]">{{ t('dirPermission') }}</p>
+            <div class="px-[20px] pt-[10px] text-[14px]">
+              <el-row class="py-[10px] items table-head-bg pl-[15px] mb-[10px]">
+                <el-col :span="18">
+                  <span>{{ t('path') }}</span>
+                </el-col>
+                <el-col :span="3">
+                  <span>{{ t('demand') }}</span>
+                </el-col>
+                <el-col :span="3">
+                  <span>{{ t('status') }}</span>
+                </el-col>
+              </el-row>
+              <el-row class="pb-[10px] items pl-[15px]" v-for="(item, index) in uninstallCheckResult.dir.is_readable" :key="index">
+                <el-col :span="18">
+                  <span>{{ item.dir }}</span>
+                </el-col>
+                <el-col :span="3">
+                  <span>{{ t('readable') }}</span>
+                </el-col>
+                <el-col :span="3">
+									<span v-if="item.status">
+										<el-icon color="green">
+											<Select />
+										</el-icon>
+									</span>
+                  <span v-else>
+										<el-icon color="red">
+											<CloseBold />
+										</el-icon>
+									</span>
+                </el-col>
+              </el-row>
+              <el-row class="pb-[10px] items pl-[15px]" v-for="(item, index) in uninstallCheckResult.dir.is_write" :key="index">
+                <el-col :span="18">
+                  <span>{{ item.dir }}</span>
+                </el-col>
+                <el-col :span="3">
+                  <span>{{ t('write') }}</span>
+                </el-col>
+                <el-col :span="3">
+									<span v-if="item.status">
+										<el-icon color="green">
+											<Select />
+										</el-icon>
+									</span>
+                  <span v-else>
+										<el-icon color="red">
+											<CloseBold />
+										</el-icon>
+									</span>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </el-dialog>
+
+    <!-- 下载提示 -->
+    <el-dialog v-model="unloadHintDialog" title="下载提示" width="30%">
+      <span>本地已经存在该插件/应用，再次下载会覆盖该插件/应用。</span>
+      <template #footer>
+				<span class="dialog-footer">
+					<el-button @click="unloadHintDialog = false">取消</el-button>
+					<el-button type="primary" @click="downEventHintFn">确定</el-button>
+				</span>
+      </template>
+    </el-dialog>
+
+    <el-card class="box-card app-detail-static !border-none" shadow="never" v-if="!loading && isShowDetail">
+      <div class="flex items-center text-[14px] text-primary cursor-pointer mb-[20px]" @click="closeDetail">
+        <el-icon class="mr-[6px]"><ArrowLeft /></el-icon>
+        <span>返回应用列表</span>
+      </div>
+
+      <div class="border-[1px] border-solid border-[#EBEEF5] p-[20px]">
+
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="w-[42px] h-[42px] rounded-[6px] flex items-center justify-center mr-[10px] overflow-hidden">
+              <el-image class="w-full h-full" :src="detailAddon?.icon" fit="contain">
+                <template #error>
+                  <div class="flex items-center w-full h-full">
+                    <img class="max-w-full max-h-full" src="@/app/assets/images/icon-addon-one.png" alt="" />
+                  </div>
+                </template>
+              </el-image>
+            </div>
+            <div>
+              <div class="text-[16px] font-[500] leading-[20px]">{{ detailAddon?.title || '-' }}</div>
+              <div class="text-[12px] text-[#374151] leading-[18px] mt-[5px]">{{ detailAddon?.key || '-' }}</div>
+            </div>
+          </div>
+          <div class="flex items-center ml-[auto] gap-[10px] detail-btn-box">
+            <template v-if="detailAddon.key != 'niucloud-admin'">
+              <el-button v-if="!detailAddon.is_download"
+                         type="primary"
+                         class="download-btn !bg-[#0766F5]"
+                         :loading="downloading == detailAddon.key"
+                         :disabled="downloading != ''"
+                         @click.stop="downEvent(detailAddon)"
+              >安装
+              </el-button>
+              <el-button v-else-if="!detailAddon.install_info || Object.keys(detailAddon.install_info).length == 0" type="primary" class="!bg-[#0766F5]" @click.stop="installAddonFn(detailAddon.key)">安装</el-button>
+              <el-button
+                  type="warning"
+                  @click.stop="upgradeAddonFn(detailAddon)"
+                  v-else-if="detailAddon.install_info.version != detailAddon.version"
+              >
+                升级
+              </el-button>
+              <el-button type="info" v-if="detailAddon.is_download && (!detailAddon.install_info || !Object.keys(detailAddon.install_info).length)" @click="deleteAddonFn(detailAddon.key)"> 删除 </el-button>
+              <el-button type="info" v-if="detailAddon.is_download && detailAddon.install_info && Object.keys(detailAddon.install_info).length" @click="uninstallAddonFn(detailAddon.key)"> 卸载 </el-button>
+            </template>
+            <template v-else>
+              <el-button
+                  type="warning"
+                  @click.stop="upgradeAddonFn(detailAddon)"
+                  v-if="detailAddon.install_info.version != detailAddon.version"
+              >
+                升级
+              </el-button>
+            </template>
+          </div>
+        </div>
+
+        <div class="app-section-header mt-[20px] mb-[12px]" v-if="detailAddon?.type || detailAddon?.desc">
+          <div class="app-section-title">应用信息</div>
+          <div class="app-section-line"></div>
+        </div>
+        <div class="space-y-[10px] text-[14px]" v-if="detailAddon?.type || detailAddon?.desc">
+          <div class="flex items-center">
+            <div class="w-[84px] text-[#9699B6]">应用类型：</div>
+            <div class="text-[#374151]">{{ detailAddon?.type == 'app' ? '应用' : '插件' }}</div>
+          </div>
+          <div class="flex items-start">
+            <div class="w-[84px] text-[#9699B6] pt-[2px]">应用简介：</div>
+            <div class="text-[#374151] flex-1">{{ detailAddon?.desc || '-' }}</div>
+          </div>
+        </div>
+
+        <div class="app-section-header mt-[20px] mb-[12px]" v-if="detailAddon.is_local || !detailAddon.is_local&&detailAddon.expire_time">
+          <div class="app-section-title">服务周期</div>
+          <div class="app-section-line"></div>
+        </div>
+        <div class="space-y-[10px] text-[14px]" v-if="detailAddon.is_local || !detailAddon.is_local&&detailAddon.expire_time">
+          <div class="flex items-center">
+            <div class="w-[84px] text-[#9699B6]">有效期至：</div>
+            <div class="text-[#374151] flex items-center">
+              <div class="text-[#374151]">{{detailAddon.is_local ? '长期' : detailAddon.expire_time }}</div>
+              <div class="ml-[10px] flex items-center gap-[3px]">
+                <span class="iconfont icongouwuche text-[var(--el-color-primary)]"></span>
+                <span class="text-[var(--el-color-primary)] text-[14px] cursor-pointer" @click="toLink('pc')">续费应用</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <template v-if="detailAddon?.author || detailAddon?.author_phone">
+          <div class="app-section-header mt-[20px] mb-[12px]">
+            <div class="app-section-title">开发者信息</div>
+            <div class="app-section-line"></div>
+          </div>
+          <div class="space-y-[10px] text-[14px]">
+            <div class="flex items-center">
+              <div class="w-[84px] text-[#9699B6]">开发者：</div>
+              <div class="text-[#374151]">{{ detailAddon?.author || '-' }}</div>
+            </div>
+            <div class="flex items-center" v-if="detailAddon?.author_phone">
+              <div class="w-[84px] text-[#9699B6]">联系方式：</div>
+              <div class="text-[#374151] inline-flex items-center">
+                {{detailAddon?.author_phone}}
+                <el-icon class="ml-[6px] text-primary"><Phone /></el-icon>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <div class="app-section-header mt-[20px] mb-[12px]" v-if="detailAddon.key != 'niucloud-admin'">
+          <div class="app-section-title">访问应用</div>
+          <div class="app-section-line"></div>
+        </div>
+        <div class="flex gap-[30px]" v-if="detailAddon.key != 'niucloud-admin'">
+          <div class="bg-[#F5F5F5] w-[336px] h-[60px] px-[20px] flex items-center justify-between cursor-pointer" @click="toLink('pc')">
+            <div class="flex items-center">
+              <div class="w-[28px] h-[28px] flex items-center justify-center mr-[2px]">
+                <el-icon><Monitor /></el-icon>
+              </div>
+              <div class="text-[14px] text-[#374151]">PC端应用主页</div>
+            </div>
+            <span class="iconfont iconjiang-right"></span>
+          </div>
+          <div class="bg-[#F5F5F5] w-[336px] h-[60px] px-[20px] flex items-center justify-between cursor-pointer" @click="toLink('pc')">
+            <div class="flex items-center">
+              <div class="w-[28px] h-[28px] flex items-center justify-center mr-[2px]">
+                <el-icon><Cellphone /></el-icon>
+              </div>
+              <div class="text-[14px] text-[#374151]">移动端应用主页</div>
+            </div>
+            <span class="iconfont iconjiang-right"></span>
+          </div>
+        </div>
+
+        <div class="app-section-header mt-[20px] mb-[12px]">
+          <div class="app-section-title">应用版本</div>
+          <div class="app-section-line"></div>
+        </div>
+        <div class="flex items-center text-[14px]">
+          <div class="w-[84px] text-[#9699B6]">当前版本：</div>
+          <div class="text-[#374151]">{{ detailCurrentVersion }}</div>
+        </div>
+
+        <div class="app-section-header mt-[20px] mb-[12px]">
+          <div class="app-section-title">更新历史</div>
+          <div class="app-section-line"></div>
+        </div>
+        <div class="detail-upgrade-log h-[500px] overflow-auto" v-loading="detailLogLoading">
+          <el-scrollbar>
+            <el-timeline style="width: 100%" v-if="detailVersionList.length">
+              <el-timeline-item v-for="(item, index) in detailVersionList" :key="item.version_no || index" placement="left">
+                <el-collapse v-model="detailLogActive" accordion>
+                  <el-collapse-item :name="index">
+                    <template #title>
+                      <div class="flex items-center justify-between flex-1">
+                        <div class="flex flex-col items-baseline">
+                          <p class="text-[#1D1F3A] text-[16px]">版本：V{{ item.version_no }} </p>
+                          <div class="flex items-center">
+                            <span class="text-[#9699B6] text-[14px]">{{ timeSplit(item.release_time)[0] }}</span>
+                            <span class="text-[#9699B6] text-[14px] ml-[3px]">{{ timeSplit(item.release_time)[1] }}</span>
+                          </div>
+                        </div>
+                        <div class="flex items-center collapse-arrow">
+                          <span class="expand text-[14px] !text-[#374151]">更新内容</span>
+                          <span class="fold-up text-[14px] !text-[#374151]">收起</span>
+                          <span class="nc-iconfont nc-icon-xiaV6xx ml-[2px] text-[#9699B6]"></span>
+                        </div>
+                      </div>
+                    </template>
+                    <div class="timeline-log-wrap" v-if="item.upgrade_log">
+                      <div v-html="item.upgrade_log"></div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </el-timeline-item>
+            </el-timeline>
+            <el-empty v-else description="暂无版本更新信息" />
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <upgrade-log :upgradeKey="upgradeKey" ref="upgradeLogRef" />
+  <upgrade ref="upgradeRef" @complete="upgradeCompleteFn" @cloudbuild="handleCloudBuild" />
+  <cloud-build ref="cloudBuildRef" />
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, watch, h, computed, nextTick } from 'vue'
 import { t } from '@/lang'
 import {
-    getAddonLocal,
-    uninstallAddon,
-    installAddon,
-    preInstallCheck,
-    cloudInstallAddon,
-    getAddonInstalltask,
-    getAddonCloudInstallLog,
-    preUninstallCheck,
-    cancelInstall,
-    getAddonInit
+  getAddonLocal,
+  uninstallAddon,
+  installAddon,
+  preInstallCheck,
+  cloudInstallAddon,
+  getAddonInstalltask,
+  getAddonCloudInstallLog,
+  preUninstallCheck,
+  cancelInstall,
+  getAddonInit,
 } from '@/app/api/addon'
 import { deleteAddonDevelop } from '@/app/api/tools'
-import { downloadVersion, getAuthInfo, setAuthInfo, getFrameworkNewVersion } from '@/app/api/module'
+import { downloadVersion, getAuthInfo, setAuthInfo, getFrameworkNewVersion, getAppVersionList } from '@/app/api/module'
 import { getVersions } from '@/app/api/auth'
 import { ElMessage, ElMessageBox, ElNotification, FormInstance, FormRules } from 'element-plus'
 import 'vue-web-terminal/lib/theme/dark.css'
@@ -607,7 +959,7 @@ import useUserStore from '@/stores/modules/user'
 import Upgrade from '@/app/components/upgrade/index.vue'
 import CloudBuild from '@/app/components/cloud-build/index.vue'
 import UpgradeLog from '@/app/components/upgrade-log/index.vue'
-import {deepClone} from "@/utils/common";
+import { deepClone } from '@/utils/common'
 
 const tableRef = ref(null)
 const router = useRouter()
@@ -627,71 +979,90 @@ const frameworkVersionCode = ref('')
 const upgradeLogRef = ref<any>(null)
 const showType = ref(storage.get('storeShowType') || 'card')
 const frameworkNewVersion = ref('')
-getVersions().then((res) => {
+const searchParam = reactive({
+  keywords: '',
+  type: '',
+})
+const getFrameworkInfo = ()=>{
+  getVersions().then((res) => {
     frameworkVersion.value = res.data.version.version
     frameworkVersionCode.value = res.data.version.code
-})
-getFrameworkNewVersion().then(({ data }) => {
+  })
+  getFrameworkNewVersion().then(({ data }) => {
     frameworkNewVersion.value = data.last_version
-})
+  })
+}
+getFrameworkInfo()
+
+
+
+const upgradeCompleteFn = ()=>{
+  getFrameworkInfo()
+  localListFn()
+}
 
 const switchShowType = () => {
-    showType.value = showType.value == 'card' ? 'list' : 'card'
-    storage.set({key: 'storeShowType', data: showType.value})
+  showType.value = showType.value == 'card' ? 'list' : 'card'
+  storage.set({ key: 'storeShowType', data: showType.value })
 }
 
 const typeList = ref({})
 const getAddonInitFn = () => {
-    getAddonInit().then((res) => {
-        typeList.value = res.data.type_list
-    })
+  getAddonInit().then((res) => {
+    typeList.value = res.data.type_list
+  })
 }
 getAddonInitFn()
 const currDownData = ref()
 const downEventHintFn = () => {
-    downEvent(currDownData.value, true)
+  downEvent(currDownData.value, true)
 }
 
 const batchUpgradeApp = ref<String[]>([])
 
 const activeNameTabFn = (data: any) => {
-    activeName.value = data
-    storage.set({ key: 'storeActiveName', data })
+  activeName.value = data
+  storage.set({ key: 'storeActiveName', data })
 
-    if ((data == 'uninstalled' || data == 'recentlyUpdated') && localList.value[activeName.value].length) {
-        batchUpgradeApp.value = localList.value[activeName.value].map(item => item.key)
-    } else {
-        batchUpgradeApp.value = []
-    }
+  if (data == 'recentlyUpdated' && localList.value[activeName.value].length) {
+    batchUpgradeApp.value = localList.value[activeName.value].map((item) => item.key)
+  } else {
+    batchUpgradeApp.value = []
+  }
+  if (isShowDetail.value){
+    closeDetail()
+  }
 }
 if (route.query.id) {
-    activeNameTabFn(route.query.id)
+  activeNameTabFn(route.query.id)
 }
 const downEvent = (param: Record<string, any>, isDown = false) => {
-    if (param.is_download && activeName.value == 'all' && !isDown) {
-        unloadHintDialog.value = true
-        currDownData.value = param
-        return false
-    }
+  if (param.is_download && activeName.value == 'all' && !isDown) {
+    unloadHintDialog.value = true
+    currDownData.value = param
+    return false
+  }
 
-    if (downloading.value) return
-    downloading.value = param.key
+  if (downloading.value) return
+  downloading.value = param.key
 
-    downloadVersion({ addon: param.key, version: param.version }).then(() => {
+  downloadVersion({ addon: param.key, version: param.version })
+      .then(() => {
         unloadHintDialog.value = false
         installAddonFn(param.key)
         localListFn()
         downloading.value = ''
-    }).catch(() => {
+      })
+      .catch(() => {
         downloading.value = ''
-    })
+      })
 }
 
 const authCode = ref('')
 getAuthInfo().then((res) => {
-    if (res.data.data && res.data.data.auth_code) {
-        authCode.value = res.data.data.auth_code
-    }
+  if (res.data.data && res.data.data.auth_code) {
+    authCode.value = res.data.data.auth_code
+  }
 })
 
 /**
@@ -701,77 +1072,80 @@ const search_name = ref('')
 const search_type = ref('')
 // 表格展示数据
 const info = ref({
-    installed: [],
-    uninstalled: [],
-    all: [],
-    recentlyUpdated: []
+  installed: [],
+  uninstalled: [],
+  all: [],
+  recentlyUpdated: [],
 })
 const buildInfo = (list: any[]) => {
-    const map = new Map()
-    const result: any[] = []
+  const map = new Map()
+  const result: any[] = []
 
-    // 所有插件都先放进 map，初始化 children
-    list.forEach(item => {
-        map.set(item.key, { ...item, children: [] })
-    })
+  // 所有插件都先放进 map，初始化 children
+  list.forEach((item) => {
+    if(!item.isHideen){
+      map.set(item.key, { ...item, children: [] })
+    }
+  })
 
-    // 第二次遍历构建父子关系
-    list.forEach(item => {
-        if (item.support_app && map.has(item.support_app)) {
-            const parent = map.get(item.support_app)
-            parent.children.push(map.get(item.key)) // 直接取已经构建好的对象
-        }
-    })
+  // 第二次遍历构建父子关系
+  list.forEach((item) => {
+    if (!item.isHideen && item.support_app && map.has(item.support_app)) {
+      const parent = map.get(item.support_app)
+      parent.children.push(map.get(item.key)) // 直接取已经构建好的对象
+    }
+  })
 
-    // 最终收集那些没有作为子插件挂载出去的插件（即顶层插件）
-    map.forEach((item: any) => {
-        if (!item.support_app || !map.has(item.support_app)) {
-            result.push(item)
-        }
-    })
+  // 最终收集那些没有作为子插件挂载出去的插件（即顶层插件）
+  map.forEach((item: any) => {
+    if (!item.support_app || !map.has(item.support_app)) {
+      result.push(item)
+    }
+  })
 
-    return result
+  return result
 }
 
 const query = () => {
-    const name = search_name.value
-    const type = search_type.value
+  const name = search_name.value
+  const type = search_type.value
 
-    // 如果没填搜索关键词也没选类型，重置所有列表
-    if ((!name || name === '') && (type === '' || type == null)) {
-        info.value.installed = buildInfo(localList.value.installed)
-        info.value.uninstalled = buildInfo(localList.value.uninstalled)
-        info.value.all = buildInfo(localList.value.all)
-        info.value.recentlyUpdated = buildInfo(localList.value.recentlyUpdated)
-        return
-    }
+  // 如果没填搜索关键词也没选类型，重置所有列表
+  if ((!name || name === '') && (type === '' || type == null)) {
+    info.value.installed = buildInfo(localList.value.installed)
+    info.value.uninstalled = buildInfo(localList.value.uninstalled)
+    info.value.all = buildInfo(localList.value.all)
+    info.value.recentlyUpdated = buildInfo(localList.value.recentlyUpdated)
+    return
+  }
 
-    // 公共筛选函数
-    const filterList = (list: any[]) => {
-        return list.filter((el: any) => {
-        const matchName = !name || el.title.includes(name)
-        const matchType = !type || el.type === type
-        return matchName && matchType
-        })
-    }
+  // 公共筛选函数
+  const filterList = (list: any[]) => {
+    return list.filter((el: any) => {
+      const matchName = !name || el.title.includes(name)
+      const matchType = !type || el.type === type
+      return matchName && matchType
+    })
+  }
 
-    info.value.installed = buildInfo(filterList(localList.value.installed))
-    info.value.uninstalled = buildInfo(filterList(localList.value.uninstalled))
-    info.value.all = buildInfo(filterList(localList.value.all))
-    info.value.recentlyUpdated = buildInfo(filterList(localList.value.recentlyUpdated))
+  info.value.installed = buildInfo(filterList(localList.value.installed))
+  info.value.uninstalled = buildInfo(filterList(localList.value.uninstalled))
+  info.value.all = buildInfo(filterList(localList.value.all))
+  info.value.recentlyUpdated = buildInfo(filterList(localList.value.recentlyUpdated))
 }
 
 const localList = ref({
-    installed: [],
-    uninstalled: [],
-    all: [],
-    recentlyUpdated: [],
-    error: ''
+  installed: [],
+  uninstalled: [],
+  all: [],
+  recentlyUpdated: [],
+  error: '',
 })
 
 const localListFn = () => {
-    loading.value = true
-    getAddonLocal({}).then((res) => {
+  loading.value = true
+  getAddonLocal({})
+      .then((res) => {
         const data = res.data.list
         localList.value.error = res.data.error
         localList.value.installed = []
@@ -779,48 +1153,83 @@ const localListFn = () => {
         localList.value.all = []
         localList.value.recentlyUpdated = []
         for (const i in data) {
-            if (data[i].is_local == false) localList.value.all.push(data[i])
+          if (data[i].is_local == false) localList.value.all.push(data[i])
 
-            if (data[i].install_info && Object.keys(data[i].install_info)?.length) {
-                localList.value.installed.push(data[i])
-                if (data[i].install_info.version != data[i].version) {
-                    localList.value.recentlyUpdated.push(data[i])
-                }
-            } else {
-                if (data[i].is_download == true) localList.value.uninstalled.push(data[i])
+          if (data[i].install_info && Object.keys(data[i].install_info)?.length) {
+            localList.value.installed.push(data[i])
+            if (data[i].install_info.version != data[i].version) {
+              localList.value.recentlyUpdated.push(data[i])
             }
+          } else {
+            if (data[i].is_download == true) localList.value.uninstalled.push(data[i])
+          }
         }
         query()
         userStore.routers.forEach((item, index) => {
-            if (item.children && item.children.length) {
-                item.name = findFirstValidRoute(item.children)
-                appLink.value[item.meta.app] = findFirstValidRoute(item.children)
-            } else {
-                appLink.value[item.meta.app] = item.name
-            }
+          if (item.children && item.children.length) {
+            item.name = findFirstValidRoute(item.children)
+            appLink.value[item.meta.app] = findFirstValidRoute(item.children)
+          } else {
+            appLink.value[item.meta.app] = item.name
+          }
         })
         activeNameTabFn(activeName.value)
         loading.value = false
-    }).catch(() => {
+      })
+      .catch(() => {
         loading.value = false
-    })
+      })
 }
-
 localListFn()
 
-// 点击应用可以进系统
+const noAppLen = computed(()=>{
+  let num = 0
+  if(localList.value[activeName.value] && localList.value[activeName.value].length){
+    localList.value[activeName.value].forEach(item=>{
+      if(item.isHideen){
+        num++
+      }
+    })
+  }
+  return num == localList.value[activeName.value].length
+})
 
+const searchFormRef = ref<FormInstance>()
+const searchFn = ()=>{
+  localList.value[activeName.value].forEach(item=>{
+    item.isHideen = true
+    let keywords = searchParam.keywords;
+    let type = searchParam.type;
+    const typeMatch = !type || item.type === type;
+    const keywordsMatch = !keywords || item.title.indexOf(keywords) !== -1;
+    if(typeMatch && keywordsMatch){
+      item.isHideen = false
+    }
+  })
+
+  if(showType.value != 'card') query()
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  searchParam.keywords = ''
+  searchParam.type = ''
+  searchFn()
+}
+
+// 点击应用可以进系统
 const appLink: any = ref({})
 const itemPath = (data: any) => {
-    if (data.type == 'app' && Object.keys(data.install_info).length) {
-        storage.set({ key: 'menuAppStorage', data: data.key })
-        storage.set({ key: 'plugMenuTypeStorage', data: '' })
-        const appMenuList = userStore.appMenuList
-        appMenuList.push(data.key)
-        userStore.setAppMenuList(appMenuList)
-        const name: any = appLink.value[data.key]
-        router.push({ name })
-    }
+  if (data.type == 'app' && Object.keys(data.install_info).length) {
+    storage.set({ key: 'menuAppStorage', data: data.key })
+    storage.set({ key: 'plugMenuTypeStorage', data: '' })
+    const appMenuList = userStore.appMenuList
+    appMenuList.push(data.key)
+    userStore.setAppMenuList(appMenuList)
+    const name: any = appLink.value[data.key]
+    router.push({ name })
+  }
 }
 
 const currAddon = ref('')
@@ -837,25 +1246,25 @@ const installCheckResult = ref({})
 let flashInterval = null
 const terminalFlash = new TerminalFlash()
 const onExecCmd = (key, command, success, failed, name) => {
-    if (command == '开始安装插件') {
-        success(terminalFlash)
-        const frames = makeIterator(['/', '——', '\\', '|'])
-        flashInterval = setInterval(() => {
-            terminalFlash.flush('> ' + frames.next().value)
-        }, 150)
-    }
+  if (command == '开始安装插件') {
+    success(terminalFlash)
+    const frames = makeIterator(['/', '——', '\\', '|'])
+    flashInterval = setInterval(() => {
+      terminalFlash.flush('> ' + frames.next().value)
+    }, 150)
+  }
 }
 
-function makeIterator (array: string[]) {
-    let nextIndex = 0
-    return {
-        next () {
-            if (nextIndex + 1 == array.length) {
-                nextIndex = 0
-            }
-            return { value: array[nextIndex++] }
-        }
-    }
+function makeIterator(array: string[]) {
+  let nextIndex = 0
+  return {
+    next() {
+      if (nextIndex + 1 == array.length) {
+        nextIndex = 0
+      }
+      return { value: array[nextIndex++] }
+    },
+  }
 }
 
 /**
@@ -863,18 +1272,18 @@ function makeIterator (array: string[]) {
  * @param key
  */
 const installAddonFn = (key: string) => {
-    currAddon.value = key
+  currAddon.value = key
 
-    preInstallCheck(key).then((res) => {
-        installStep.value = 0
-        isBack.value = false
-        errorDialog.value = false
-        installType.value = ''
-        installShowDialog.value = true
-        installAfterTips.value = []
-        installCheckResult.value = res.data
-        userStore.clearRouters()
-    })
+  preInstallCheck(key).then((res) => {
+    installStep.value = 0
+    isBack.value = false
+    errorDialog.value = false
+    installType.value = ''
+    installShowDialog.value = true
+    installAfterTips.value = []
+    installCheckResult.value = res.data
+    userStore.clearRouters()
+  })
 }
 
 /**
@@ -886,88 +1295,93 @@ let upgradeTimer: ReturnType<typeof setInterval> | null = null
 let notificationEl = null
 
 const getInstallTask = (first: boolean = true) => {
-    getAddonInstalltask().then((res) => {
+  getAddonInstalltask()
+      .then((res) => {
         if (res.data) {
-            if (first) {
-                installLog = []
-                currAddon.value = res.data.addon
-                if (!installShowDialog.value) {
-                    notificationEl = ElNotification.success({
-                        title: t('warning'),
-                        dangerouslyUseHTMLString: true,
-                        message: h('div', {}, [t('installingTips'), h('span', {
-                            class: 'text-primary cursor-pointer',
-                            onClick: checkInstallTask
-                        }, [t('installPercent')])]),
-                        duration: 0,
-                        showClose: false
-                    })
-                }
-                if (upgradeTimer) clearInterval(upgradeTimer)
-                upgradeDuration.value = parseInt(Date.now() / 1000) - res.data.timestamp
-                upgradeTimer = setInterval(() => {
-                    upgradeDuration.value++
-                }, 1000)
+          if (first) {
+            installLog = []
+            currAddon.value = res.data.addon
+            if (!installShowDialog.value) {
+              notificationEl = ElNotification.success({
+                title: t('warning'),
+                dangerouslyUseHTMLString: true,
+                message: h('div', {}, [
+                  t('installingTips'),
+                  h(
+                      'span',
+                      {
+                        class: 'text-primary cursor-pointer',
+                        onClick: checkInstallTask,
+                      },
+                      [t('installPercent')],
+                  ),
+                ]),
+                duration: 0,
+                showClose: false,
+              })
             }
-            if (res.data.error) {
-                terminalRef.value?.pushMessage({ content: res.data.error, class: 'error' })
-                errorMsg.value = res.data.error
-                errorDialog.value = true
-                if (upgradeTimer) {
-                    clearInterval(upgradeTimer)
-                    upgradeTimer = null
-                }
-                // ElMessage({ message: '插件安装失败', type: 'error', duration: 5000 })
-                return
+            if (upgradeTimer) clearInterval(upgradeTimer)
+            upgradeDuration.value = parseInt(Date.now() / 1000) - res.data.timestamp
+            upgradeTimer = setInterval(() => {
+              upgradeDuration.value++
+            }, 1000)
+          }
+          if (res.data.error) {
+            terminalRef.value?.pushMessage({ content: res.data.error, class: 'error' })
+            errorMsg.value = res.data.error
+            errorDialog.value = true
+            if (upgradeTimer) {
+              clearInterval(upgradeTimer)
+              upgradeTimer = null
             }
-            if (res.data.mode == 'cloud') {
-                getCloudInstallLog()
-            }
-            setTimeout(() => {
-                getInstallTask(false)
-            }, 2000)
+            // ElMessage({ message: '插件安装失败', type: 'error', duration: 5000 })
+            return
+          }
+          if (res.data.mode == 'cloud') {
+            getCloudInstallLog()
+          }
+          setTimeout(() => {
+            getInstallTask(false)
+          }, 2000)
         } else {
-            if (!first) {
-                installStep.value = 2
-                if (upgradeTimer) {
-                    clearInterval(upgradeTimer)
-                    upgradeTimer = null
-                }
-                localListFn()
-                userStore.clearRouters()
-                notificationEl?.close()
+          if (!first) {
+            installStep.value = 2
+            if (upgradeTimer) {
+              clearInterval(upgradeTimer)
+              upgradeTimer = null
             }
+            localListFn()
+            userStore.clearRouters()
+            notificationEl?.close()
+          }
         }
-    }).catch((e) => {
+      })
+      .catch((e) => {
         console.log(e)
         terminalRef.value?.pushMessage({ content: e.message, class: 'error' })
-    })
+      })
 }
 
 getInstallTask()
 
 const isBack = ref(false)
 const handleBack = () => {
-    isBack.value = true
-    installStep.value = 1
-    errorDialog.value = false
+  isBack.value = true
+  installStep.value = 1
+  errorDialog.value = false
 }
 
 const formatUpgradeDuration = computed(() => {
-    const s = upgradeDuration.value
-    const h = Math.floor(s / 3600)
-    const m = Math.floor((s % 3600) / 60)
-    const sec = s % 60
-    return [
-        h > 0 ? `${h}小时` : '',
-        m > 0 ? `${m}分钟` : '',
-        `${sec}秒`
-    ].filter(Boolean).join('')
+  const s = upgradeDuration.value
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+  return [h > 0 ? `${h}小时` : '', m > 0 ? `${m}分钟` : '', `${sec}秒`].filter(Boolean).join('')
 })
 
 const checkInstallTask = () => {
-    installShowDialog.value = true
-    installStep.value = 1
+  installShowDialog.value = true
+  installStep.value = 1
 }
 
 const localInstalling = ref(false)
@@ -976,28 +1390,30 @@ const localInstalling = ref(false)
  */
 const installType = ref('')
 const handleInstall = () => {
-    if (!installCheckResult.value.is_pass || localInstalling.value) return
-    installType.value = 'local'
-    localInstalling.value = true
-    upgradeStartTime.value = Date.now()
-    upgradeDuration.value = 0
-    if (upgradeTimer) clearInterval(upgradeTimer)
-    upgradeTimer = setInterval(() => {
-        upgradeDuration.value++
-    }, 1000)
+  if (!installCheckResult.value.is_pass || localInstalling.value) return
+  installType.value = 'local'
+  localInstalling.value = true
+  upgradeStartTime.value = Date.now()
+  upgradeDuration.value = 0
+  if (upgradeTimer) clearInterval(upgradeTimer)
+  upgradeTimer = setInterval(() => {
+    upgradeDuration.value++
+  }, 1000)
 
-    installAddon({ addon: currAddon.value }).then((res) => {
+  installAddon({ addon: currAddon.value })
+      .then((res) => {
         installStep.value = 2
         if (upgradeTimer) {
-            clearInterval(upgradeTimer)
-            upgradeTimer = null
+          clearInterval(upgradeTimer)
+          upgradeTimer = null
         }
         localListFn()
         localInstalling.value = false
         if (res.data.length) installAfterTips.value = res.data
-    }).catch((res) => {
+      })
+      .catch((res) => {
         localInstalling.value = false
-    })
+      })
 }
 
 const cloudInstalling = ref(false)
@@ -1006,65 +1422,71 @@ const cloudInstalling = ref(false)
  * 云安装插件
  */
 const handleCloudInstall = () => {
-    if (!authCode.value) {
-        authElMessageBox()
-        return
-    }
+  if (!authCode.value) {
+    authElMessageBox()
+    return
+  }
 
-    if (!installCheckResult.value.is_pass || cloudInstalling.value) return
-    cloudInstalling.value = true
-    installType.value = 'cloud'
+  if (!installCheckResult.value.is_pass || cloudInstalling.value) return
+  cloudInstalling.value = true
+  installType.value = 'cloud'
 
-    cloudInstallAddon({ addon: currAddon.value }).then((res) => {
+  cloudInstallAddon({ addon: currAddon.value })
+      .then((res) => {
         installStep.value = 1
         terminalRef.value.execute('clear')
         terminalRef.value.execute('开始安装插件')
         if (res.data.length) installAfterTips.value = res.data
         getInstallTask()
         cloudInstalling.value = false
-    }).catch((res) => {
+      })
+      .catch((res) => {
         cloudInstalling.value = false
-    })
+      })
 }
 
 const authElMessageBox = () => {
-    ElMessageBox.confirm(t('authTips'), t('warning'), {
-        distinguishCancelAndClose: true,
-        confirmButtonText: t('toBind'),
-        cancelButtonText: t('toNiucloud')
-    }).then(() => {
+  ElMessageBox.confirm(t('authTips'), t('warning'), {
+    distinguishCancelAndClose: true,
+    confirmButtonText: t('toBind'),
+    cancelButtonText: t('toNiucloud'),
+  })
+      .then(() => {
         authCodeApproveFn()
-    }).catch((action: string) => {
+      })
+      .catch((action: string) => {
         if (action === 'cancel') {
-            window.open('https://www.niucloud.com/app')
+          window.open('https://www.niucloud.com/app')
         }
-    })
+      })
 }
 const errorDialog = ref(false)
 const errorMsg = ref('')
 let installLog: string[] = []
 const getCloudInstallLog = () => {
-    getAddonCloudInstallLog(currAddon.value).then((res) => {
+  getAddonCloudInstallLog(currAddon.value)
+      .then((res) => {
         const data = res.data.data ?? []
         if (data[0] && data[0].length && installShowDialog.value == true) {
-            data[0].forEach((item) => {
-                if (!installLog.includes(item.action)) {
-                    terminalRef.value.pushMessage({ content: `${ item.action }` })
-                    installLog.push(item.action)
+          data[0].forEach((item) => {
+            if (!installLog.includes(item.action)) {
+              terminalRef.value.pushMessage({ content: `${item.action}` })
+              installLog.push(item.action)
 
-                    if (item.code == 0) {
-                        terminalRef.value.pushMessage({ content: item.msg, class: 'error' })
-                    }
-                }
-            })
+              if (item.code == 0) {
+                terminalRef.value.pushMessage({ content: item.msg, class: 'error' })
+              }
+            }
+          })
         }
-    }).catch(() => {
+      })
+      .catch(() => {
         notificationEl?.close()
-    })
+      })
 }
 
 watch(currAddon, (nval) => {
-    installCheckResult.value = {}
+  installCheckResult.value = {}
 })
 
 // 卸载面板弹窗
@@ -1078,63 +1500,65 @@ const uninstallCheckResult = ref({})
  * @param key
  */
 const uninstallAddonFn = (key: string) => {
-    ElMessageBox.confirm(t('uninstallTips'), t('warning'), {
-        confirmButtonText: t('confirm'),
-        cancelButtonText: t('cancel'),
-        type: 'warning'
-    }).then(() => {
-        handleUninstallAddon(key)
-    })
+  ElMessageBox.confirm(t('uninstallTips'), t('warning'), {
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+    type: 'warning',
+  }).then(() => {
+    handleUninstallAddon(key)
+  })
 }
 
 /**
  * 插件升级
  * @param key
  */
-const upgradeAddonFn = (key: string) => {
-    upgradeRef.value?.open(key)
+const upgradeAddonFn = (data: any) => {
+  upgradeRef.value?.open(data.key,null,data)
 }
 
 /**
  * 云编译
  */
 const handleCloudBuild = () => {
-    if (!authCode.value) {
-        authElMessageBox()
-        return
-    }
-    if (cloudBuildRef.value.cloudBuildTask) {
-        cloudBuildRef.value?.open()
-        return
-    }
-    ElMessageBox.confirm(t('cloudBuildTips'), t('warning'), {
-        confirmButtonText: t('confirm'),
-        cancelButtonText: t('cancel'),
-        type: 'warning'
-    }).then(() => {
-        cloudBuildRef.value?.open()
-    })
+  if (!authCode.value) {
+    authElMessageBox()
+    return
+  }
+  if (cloudBuildRef.value.cloudBuildTask) {
+    cloudBuildRef.value?.open()
+    return
+  }
+  ElMessageBox.confirm(t('cloudBuildTips'), t('warning'), {
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+    type: 'warning',
+  }).then(() => {
+    cloudBuildRef.value?.open()
+  })
 }
 
 const handleUninstallAddon = (key: string) => {
-    preUninstallCheck(key).then(({ data }) => {
-        if (data.is_pass) {
-            uninstallAddon({ addon: key }).then((res) => {
-                localListFn()
-                userStore.clearRouters()
-                loading.value = false
-            }).catch(() => {
-                loading.value = false
-            })
-        } else {
-            uninstallCheckResult.value = data
-            uninstallShowDialog.value = true
-        }
-    })
+  preUninstallCheck(key).then(({ data }) => {
+    if (data.is_pass) {
+      uninstallAddon({ addon: key })
+          .then((res) => {
+            localListFn()
+            userStore.clearRouters()
+            loading.value = false
+          })
+          .catch(() => {
+            loading.value = false
+          })
+    } else {
+      uninstallCheckResult.value = data
+      uninstallShowDialog.value = true
+    }
+  })
 }
 
 const market = () => {
-    window.open('https://www.niucloud.com/app')
+  window.open('https://www.niucloud.com/app')
 }
 
 /**
@@ -1142,46 +1566,40 @@ const market = () => {
  * @param done
  */
 const installShowDialogClose = (done: () => {}) => {
-    if (installStep.value == 1 && !isBack.value && !errorDialog.value) {
-        ElMessageBox.confirm(t('installShowDialogCloseTips'), t('warning'), {
-            confirmButtonText: t('confirm'),
-            cancelButtonText: t('cancel'),
-            type: 'warning'
-        }).then(() => {
-            cancelInstall(currAddon.value)
-            if (upgradeTimer) {
-                clearInterval(upgradeTimer)
-                upgradeTimer = null
-            }
-            isBack.value = false
-            installType.value = ''
-            errorDialog.value = false
-            done()
-        })
-    } else if (installStep.value == 2) {
-        activeNameTabFn('installed')
-        location.reload()
-    } else {
-        done()
-    }
+  if (installStep.value == 1 && !isBack.value && !errorDialog.value) {
+    ElMessageBox.confirm(t('installShowDialogCloseTips'), t('warning'), {
+      confirmButtonText: t('confirm'),
+      cancelButtonText: t('cancel'),
+      type: 'warning',
+    }).then(() => {
+      cancelInstall(currAddon.value)
+      if (upgradeTimer) {
+        clearInterval(upgradeTimer)
+        upgradeTimer = null
+      }
+      isBack.value = false
+      installType.value = ''
+      errorDialog.value = false
+      done()
+    })
+  } else if (installStep.value == 2) {
+    activeNameTabFn('installed')
+    location.reload()
+  } else {
+    done()
+  }
 
-    flashInterval && clearInterval(flashInterval)
+  flashInterval && clearInterval(flashInterval)
 }
 
-// 插件详情
-const appStoreShowDialog = ref(false)
-const appStoreInfo = ref({})
-const getAddonDetailFn = (data: any) => {
-    appStoreShowDialog.value = true
-    appStoreInfo.value = data
-}
 // 更新信息
-
-const upgradeKey = ref<string>('')
 const updateInformationFn = (data: any) => {
-    // updateInformationDialog.value = true
-    upgradeKey.value = data.key
-    upgradeLogRef.value?.open()
+  data.version = frameworkNewVersion.value
+  data.title = '框架'
+  data.install_info = {
+    version: frameworkVersion.value
+  }
+  openDetail(data)
 }
 // 授权
 const authCodeApproveDialog = ref(false)
@@ -1190,296 +1608,374 @@ const getAuthCodeDialog = ref(null)
 const saveLoading = ref(false)
 const authLoading = ref(true)
 const checkAppMange = () => {
-    authLoading.value = true
-    getAuthInfo().then((res) => {
+  authLoading.value = true
+  getAuthInfo()
+      .then((res) => {
         authLoading.value = false
         if (res.data.data && res.data.data.length != 0) {
-            authinfo.value = res.data.data
+          authinfo.value = res.data.data
         }
-    }).catch(() => {
+      })
+      .catch(() => {
         authLoading.value = false
         authCodeApproveDialog.value = false
-    })
+      })
 }
 
 checkAppMange()
 const authCodeApproveFn = () => {
-    authCodeApproveDialog.value = true
+  authCodeApproveDialog.value = true
 }
 
 const formData = reactive<Record<string, string>>({
-    auth_code: '',
-    auth_secret: ''
+  auth_code: '',
+  auth_secret: '',
 })
 const formRef = ref<FormInstance>()
 
 // 表单验证规则
 const formRules = reactive<FormRules>({
-    auth_code: [{ required: true, message: t('authCodePlaceholder'), trigger: 'blur' }],
-    auth_secret: [{ required: true, message: t('authSecretPlaceholder'), trigger: 'blur' }]
+  auth_code: [{ required: true, message: t('authCodePlaceholder'), trigger: 'blur' }],
+  auth_secret: [{ required: true, message: t('authSecretPlaceholder'), trigger: 'blur' }],
 })
 
 const save = async (formEl: FormInstance | undefined) => {
-    if (saveLoading.value || !formEl) return
+  if (saveLoading.value || !formEl) return
 
-    await formEl.validate(async(valid) => {
-        if (valid) {
-            saveLoading.value = true
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      saveLoading.value = true
 
-            setAuthInfo(formData).then(() => {
-                saveLoading.value = false
-                setTimeout(() => {
-                    location.reload()
-                }, 1000)
-            }).catch(() => {
-                saveLoading.value = false
-            })
-        }
-    })
+      setAuthInfo(formData)
+          .then(() => {
+            saveLoading.value = false
+            setTimeout(() => {
+              location.reload()
+            }, 1000)
+          })
+          .catch(() => {
+            saveLoading.value = false
+          })
+    }
+  })
 }
 
 const goRouter = () => {
-    window.open('https://www.niucloud.com/app')
+  window.open('https://www.niucloud.com/app')
 }
 
 const cloudBuildCheckDirFn = () => {
-    window.open('https://doc.niucloud.com/v6.html?keywords=/chang-jian-wen-ti-chu-li/er-shi-wu-3001-sheng-7ea7-yun-bian-yi-mu-lu-du-xie-quan-xian-zhuang-tai-bu-tong-guo-ru-he-chu-li')
+  window.open(
+      'https://doc.press.niucloud.com/php/v6-shop/use/chang-jian-wen-ti-chu-li/er-shi-wu-3001-sheng-7ea7-yun-bian-yi-mu-lu-du-xie-quan-xian-zhuang-tai-bu-tong-guo-ru-he-chu-li.html',
+  )
 }
 
 const deleteAddonFn = (key: string) => {
-    ElMessageBox.confirm(t('deleteAddonTips'), t('warning'), {
-        confirmButtonText: t('confirm'),
-        cancelButtonText: t('cancel'),
-        type: 'warning'
-    }).then(() => {
-        deleteAddonDevelop(key).then(() => {
-            localListFn()
-        })
+  ElMessageBox.confirm(t('deleteAddonTips'), t('warning'), {
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+    type: 'warning',
+  }).then(() => {
+    deleteAddonDevelop(key).then(() => {
+      localListFn()
     })
+  })
 }
 
 const versionJudge = (row: any) => {
-    if (!row.support_version) return false
-    const supportVersionApp = row.support_version.split('.')
-    const frameworkVersionArr = frameworkVersion.value.split('.')
-    if (parseFloat(`${ supportVersionApp[0] }.${ supportVersionApp[1] }`) < parseFloat(`${ frameworkVersionArr[0] }.${ frameworkVersionArr[1] }`)) return true
-    return false
+  if (!row.support_version) return false
+  const supportVersionApp = row.support_version.split('.')
+  const frameworkVersionArr = frameworkVersion.value.split('.')
+  if (parseFloat(`${supportVersionApp[0]}.${supportVersionApp[1]}`) < parseFloat(`${frameworkVersionArr[0]}.${frameworkVersionArr[1]}`)) return true
+  return false
 }
 
 const appKeyAllSelect = () => {
-    if (localList.value[activeName.value].length) {
-        if (localList.value[activeName.value].length == batchUpgradeApp.value.length) {
-            batchUpgradeApp.value = []
-        } else {
-            batchUpgradeApp.value = localList.value[activeName.value].map(item => item.key)
-        }
+  if (localList.value[activeName.value].length) {
+    if (localList.value[activeName.value].length == batchUpgradeApp.value.length) {
+      batchUpgradeApp.value = []
+    } else {
+      batchUpgradeApp.value = localList.value[activeName.value].map((item) => item.key)
     }
+  }
 }
 
 const appKeySingleSelect = (event: any, key: string) => {
-    if (activeName.value != 'recentlyUpdated' && activeName.value != 'uninstalled') return
-    if (batchUpgradeApp.value.includes(key)) {
-        batchUpgradeApp.value.splice(batchUpgradeApp.value.indexOf(key), 1)
-    } else {
-        batchUpgradeApp.value.push(key)
-    }
+  if (activeName.value != 'recentlyUpdated' && activeName.value != 'uninstalled') return
+  if (batchUpgradeApp.value.includes(key)) {
+    batchUpgradeApp.value.splice(batchUpgradeApp.value.indexOf(key), 1)
+  } else {
+    batchUpgradeApp.value.push(key)
+  }
 }
 
 const batchUpgrade = () => {
-    const appKeys = deepClone(batchUpgradeApp.value)
-    if (frameworkVersion.value != frameworkNewVersion.value) {
-        appKeys.unshift('niucloud-admin')
-    }
-    if (!appKeys.length) {
-        ElMessage({ message: localList.recentlyUpdated.length ? '请先勾选要升级的插件' : '当前已是最新版', type: 'error', duration: 5000 })
-        return
-    }
-    upgradeAddonFn(appKeys.toString())
+  const appKeys = deepClone(batchUpgradeApp.value)
+  if (frameworkVersion.value != frameworkNewVersion.value) {
+    appKeys.unshift('niucloud-admin')
+  }
+  if (!appKeys.length) {
+    ElMessage({
+      message: localList.recentlyUpdated.length ? '请先勾选要升级的插件' : '当前已是最新版',
+      type: 'error',
+      duration: 5000,
+    })
+    return
+  }
+  upgradeAddonFn({'key': appKeys.toString()})
 }
 
 const batchInstall = () => {
-    const appKeys = batchUpgradeApp.value
-    if (!appKeys.length) {
-        ElMessage({ message: '请先勾选要安装的插件', type: 'error', duration: 5000 })
-        return
-    }
-    installAddonFn(appKeys.toString())
+  const appKeys = batchUpgradeApp.value
+  if (!appKeys.length) {
+    ElMessage({ message: '请先勾选要安装的插件', type: 'error', duration: 5000 })
+    return
+  }
+  installAddonFn(appKeys.toString())
 }
 
 const visibleRowKeys = computed(() => {
-    return new Set((info.value[activeName.value] || []).map(row => row.key))
+  return new Set((info.value[activeName.value] || []).map((row) => row.key))
 })
 
-const oneClickRepair = () => {
-    ElMessage({ message: '即将上线敬请期待', duration: 5000 })
+// 应用详情  ------ start
+const isShowDetail = ref(false)
+const detailAddon = ref<any>(null)
+
+const detailInstalled = computed(() => {
+  const installInfo = detailAddon.value?.install_info
+  return Boolean(installInfo && Object.keys(installInfo).length)
+})
+const detailCurrentVersion = computed(() => {
+  const installInfo = detailAddon.value?.install_info
+  if (installInfo && Object.keys(installInfo).length) return installInfo.version || '-'
+  return detailAddon.value?.version || '-'
+})
+
+const detailVersionList = ref<any[]>([])
+const detailLogLoading = ref(false)
+const detailLogActive = ref(0)
+
+const timeSplit = (str: string) => {
+  if (!str) return ['-', '-']
+  const [date, time] = str.split(' ')
+  if (!time) return [date || '-', '-']
+  const [hours, minutes] = time.split(':')
+  return [date, `${hours}:${minutes}`]
+}
+
+const getDetailVersionList = async (appKey: string) => {
+  detailLogLoading.value = true
+  try {
+    const { data } = await getAppVersionList({ app_key: appKey })
+    detailVersionList.value = Array.isArray(data) ? data : []
+  } finally {
+    detailLogLoading.value = false
+  }
+}
+
+const openDetail = (row: any) => {
+  detailAddon.value = row
+  isShowDetail.value = true
+  detailLogActive.value = 0
+  detailVersionList.value = []
+  if (row?.key) getDetailVersionList(row.key)
+}
+
+const closeDetail = () => {
+  isShowDetail.value = false
+  detailAddon.value = null
+  detailVersionList.value = []
+}
+// 应用详情  ------ end
+
+const toLink = (type)=>{
+  if(type=='pc'){
+    window.open(`https://www.niucloud.com/app/detail/?id=${detailAddon.value.app_id}`)
+  }else{
+    window.open(`https://wap.niucloud.com/pages/product/detail?id=${detailAddon.value.app_id}`)
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .multi-hidden {
-    word-break: break-all;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 // 插件安装-弹窗-表格样式
 .table-head-bg {
-    background: #f5f7f9;
+  background: #f5f7f9;
 }
 
 html.dark .table-head-bg {
-    background: #141414;
+  background: #141414;
 }
 
 .el-alert .el-alert__title {
-    font-size: 16px;
-    line-height: 18px;
+  font-size: 16px;
+  line-height: 18px;
 }
 
 :deep(.terminal .t-log-box span) {
-    white-space: pre-wrap;
+  white-space: pre-wrap;
 }
 
 :deep(.data-loading) {
-    .el-table__body-wrapper {
-        display: none !important;
-    }
+  .el-table__body-wrapper {
+    // display: none !important;
+  }
 }
-:deep(.hide-expand .el-table__expand-icon>.el-icon){
+
+:deep(.hide-expand .el-table__expand-icon > .el-icon) {
   visibility: hidden;
   pointer-events: none;
 }
-:deep(.el-input__wrapper){
-    box-shadow: none !important;
-    border-radius: 4px !important;
-    border: 1px solid #D1D5DB !important;
-    height: 32px !important;
+
+:deep(.el-input__wrapper) {
+  box-shadow: none !important;
+  border-radius: 4px !important;
+  border: 1px solid #d1d5db !important;
+  height: 32px !important;
 }
-:deep(.el-select__wrapper){
-    box-shadow: none !important;
-    border-radius: 4px !important;
-    border: 1px solid #D1D5DB !important;
-    height: 32px !important;
+
+:deep(.el-select__wrapper) {
+  box-shadow: none !important;
+  border-radius: 4px !important;
+  border: 1px solid #d1d5db !important;
+  height: 32px !important;
 }
-:deep(.el-button){
-    border-radius: 4px !important;
+
+:deep(.el-button) {
+  border-radius: 4px !important;
 }
+
 /* 设置 el-select 的 placeholder 颜色 */
 :deep(.search-form .el-select__placeholder.is-transparent) {
-    color: #C4C7DA;
-    font-size: 12px;
+  color: #c4c7da;
+  font-size: 12px;
 }
 
 /* 设置 el-select 选中后的颜色 */
 :deep(.search-form .el-select__placeholder) {
-    color: #4F516D;
-    font-size: 12px;
-
+  color: #4f516d;
+  font-size: 12px;
 }
+
 /* 设置 el-input 的 placeholder 颜色 */
 :deep(.search-form .el-input__inner::placeholder) {
-    color: #C4C7DA;
-    font-size: 12px;
-
+  color: #c4c7da;
+  font-size: 12px;
 }
+
 /* 设置 el-input 输入内容后的颜色 */
 :deep(.search-form .el-input__inner) {
-    color: #4F516D;
-    font-size: 12px;
-
+  color: #4f516d;
+  font-size: 12px;
 }
+
 /* 设置 el-date-picker 的 placeholder 颜色 */
 :deep(.search-form .el-date-editor .el-range-input::placeholder) {
-  color: #C4C7DA;
+  color: #c4c7da;
   font-size: 12px;
 }
 
 /* 设置 el-date-picker 的输入内容颜色 */
 :deep(.search-form .el-date-editor .el-range-input) {
-  color: #4F516D;
+  color: #4f516d;
   font-size: 12px;
 }
 
-
 :deep(.el-table tr td:first-child) {
-    border-bottom: none;
-    // background-color: inherit !important;
-    height: 100px;
+  border-bottom: none;
+  // background-color: inherit !important;
+  height: 100px;
 }
+
 :deep(.el-table__body tr:hover td:first-child) {
-    // border-bottom: 1px solid var(--el-table-border-color);
+  // border-bottom: 1px solid var(--el-table-border-color);
 }
+
 :deep(.el-table__body tr) {
   position: relative;
 }
+
 :deep(.el-table__body td:first-child::before) {
-    opacity: 0;
-    content: '';
-    position: absolute;
-    top: -1px;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: var(--el-table-border-color);
-    // transition: opacity 0.2s;
-    z-index: 1;
+  opacity: 0;
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--el-table-border-color);
+  // transition: opacity 0.2s;
+  z-index: 1;
 }
+
 :deep(.el-table__body td:first-child) {
-    position: relative;
+  position: relative;
 }
 
 :deep(.el-table__body tr:hover td:first-child::before) {
-    opacity: 1;
-
+  opacity: 1;
 }
+
 /* 创建伪元素当作 hover 边框线，默认隐藏 */
 :deep(.el-table__body td:first-child::after) {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1px;
-    background-color: var(--el-table-border-color);
-    opacity: 0;
-    // transition: opacity 0.2s ease;
-    pointer-events: none;
-    z-index: 1;
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background-color: var(--el-table-border-color);
+  opacity: 0;
+  // transition: opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 1;
 }
 
 /* 悬浮时显示这条伪边框线 */
 :deep(.el-table__body tr:hover td:first-child::after) {
-    opacity: 1;
+  opacity: 1;
 }
 
 :deep(.el-table__fixed-body-wrapper .el-table__row .el-table__cell) {
-    overflow: visible;
+  overflow: visible;
 }
-:deep(.el-table .el-table__expand-icon){
-    position: relative;
-    top: 12.5px;
-    left: -13px;
-    z-index: 99;
-    margin: 3px;
-    overflow: hidden;
+
+:deep(.el-table .el-table__expand-icon) {
+  position: relative;
+  top: 12.5px;
+  left: -13px;
+  z-index: 99;
+  margin: 3px;
+  overflow: hidden;
 }
+
 :deep(.el-table__fixed-body-wrapper .el-table__cell:first-child) {
   background-color: inherit !important; /* 从行继承背景色 */
 }
 
-:deep(.el-table tr td:nth-child(1)::before){
-    overflow: hidden !important;
+:deep(.el-table tr td:nth-child(1)::before) {
+  overflow: hidden !important;
 }
+
 :deep(.tree-child-cell) {
   position: relative;
   height: 100%;
 }
-:deep(.el-table .cell){
-    overflow: visible !important;
+
+:deep(.el-table .cell) {
+  overflow: visible !important;
 }
+
 :deep(.tree-child-cell.is-tree-child::before) {
   content: '';
   position: absolute;
@@ -1488,7 +1984,7 @@ html.dark .table-head-bg {
   bottom: 0;
   width: 1px;
   height: 100px;
-  background-color: #F5F5F5;
+  background-color: #f5f5f5;
 }
 
 :deep(.tree-child-cell.is-tree-child::after) {
@@ -1498,114 +1994,279 @@ html.dark .table-head-bg {
   left: -5px;
   width: 8px;
   height: 1px;
-  background-color: #F5F5F5;
+  background-color: #f5f5f5;
 }
 
 :deep(.hidden-selection-column .cell) {
   display: none;
 }
-:deep(.el-dialog__title){
-    font-size: 20px;
-    font-weight: bold;
+
+:deep(.el-dialog__title) {
+  font-size: 20px;
+  font-weight: bold;
 }
-:deep(.el-result__title p){
-    font-size: 25px;
-    color: #1D1F3A;
-    font-weight: 500;
+
+:deep(.el-result__title p) {
+  font-size: 25px;
+  color: #1d1f3a;
+  font-weight: 500;
 }
-:deep(.el-result__subtitle p){
-    font-size: 15px;
-    color: #4F516D;
-    font-weight: 500;
-    word-break: break-all;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
+
+:deep(.el-result__subtitle p) {
+  font-size: 15px;
+  color: #4f516d;
+  font-weight: 500;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
+
 :deep(.number-of-steps) {
+  .el-step__line {
+    margin: 0 25px;
+    background: #dddddd;
+  }
+
+  .el-step__head {
+    margin-top: 10px;
+  }
+
+  .is-success {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+
+    .el-step__icon {
+      background: var(--el-color-primary);
+      color: #fff;
+      // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
+
+      i {
+        color: #fff;
+      }
+    }
+
     .el-step__line {
-        margin: 0 25px;
-        background: #dddddd;
+      margin: 0 25px;
+      background: var(--el-color-primary);
+    }
+  }
+
+  .is-finish {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+
+    .el-step__icon {
+      background: var(--el-color-primary) !important;
+      color: #fff !important;
+      // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
+
+      i {
+        color: #fff;
+      }
     }
 
-    .el-step__head {
-        margin-top: 10px;
+    .el-step__line {
+      margin: 0 25px;
+      background: var(--el-color-primary);
     }
+  }
 
-    .is-success {
-        color: var(--el-color-primary);
-        border-color: var(--el-color-primary);
+  .is-process {
+    color: var(--el-color-primary);
+    font-weight: inherit;
 
-        .el-step__icon {
-            background: var(--el-color-primary);
-            color: #fff;
-            // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
-
-            i {
-                color: #fff;
-            }
-        }
-
-        .el-step__line {
-            margin: 0 25px;
-            background: var(--el-color-primary);
-        }
+    // font-size: 18px;
+    .el-step__icon {
+      padding: 10px;
+      border: 1px solid var(--el-color-primary);
+      background: var(--el-color-primary) !important;
+      color: #fff !important;
+      // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
     }
-    .is-finish {
-        color: var(--el-color-primary);
-        border-color: var(--el-color-primary);
+  }
 
-        .el-step__icon {
-            background: var(--el-color-primary)!important;
-            color: #fff !important;
-            // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
-
-            i {
-                color: #fff;
-            }
-        }
-
-        .el-step__line {
-            margin: 0 25px;
-            background: var(--el-color-primary);
-        }
-    }
-
-    .is-process {
-        color: var(--el-color-primary);
-        font-weight: inherit;
-
-        // font-size: 18px;
-        .el-step__icon {
-            padding: 10px;
-            border: 1px solid var(--el-color-primary);
-            background: var(--el-color-primary)!important;
-            color: #fff !important;
-            // box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
-        }
-    }
-
-    .is-wait {
-        color: #333;
-    }
+  .is-wait {
+    color: #333;
+  }
 }
 
 .app-card {
-    width: calc((100% - 120px) / 5);
-    min-width: 260px;
+  width: calc((100% - 120px) / 5);
+  min-width: 260px;
 
-    &.selected {
-        background-color: var(--el-color-primary-light-9);
-        border-color: var(--el-color-primary-light-9);
-    }
+  &.selected {
+    background-color: #f9f9f9;
+    border-color: #f9f9f9;
+  }
+}
+.product-card-item{
+  border: 1px solid #F1F1F1;
+  &:hover{
+    background-color: #f8f8f8;
+    border-color: #f8f8f8;
+  }
+}
+.app-ident{
+  margin: 0 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 32px;
+  width: 32px;
+  height: 16px;
+  border-radius: 3px;
+  background: #F3321D;
+  font-size: 12px;
+  color: #fff;
+  white-space: nowrap;
+}
+.addon-ident{
+  margin: 0 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 32px;
+  width: 32px;
+  height: 16px;
+  border-radius: 3px;
+  background: #8031F0;
+  font-size: 12px;
+  color: #fff;
+  white-space: nowrap;
 }
 
+.app-section-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.app-section-title {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  white-space: nowrap;
+  color: #374151;
+}
+
+.app-section-line {
+  flex: 1;
+  height: 1px;
+  background: #EBEEF5;
+}
+:deep(.app-detail-static .el-card__body){
+  padding-top: 0 !important;
+}
+:deep(.detail-upgrade-log .el-timeline-item) {
+  min-height: 75px;
+}
+
+:deep(.detail-upgrade-log .el-timeline-item__node--normal) {
+  top: 32px;
+  left: 0;
+  width: 18px;
+  height: 18px;
+  background: #DCDDE6 !important;
+  border-radius: 50%;
+  position: relative;
+}
+
+:deep(.detail-upgrade-log .el-timeline-item__node--normal::before) {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  background-color: #9699B6;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:deep(.detail-upgrade-log .el-timeline-item__tail) {
+  top: 35px;
+  left: 8px;
+  border-left-color: #dddddd;
+  border-left-style: solid;
+  margin: 14px 0 0px;
+  height: calc(100% - 14px);
+}
+
+:deep(.detail-upgrade-log .el-timeline-item__wrapper) {
+  top: -15px !important;
+  padding-left: 32px !important;
+}
+
+:deep(.detail-upgrade-log .el-collapse) {
+  margin-left: 0;
+  background: #F9F9FB;
+  border: 1px solid #F1F1F8;
+  border-radius: 4px;
+}
+
+:deep(.detail-upgrade-log .el-collapse-item__header) {
+  border: none;
+  line-height: 25px;
+  height: auto;
+  position: relative;
+  z-index: 999;
+  background-color: transparent;
+  padding: 14px 16px;
+}
+
+:deep(.detail-upgrade-log .el-collapse-item__content) {
+  margin-top: 0;
+  padding-bottom: 0 !important;
+}
+:deep(.detail-upgrade-log .el-collapse-item .el-collapse-item__wrap){
+  border: 0;
+  border-top: 1px solid #F1F1F8;
+  background-color: transparent;
+  padding: 14px 16px;
+}
+:deep(.detail-upgrade-log .el-collapse-item .el-collapse-item__arrow){
+  display: none;
+}
+:deep(.detail-upgrade-log .el-collapse-item .collapse-arrow .expand){
+  display: block;
+}
+:deep(.detail-upgrade-log .el-collapse-item .collapse-arrow .fold-up){
+  display: none;
+}
+:deep(.detail-upgrade-log .el-collapse-item.is-active .collapse-arrow .expand){
+  display: none;
+}
+:deep(.detail-upgrade-log .el-collapse-item.is-active .collapse-arrow .fold-up){
+  display: block;
+}
+:deep(.app-list-tip .el-tag__content){
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.detail-btn-box button{
+  width: 90px;
+  height: 36px;
+  font-size: 14px !important;
+  border: 0;
+  &.el-button--info{
+    background-color: #ddd;
+    color: #666;
+  }
+  &.el-button--warning{
+    background-color: #03C92E;
+  }
+}
 </style>
 
 <style>
+.app-market .app-head .el-card__body{
+  padding-bottom: 3px !important;
+}
 .el-empty .el-empty__image {
-    width: auto;
+  width: auto;
 }
 </style>
diff --git a/admin/src/app/views/member/components/gift-point.vue b/admin/src/app/views/member/components/gift-point.vue
index 5cbda0870..71119b6ff 100644
--- a/admin/src/app/views/member/components/gift-point.vue
+++ b/admin/src/app/views/member/components/gift-point.vue
@@ -47,7 +47,7 @@ const formRules = reactive<FormRules>({
                         callback('请输入积分数量')
                     } else if (isNaN(value) || !regExp.number.test(value)) {
                         callback('积分数量格式错误')
-                    } else if (value <=0) {
+                    } else if (value <= 0) {
                         callback('积分数量不能小于等于0')
                     } else{
                         callback();
diff --git a/admin/src/app/views/member/components/member-balance-edit.vue b/admin/src/app/views/member/components/member-balance-edit.vue
index e6a38b4f2..598ca092e 100644
--- a/admin/src/app/views/member/components/member-balance-edit.vue
+++ b/admin/src/app/views/member/components/member-balance-edit.vue
@@ -14,7 +14,9 @@
             </el-form-item>
 
             <el-form-item :label="t('adjustBalance')" prop="adjust">
-                <el-input-number v-model="formData.adjust" clearable :min="0" :max="999999" :placeholder="t('adjustBalancePlaceholder')" @focus="formData.adjust = ''"  class="!w-[200px]"/>
+                <div>
+                    <el-input-number v-model="formData.adjust" clearable :min="0" :max="999999" :placeholder="t('adjustBalancePlaceholder')" @focus="formData.adjust = ''"  class="!w-[200px]"/>
+                </div>
             </el-form-item>
 
             <el-form-item :label="t('memo')" prop="memo">
@@ -70,7 +72,7 @@ const formRules = computed(() => {
                         callback(new Error(t('adjustBalancePlaceholder')))
                     }
 
-                    if (formData.adjust_type == -1 && (parseFloat(formData.balance) - adjust < 0)) {
+                    if (formData.adjust_type == -1 && (parseFloat(formData.balance) - adjust) < 0) {
                         callback(new Error(t('adjustBalanceMaxAccountMessage')))
                     }
 
diff --git a/admin/src/app/views/member/components/member-point-edit.vue b/admin/src/app/views/member/components/member-point-edit.vue
index c89edefe7..214bf2842 100644
--- a/admin/src/app/views/member/components/member-point-edit.vue
+++ b/admin/src/app/views/member/components/member-point-edit.vue
@@ -14,7 +14,9 @@
             </el-form-item>
 
             <el-form-item :label="t('adjustPoint')" prop="adjust">
-                <el-input-number v-model="formData.adjust" clearable :min="0" :max="999999" :placeholder="t('adjustPlaceholder')"  @focus="formData.adjust = ''"  class="!w-[200px]"/>
+                <div>
+                    <el-input-number v-model="formData.adjust" clearable :min="0" :max="999999" :placeholder="t('adjustPlaceholder')"  @focus="formData.adjust = ''"  class="!w-[200px]"/>
+                </div>
             </el-form-item>
 
             <el-form-item :label="t('memo')" prop="memo">
@@ -72,7 +74,7 @@ const formRules = computed(() => {
                         callback(new Error(t('adjustPointPlaceholder')))
                     }
 
-                    if (formData.adjust_type == -1 && (parseFloat(formData.point) - adjust < 0)) {
+                    if (formData.adjust_type == -1 && (parseFloat(formData.point) - adjust) < 0) {
                         callback(new Error(t('adjustPointMaxAccountMessage')))
                     }
 
diff --git a/admin/src/app/views/setting/components/notice-sms.vue b/admin/src/app/views/setting/components/notice-sms.vue
index 645da8a23..f40e3e805 100644
--- a/admin/src/app/views/setting/components/notice-sms.vue
+++ b/admin/src/app/views/setting/components/notice-sms.vue
@@ -1,38 +1,68 @@
 <template>
-    <el-dialog v-model="showDialog" :title="t('noticeSetting')" width="550px" :destroy-on-close="true">
-        <el-form :model="formData" label-width="110px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading">
-            <el-form-item :label="t('status')">
-                <el-radio-group v-model="formData.is_sms">
-                    <el-radio :label="1">{{ t('startUsing') }}</el-radio>
-                    <el-radio :label="0">{{ t('statusDeactivate') }}</el-radio>
-                </el-radio-group>
-            </el-form-item>
+	<el-dialog
+		v-model="showDialog"
+		:title="t('noticeSetting')"
+		width="550px"
+		:destroy-on-close="true"
+	>
+		<el-alert
+			v-if="!formData.bind_sms && formData.is_need_bind_merchant"
+			title="未绑定接收者手机号"
+			type="error"
+			:closable="false"
+		/>
+		<el-form
+			:model="formData"
+			label-width="110px"
+			ref="formRef"
+			:rules="formRules"
+			class="page-form"
+			v-loading="loading"
+		>
+			<el-form-item :label="t('status')">
+				<el-radio-group v-model="formData.is_sms">
+					<el-radio :label="1">{{ t('startUsing') }}</el-radio>
+					<el-radio :label="0">{{ t('statusDeactivate') }}</el-radio>
+				</el-radio-group>
+			</el-form-item>
 
-            <el-form-item :label="t('name')">
-                <div class="input-width"> {{ formData.name }} </div>
-            </el-form-item>
+			<el-form-item :label="t('name')">
+				<div class="input-width">{{ formData.name }}</div>
+			</el-form-item>
 
-            <el-form-item :label="t('title')">
-                <div class="input-width"> {{ formData.title }} </div>
-            </el-form-item>
+			<el-form-item :label="t('title')">
+				<div class="input-width">{{ formData.title }}</div>
+			</el-form-item>
 
-            <el-form-item :label="t('smsId')" prop="sms_id">
-                <el-input v-model.trim="formData.sms_id" :placeholder="t('smsIdPlaceholder')" class="input-width" show-word-limit clearable />
-            </el-form-item>
+			<el-form-item :label="t('smsId')" prop="sms_id">
+				<el-input
+					v-model.trim="formData.sms_id"
+					:placeholder="t('smsIdPlaceholder')"
+					class="input-width"
+					show-word-limit
+					clearable
+				/>
+			</el-form-item>
 
-            <el-form-item :label="t('smsContent')">
-                <div class="input-width"> {{ formData.content }} </div>
-            </el-form-item>
+			<el-form-item :label="t('smsContent')">
+				<div class="input-width">{{ formData.content }}</div>
+			</el-form-item>
+		</el-form>
 
-        </el-form>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="showDialog = false">{{ t('cancel') }}</el-button>
-                <el-button type="primary" :loading="loading" @click="confirm(formRef)">{{t('confirm')}}</el-button>
-            </span>
-        </template>
-    </el-dialog>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="showDialog = false">{{
+					t('cancel')
+				}}</el-button>
+				<el-button
+					type="primary"
+					:loading="loading"
+					@click="confirm(formRef)"
+					>{{ t('confirm') }}</el-button
+				>
+			</span>
+		</template>
+	</el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -48,14 +78,16 @@ const loading = ref(true)
  * 表单数据
  */
 const initialFormData = {
-    is_sms: 0,
-    key: '',
-    name: '',
-    sms_default_content: '',
-    title: '',
-    type: '',
-    sms_id: '',
-    content: ''
+	is_sms: 0,
+	key: '',
+	name: '',
+	sms_default_content: '',
+	title: '',
+	type: '',
+	sms_id: '',
+	content: '',
+	bind_sms: '',
+	is_need_bind_merchant: '',
 }
 const formData: Record<string, any> = reactive({ ...initialFormData })
 
@@ -63,11 +95,11 @@ const formRef = ref<FormInstance>()
 
 // 表单验证规则
 const formRules = computed(() => {
-    return {
-        sms_id: [
-            { required: true, message: t('smsIdPlaceholder'), trigger: 'blur' }
-        ]
-    }
+	return {
+		sms_id: [
+			{ required: true, message: t('smsIdPlaceholder'), trigger: 'blur' },
+		],
+	}
 })
 
 const emit = defineEmits(['complete'])
@@ -77,44 +109,47 @@ const emit = defineEmits(['complete'])
  * @param formEl
  */
 const confirm = async (formEl: FormInstance | undefined) => {
-    if (loading.value || !formEl) return
+	if (loading.value || !formEl) return
 
-    await formEl.validate(async (valid) => {
-        if (valid) {
-            loading.value = true
+	await formEl.validate(async (valid) => {
+		if (valid) {
+			loading.value = true
 
-            const data = formData
-            data.status = data.is_sms
+			const data = formData
+			data.status = data.is_sms
 
-            editNotice(data).then(res => {
-                loading.value = false
-                showDialog.value = false
-                emit('complete')
-            }).catch(() => {
-                loading.value = false
-                // showDialog.value = false
-            })
-        }
-    })
+			editNotice(data)
+				.then((res) => {
+					loading.value = false
+					showDialog.value = false
+					emit('complete')
+				})
+				.catch(() => {
+					loading.value = false
+					// showDialog.value = false
+				})
+		}
+	})
 }
 
 const setFormData = async (row: any = null) => {
-    loading.value = true
-    Object.assign(formData, initialFormData)
+	loading.value = true
+	Object.assign(formData, initialFormData)
 
-    if (row) {
-        Object.keys(formData).forEach((key: string) => {
-            if (row[key] != undefined) formData[key] = row[key]
-            if (row.sms && row.sms[key] != undefined) formData[key] = row.sms[key]
-        })
-    }
+	if (row) {
+		Object.keys(formData).forEach((key: string) => {
+			if (row[key] != undefined) formData[key] = row[key]
+			if (row.sms && row.sms[key] != undefined)
+				formData[key] = row.sms[key]
+		})
+	}
 
-    loading.value = false
+	loading.value = false
 }
 
 defineExpose({
-    showDialog,
-    setFormData
+	showDialog,
+	setFormData,
 })
 </script>
 
diff --git a/admin/src/app/views/setting/components/notice-weapp.vue b/admin/src/app/views/setting/components/notice-weapp.vue
index ab3ab62d7..5a4c816ad 100644
--- a/admin/src/app/views/setting/components/notice-weapp.vue
+++ b/admin/src/app/views/setting/components/notice-weapp.vue
@@ -1,36 +1,62 @@
 <template>
-    <el-dialog v-model="showDialog" :title="t('noticeSetting')" width="550px" :destroy-on-close="true">
-        <el-form :model="formData" label-width="110px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading">
-            <el-form-item :label="t('status')">
-                <el-radio-group v-model="formData.is_weapp">
-                    <el-radio :label="1">{{ t('startUsing') }}</el-radio>
-                    <el-radio :label="0">{{ t('statusDeactivate') }}</el-radio>
-                </el-radio-group>
-            </el-form-item>
+	<el-dialog
+		v-model="showDialog"
+		:title="t('noticeSetting')"
+		width="550px"
+		:destroy-on-close="true"
+	>
+		<el-alert
+			v-if="!formData.bind_weapp && formData.is_need_bind_merchant"
+			title="未绑定接收者小程序"
+			type="error"
+			:closable="false"
+		/>
+		<el-form
+			:model="formData"
+			label-width="110px"
+			ref="formRef"
+			:rules="formRules"
+			class="page-form"
+			v-loading="loading"
+		>
+			<el-form-item :label="t('status')">
+				<el-radio-group v-model="formData.is_weapp">
+					<el-radio :label="1">{{ t('startUsing') }}</el-radio>
+					<el-radio :label="0">{{ t('statusDeactivate') }}</el-radio>
+				</el-radio-group>
+			</el-form-item>
 
-            <el-form-item :label="t('name')">
-                <div class="input-width"> {{ formData.name }} </div>
-            </el-form-item>
+			<el-form-item :label="t('name')">
+				<div class="input-width">{{ formData.name }}</div>
+			</el-form-item>
 
-            <el-form-item :label="t('weappTempKey')">
-                <div class="input-width"> {{ formData.tid }} </div>
-            </el-form-item>
+			<el-form-item :label="t('weappTempKey')">
+				<div class="input-width">{{ formData.tid }}</div>
+			</el-form-item>
 
-            <el-form-item :label="t('content')">
-                <div class="input-width">
-                    <div v-for="(item, index) in formData.content" :key="index">{{ item[0] }}：{{ item[1] }} </div>
-                </div>
-            </el-form-item>
+			<el-form-item :label="t('content')">
+				<div class="input-width">
+					<div v-for="(item, index) in formData.content" :key="index">
+						{{ item[0] }}：{{ item[1] }}
+					</div>
+				</div>
+			</el-form-item>
+		</el-form>
 
-        </el-form>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="showDialog = false">{{ t('cancel') }}</el-button>
-                <el-button type="primary" :loading="loading" @click="confirm(formRef)">{{t('confirm')}}</el-button>
-            </span>
-        </template>
-    </el-dialog>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="showDialog = false">{{
+					t('cancel')
+				}}</el-button>
+				<el-button
+					type="primary"
+					:loading="loading"
+					@click="confirm(formRef)"
+					>{{ t('confirm') }}</el-button
+				>
+			</span>
+		</template>
+	</el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -46,15 +72,17 @@ const loading = ref(true)
  * 表单数据
  */
 const initialFormData = {
-    is_weapp: 0,
-    key: '',
-    name: '',
-    title: '',
-    type: '',
-    content: [],
-    first: '',
-    remark: '',
-    tid: ''
+	is_weapp: 0,
+	key: '',
+	name: '',
+	title: '',
+	type: '',
+	content: [],
+	first: '',
+	remark: '',
+	tid: '',
+	bind_weapp: '',
+	is_need_bind_merchant: '',
 }
 const formData: Record<string, any> = reactive({ ...initialFormData })
 
@@ -62,9 +90,7 @@ const formRef = ref<FormInstance>()
 
 // 表单验证规则
 const formRules = computed(() => {
-    return {
-
-    }
+	return {}
 })
 
 const emit = defineEmits(['complete'])
@@ -74,43 +100,45 @@ const emit = defineEmits(['complete'])
  * @param formEl
  */
 const confirm = async (formEl: FormInstance | undefined) => {
-    if (loading.value || !formEl) return
+	if (loading.value || !formEl) return
 
-    await formEl.validate(async (valid) => {
-        if (valid) {
-            loading.value = true
+	await formEl.validate(async (valid) => {
+		if (valid) {
+			loading.value = true
 
-            const data = formData
-            data.status = data.is_weapp
+			const data = formData
+			data.status = data.is_weapp
 
-            editNoticeStatus(data).then(res => {
-                loading.value = false
-                showDialog.value = false
-                emit('complete')
-            }).catch(() => {
-                loading.value = false
-            })
-        }
-    })
+			editNoticeStatus(data)
+				.then((res) => {
+					loading.value = false
+					showDialog.value = false
+					emit('complete')
+				})
+				.catch(() => {
+					loading.value = false
+				})
+		}
+	})
 }
 
 const setFormData = async (row: any = null) => {
-    loading.value = true
-    Object.assign(formData, initialFormData)
+	loading.value = true
+	Object.assign(formData, initialFormData)
 
-    if (row) {
-        Object.keys(formData).forEach((key: string) => {
-            if (row[key] != undefined) formData[key] = row[key]
-            if (row.weapp && row.weapp[key] != undefined) formData[key] = row.weapp[key]
-        })
-    }
-
-    loading.value = false
+	if (row) {
+		Object.keys(formData).forEach((key: string) => {
+			if (row[key] != undefined) formData[key] = row[key]
+			if (row.weapp && row.weapp[key] != undefined)
+				formData[key] = row.weapp[key]
+		})
+	}
+	loading.value = false
 }
 
 defineExpose({
-    showDialog,
-    setFormData
+	showDialog,
+	setFormData,
 })
 </script>
 
diff --git a/admin/src/app/views/setting/components/notice-wechat.vue b/admin/src/app/views/setting/components/notice-wechat.vue
index 63ec442bd..662a31701 100644
--- a/admin/src/app/views/setting/components/notice-wechat.vue
+++ b/admin/src/app/views/setting/components/notice-wechat.vue
@@ -1,48 +1,80 @@
 <template>
-    <el-dialog v-model="showDialog" :title="t('noticeSetting')" width="550px" :destroy-on-close="true">
-        <el-form :model="formData" label-width="110px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading">
-            <el-form-item :label="t('status')">
-                <el-radio-group v-model="formData.is_wechat">
-                    <el-radio :label="1">{{ t('startUsing') }}</el-radio>
-                    <el-radio :label="0">{{ t('statusDeactivate') }}</el-radio>
-                </el-radio-group>
-            </el-form-item>
+	<el-dialog
+		v-model="showDialog"
+		:title="t('noticeSetting')"
+		width="550px"
+		:destroy-on-close="true"
+	>
+		<el-alert
+			v-if="!formData.bind_wechat && formData.is_need_bind_merchant"
+			title="未绑定接收者微信"
+			type="error"
+			:closable="false"
+		/>
+		<el-form
+			:model="formData"
+			label-width="110px"
+			ref="formRef"
+			:rules="formRules"
+			class="page-form"
+			v-loading="loading"
+		>
+			<el-form-item :label="t('status')">
+				<el-radio-group v-model="formData.is_wechat">
+					<el-radio :label="1">{{ t('startUsing') }}</el-radio>
+					<el-radio :label="0">{{ t('statusDeactivate') }}</el-radio>
+				</el-radio-group>
+			</el-form-item>
 
-            <el-form-item :label="t('name')">
-                <div class="input-width">{{ formData.name }} </div>
-            </el-form-item>
+			<el-form-item :label="t('name')">
+				<div class="input-width">{{ formData.name }}</div>
+			</el-form-item>
 
-            <el-form-item :label="t('tempKey')">
-                <div class="input-width">{{ formData.temp_key }} </div>
-            </el-form-item>
+			<el-form-item :label="t('tempKey')">
+				<div class="input-width">{{ formData.temp_key }}</div>
+			</el-form-item>
 
-            <el-form-item :label="t('keywordNameList')">
-                <div class="input-width">{{ formData.keyword_name_list ? formData.keyword_name_list.join('，') : '' }} </div>
-            </el-form-item>
+			<el-form-item :label="t('keywordNameList')">
+				<div class="input-width">
+					{{
+						formData.keyword_name_list
+							? formData.keyword_name_list.join('，')
+							: ''
+					}}
+				</div>
+			</el-form-item>
 
-<!--            <el-form-item :label="t('first')" prop="first">-->
-<!--                <el-input v-model.trim="formData.wechat_first" :placeholder="t('firstPlaceholder')" class="input-width" show-word-limit clearable />-->
-<!--            </el-form-item>-->
+			<!--            <el-form-item :label="t('first')" prop="first">-->
+			<!--                <el-input v-model.trim="formData.wechat_first" :placeholder="t('firstPlaceholder')" class="input-width" show-word-limit clearable />-->
+			<!--            </el-form-item>-->
 
-            <el-form-item :label="t('content')">
-                <div class="input-width">
-                    <div v-for="(item, index) in formData.content" :key="index">{{ item[0] }}：{{ item[1] }} </div>
-                </div>
-            </el-form-item>
+			<el-form-item :label="t('content')">
+				<div class="input-width">
+					<div v-for="(item, index) in formData.content" :key="index">
+						{{ item[0] }}：{{ item[1] }}
+					</div>
+				</div>
+			</el-form-item>
 
-<!--            <el-form-item :label="t('remark')" prop="remark">-->
-<!--                <el-input v-model.trim="formData.wechat_remark" :placeholder="t('remarkPlaceholder')" class="input-width" show-word-limit clearable />-->
-<!--            </el-form-item>-->
+			<!--            <el-form-item :label="t('remark')" prop="remark">-->
+			<!--                <el-input v-model.trim="formData.wechat_remark" :placeholder="t('remarkPlaceholder')" class="input-width" show-word-limit clearable />-->
+			<!--            </el-form-item>-->
+		</el-form>
 
-        </el-form>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="showDialog = false">{{ t('cancel') }}</el-button>
-                <el-button type="primary" :loading="loading" @click="confirm(formRef)">{{t('confirm')}}</el-button>
-            </span>
-        </template>
-    </el-dialog>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="showDialog = false">{{
+					t('cancel')
+				}}</el-button>
+				<el-button
+					type="primary"
+					:loading="loading"
+					@click="confirm(formRef)"
+					>{{ t('confirm') }}</el-button
+				>
+			</span>
+		</template>
+	</el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -58,18 +90,20 @@ const loading = ref(true)
  * 表单数据
  */
 const initialFormData = {
-    is_wechat: 0,
-    key: '',
-    name: '',
-    title: '',
-    type: '',
-    content: [],
-    // first: '',
-    // remark: '',
-    temp_key: '',
-    keyword_name_list: ''
-    // wechat_first: '',
-    // wechat_remark: ''
+	is_wechat: 0,
+	key: '',
+	name: '',
+	title: '',
+	type: '',
+	content: [],
+	// first: '',
+	// remark: '',
+	temp_key: '',
+	keyword_name_list: '',
+	// wechat_first: '',
+	// wechat_remark: ''
+	bind_wechat: '',
+	is_need_bind_merchant: '',
 }
 
 const formData: Record<string, any> = reactive({ ...initialFormData })
@@ -78,9 +112,7 @@ const formRef = ref<FormInstance>()
 
 // 表单验证规则
 const formRules = computed(() => {
-    return {
-
-    }
+	return {}
 })
 
 const emit = defineEmits(['complete'])
@@ -90,42 +122,45 @@ const emit = defineEmits(['complete'])
  * @param formEl
  */
 const confirm = async (formEl: FormInstance | undefined) => {
-    if (loading.value || !formEl) return
+	if (loading.value || !formEl) return
 
-    await formEl.validate(async (valid) => {
-        if (valid) {
-            loading.value = true
+	await formEl.validate(async (valid) => {
+		if (valid) {
+			loading.value = true
 
-            const data = formData
-            data.status = data.is_wechat
-            editNotice(data).then(res => {
-                loading.value = false
-                showDialog.value = false
-                emit('complete')
-            }).catch(() => {
-                loading.value = false
-            })
-        }
-    })
+			const data = formData
+			data.status = data.is_wechat
+			editNotice(data)
+				.then((res) => {
+					loading.value = false
+					showDialog.value = false
+					emit('complete')
+				})
+				.catch(() => {
+					loading.value = false
+				})
+		}
+	})
 }
 
 const setFormData = async (row: any = null) => {
-    loading.value = true
-    Object.assign(formData, initialFormData)
-    if (row) {
-        Object.keys(formData).forEach((key: string) => {
-            if (row[key] != undefined) formData[key] = row[key]
-            if (row.wechat && row.wechat[key] != undefined) formData[key] = row.wechat[key]
-        })
-        // if (!row.wechat_first) formData['wechat_first'] = row['first']
-        // if (!row.wechat_remark) formData['wechat_remark'] = row['remark']
-    }
-    loading.value = false
+	loading.value = true
+	Object.assign(formData, initialFormData)
+	if (row) {
+		Object.keys(formData).forEach((key: string) => {
+			if (row[key] != undefined) formData[key] = row[key]
+			if (row.wechat && row.wechat[key] != undefined)
+				formData[key] = row.wechat[key]
+		})
+		// if (!row.wechat_first) formData['wechat_first'] = row['first']
+		// if (!row.wechat_remark) formData['wechat_remark'] = row['remark']
+	}
+	loading.value = false
 }
 
 defineExpose({
-    showDialog,
-    setFormData
+	showDialog,
+	setFormData,
 })
 </script>
 
diff --git a/admin/src/app/views/setting/components/sms_signature.vue b/admin/src/app/views/setting/components/sms_signature.vue
index 379a71b2c..6e7d2dcb6 100644
--- a/admin/src/app/views/setting/components/sms_signature.vue
+++ b/admin/src/app/views/setting/components/sms_signature.vue
@@ -1,142 +1,247 @@
 <template>
-    <div>
-        <el-dialog v-model="visible" :title="t('选择签名')" width="1200px" destroy-on-close :close-on-click-modal="false">
-            <el-alert type="warning" :closable="false" class="!mb-[10px]">
-                <template #default>
-                    <p>签名数据的变更（新增 / 删除）需经过五分钟的生效周期，在此期间系统将完成数据同步与更新</p>
-                </template>
-            </el-alert>
-            <div class="flex justify-between items-center mb-[16px]">
-                <el-button type="primary" @click="addEvent">{{ t('添加短信签名') }}</el-button>
-            </div>
-            <div class="mb-[10px] flex items-center">
-                <el-checkbox v-model="toggleCheckbox" size="large" class="px-[14px]" @change="toggleChange" :indeterminate="isIndeterminate" />
-                <el-button @click="batchDeleteEvent" size="small">{{t("批量删除")}}</el-button>
-            </div>
-            <el-table :data="tableData.data" size="large" v-loading="tableData.loading" ref="smsSignListTableRef" @selection-change="handleSelectionChange">
-                <template #empty>
-                    <span>{{ !tableData.loading ? t("emptyData") : "" }}</span>
-                </template>
-                <el-table-column type="selection" :selectable="checkSelectable" width="55" />
-                <el-table-column prop="sign" :label="t('签名名称')" min-width="200" />
-                <el-table-column prop="is_default" :label="t('使用状态')" min-width="120">
-                    <template #default="{ row }">
-                        <div>{{ row.is_default? t('使用中') : t('未使用') }}</div>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="auditResultName" :label="t('审核状态')" min-width="200">
-                    <template #default="{ row }">
-                        <div>
-                            <div :class="[row.auditResult == 2 ? 'text-green-600' : '']">{{ row.auditResultName }}</div>
-                            <div class="text-red-600" v-if="row.auditResult != 2">{{ row.auditMsg }}</div>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="realNameDx" :label="t('实名状态')" min-width="200">
-                    <template #header>
-                        <div style="display: inline-flex; align-items: center">
-                            <span class="mr-[5px]">{{ t('实名状态') }}</span>
-                            <el-tooltip class="box-item" effect="light" placement="top">
-                                <template #content>
-                                    状态标识说明：<br />未实名状态显示为灰色；<br />实名通过状态显示为绿色；<br />实名失败状态显示为红色。<br />
-                                    短信接收条件：仅当手机号在对应运营商处实名通过后，才可接收短信。
-                                </template>
-                                <el-icon color="#666">
-                                    <QuestionFilled />
-                                </el-icon>
-                            </el-tooltip>
-                        </div>
-                    </template>
-                    <template #default="{ row }">
-                        <div class="flex gap-[5px]">
-                            <el-tag :type="row.realNameLt == 0 ? 'info' : row.realNameLt == 1 ? 'success' : 'danger'">{{ t("联通") }}</el-tag>
-                            <el-tag :type="row.realNameYd == 0 ? 'info' : row.realNameYd == 1 ? 'success' : 'danger'">{{ t("移动") }}</el-tag>
-                            <el-tag :type="row.realNameDx == 0 ? 'info' : row.realNameDx == 1 ? 'success' : 'danger'">{{ t("电信") }}</el-tag>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="create_time" :label="t('createTime')" min-width="120">
-                    <template #default="{ row }">
-                        <div>{{ row.createTime }}</div>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="t('操作')" fixed="right" align="right" min-width="120">
-                    <template #default="{ row }">
-                        <el-button type="primary" link @click="selectTemplate(row)" v-if="!row.is_default && row.auditResult == 2">
-                            {{ t("使用") }}
-                        </el-button>
-                        <el-button type="primary" link @click="deleteTemplate(row)" v-if="!row.is_default">
-                            {{ t("删除") }}
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+	<div>
+		<el-dialog v-model="visible" :title="t('选择签名')" width="1200px" destroy-on-close :close-on-click-modal="false">
+			<el-alert type="warning" :closable="false" class="!mb-[10px]">
+				<template #default>
+					<p>签名数据的变更（新增 / 删除）需经过五分钟的生效周期，在此期间系统将完成数据同步与更新</p>
+				</template>
+			</el-alert>
+			<div class="flex justify-between items-center mb-[16px]">
+				<el-button type="primary" @click="addEvent">{{ t('添加短信签名') }}</el-button>
+			</div>
+			<div class="mb-[10px] flex items-center">
+				<el-checkbox v-model="toggleCheckbox" size="large" class="px-[14px]" @change="toggleChange" :indeterminate="isIndeterminate" />
+				<el-button @click="batchDeleteEvent" size="small">{{ t('批量删除') }}</el-button>
+			</div>
+			<el-table
+				:data="tableData.data"
+				size="large"
+				v-loading="tableData.loading"
+				ref="smsSignListTableRef"
+				@selection-change="handleSelectionChange"
+			>
+				<template #empty>
+					<span>{{ !tableData.loading ? t('emptyData') : '' }}</span>
+				</template>
+				<el-table-column type="selection" :selectable="checkSelectable" width="55" />
+				<el-table-column prop="sign" :label="t('签名名称')" min-width="200" />
+				<el-table-column prop="is_default" :label="t('使用状态')" min-width="120">
+					<template #default="{ row }">
+						<div>
+							{{ row.is_default ? t('使用中') : t('未使用') }}
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column prop="auditResultName" :label="t('审核状态')" min-width="200">
+					<template #default="{ row }">
+						<div>
+							<div :class="[row.auditResult == 2 ? 'text-green-600' : '']">
+								{{ row.auditResultName }}
+							</div>
+							<div class="text-red-600" v-if="row.auditResult != 2">
+								{{ row.auditMsg }}
+							</div>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column prop="realNameDx" :label="t('实名状态')" min-width="200">
+					<template #header>
+						<div style="display: inline-flex; align-items: center">
+							<span class="mr-[5px]">{{ t('实名状态') }}</span>
+							<el-tooltip class="box-item" effect="light" placement="top">
+								<template #content>
+									状态标识说明：<br />未实名状态显示为灰色；<br />实名通过状态显示为绿色；<br />实名失败状态显示为红色。<br />
+									短信接收条件：仅当手机号在对应运营商处实名通过后，才可接收短信。
+								</template>
+								<el-icon color="#666">
+									<QuestionFilled />
+								</el-icon>
+							</el-tooltip>
+						</div>
+					</template>
+					<template #default="{ row }">
+						<div class="flex gap-[5px]">
+							<el-tag :type="row.realNameLt == 0 ? 'info' : row.realNameLt == 1 ? 'success' : 'danger'">{{ t('联通') }}</el-tag>
+							<el-tag :type="row.realNameYd == 0 ? 'info' : row.realNameYd == 1 ? 'success' : 'danger'">{{ t('移动') }}</el-tag>
+							<el-tag :type="row.realNameDx == 0 ? 'info' : row.realNameDx == 1 ? 'success' : 'danger'">{{ t('电信') }}</el-tag>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column prop="create_time" :label="t('createTime')" min-width="120">
+					<template #default="{ row }">
+						<div>{{ row.createTime }}</div>
+					</template>
+				</el-table-column>
+				<el-table-column :label="t('操作')" fixed="right" align="right" min-width="120">
+					<template #default="{ row }">
+						<el-button type="primary" link @click="selectTemplate(row)" v-if="!row.is_default && row.auditResult == 2">
+							{{ t('使用') }}
+						</el-button>
+						<el-button type="primary" link @click="deleteTemplate(row)" v-if="!row.is_default">
+							{{ t('删除') }}
+						</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
 
-            <div class="mt-[16px] flex justify-end">
-                <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.limit"
-                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"  @size-change="loadSignList()" @current-change="loadSignList" />
-            </div>
+			<div class="mt-[16px] flex justify-end">
+				<el-pagination
+					v-model:current-page="tableData.page"
+					v-model:page-size="tableData.limit"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="tableData.total"
+					@size-change="loadSignList()"
+					@current-change="loadSignList"
+				/>
+			</div>
 
-            <template #footer>
-                <el-button @click="visible = false">{{ t("cancel") }}</el-button>
-            </template>
-        </el-dialog>
-        <el-dialog v-model="visibleAdd" :title="t('添加签名')" width="800px" destroy-on-close :close-on-click-modal="false">
-            <el-form label-width="150px" :model="formData" ref="formRef" :rules="formRules" class="page-form ml-[20px]">
-                <el-form-item :label="t('短信签名')" prop="signature">
-                    <el-input v-model="formData.signature" placeholder="请输入短信签名" class="input-width" maxlength="20"  show-word-limit clearable />
-                </el-form-item>
-                <div class="ml-[150px] text-[12px] text-[#999] leading-[20px]">必须由【】包裹，例如：【test】</div>
-                <div class="my-[5px] ml-[150px] text-[12px] text-[#999] leading-[20px]">字数要求在2-20个字符，不能使用空格和特殊符号“ - + = * & % # @ ~等;</div>
-                <el-form-item :label="t('短信示例内容')" prop="contentExample">
-                    <el-input v-model="formData.contentExample" placeholder="请输入短信示例内容" clearable  maxlength="50"  show-word-limit class="input-width" />
-                </el-form-item>
-                <el-form-item :label="t('企业名称')" prop="companyName">
-                    <el-input v-model="formData.companyName" placeholder="请输入企业名称" clearable  maxlength="20"  show-word-limit class="input-width" />
-                </el-form-item>
-                <el-form-item :label="t('社会统一信用代码')" prop="creditCode">
-                    <el-input v-model="formData.creditCode" placeholder="请输入社会统一信用代码" clearable  maxlength="20"  show-word-limit class="input-width" />
-                </el-form-item>
-                <el-form-item :label="t('法人姓名')" prop="legalPerson">
-                    <el-input v-model="formData.legalPerson" placeholder="请输入法人姓名" clearable  maxlength="20"  show-word-limit class="input-width" />
-                </el-form-item>
-                <el-form-item :label="t('经办人姓名')" prop="principalName">
-                    <el-input v-model="formData.principalName" placeholder="请输入经办人姓名" clearable  maxlength="20"  show-word-limit class="input-width" />
-                </el-form-item>
-                <el-form-item :label="t('经办人手机号')" prop="principalMobile">
-                    <el-input v-model="formData.principalMobile" placeholder="请输入经办人手机号" clearable  maxlength="20"  show-word-limit class="input-width" />
-                </el-form-item>
-                <el-form-item :label="t('经办人身份证')" prop="principalIdCard">
-                    <el-input v-model="formData.principalIdCard" placeholder="请输入经办人身份证" clearable  maxlength="18"  show-word-limit class="input-width" />
-                </el-form-item>
-                <el-form-item :label="t('签名来源')">
-                    <el-radio-group v-model="formData.signSource" >
-                        <el-radio v-for="item in signConfig.signSourceList" :key="item.type" :label="item.type" >{{item.name}}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item :label="t('签名类型')">
-                    <el-radio-group v-model="formData.signType">
-                        <el-radio v-for="item in signConfig.signTypeList" :key="item.type" :label="item.type" >{{item.name}}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item :label="t('上传图片')" prop="imgUrl">
-                    <upload-image v-model="formData.imgUrl" :limit="1" />
-                </el-form-item>
-                <div class="ml-[150px] text-[12px] text-[#999] leading-[20px]">当签名来源为商标、APP、小程序、事业单位简称或企业名称简称时，需必填此字段</div>
-                <div class="my-[5px] ml-[150px] text-[12px] text-[#999] leading-[20px]">当签名来源为事业单位全称或企业名称全称时，选填此字段。</div>
-                <el-form-item :label="t('是否默认')">
-                    <el-radio-group v-model="formData.defaultSign" >
-                        <el-radio :label="1">是</el-radio>
-                        <el-radio :label="0">否</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <el-button @click="visibleAdd = false">{{ t("cancel") }}</el-button>
-                <el-button type="primary" @click="onSave()">{{ t("confirm") }}</el-button>
-            </template>
-        </el-dialog>
-    </div>
+			<template #footer>
+				<el-button @click="visible = false">{{ t('cancel') }}</el-button>
+			</template>
+		</el-dialog>
+		<el-dialog v-model="visibleAdd" :title="t('添加签名')" width="800px" destroy-on-close :close-on-click-modal="false">
+			<div class="max-h-[600px] overflow-auto">
+				<el-form label-width="150px" :model="formData" ref="formRef" :rules="formRules" class="page-form ml-[20px]">
+					<el-form-item :label="t('短信签名')" prop="signature">
+						<el-input
+							v-model="formData.signature"
+							placeholder="请输入短信签名"
+							class="input-width"
+							maxlength="20"
+							show-word-limit
+							clearable
+						/>
+					</el-form-item>
+					<div class="ml-[150px] text-[12px] text-[#999] leading-[20px]">必须由【】包裹，例如：【test】</div>
+					<div class="my-[5px] ml-[150px] text-[12px] text-[#999] leading-[20px]">
+						字数要求在2-20个字符，不能使用空格和特殊符号“ - + = * & % # @ ~等;
+					</div>
+					<el-form-item :label="t('短信示例内容')" prop="contentExample">
+						<el-input
+							v-model="formData.contentExample"
+							placeholder="请输入短信示例内容"
+							clearable
+							maxlength="50"
+							show-word-limit
+							class="input-width"
+						/>
+					</el-form-item>
+					<el-form-item :label="t('企业名称')" prop="companyName">
+						<el-input
+							v-model="formData.companyName"
+							placeholder="请输入企业名称"
+							clearable
+							maxlength="20"
+							show-word-limit
+							class="input-width"
+						/>
+					</el-form-item>
+					<el-form-item :label="t('社会统一信用代码')" prop="creditCode">
+						<el-input
+							v-model="formData.creditCode"
+							placeholder="请输入社会统一信用代码"
+							clearable
+							maxlength="20"
+							show-word-limit
+							class="input-width"
+						/>
+					</el-form-item>
+					<el-form-item :label="t('法人姓名')" prop="legalPerson">
+						<el-input
+							v-model="formData.legalPerson"
+							placeholder="请输入法人姓名"
+							clearable
+							maxlength="20"
+							show-word-limit
+							class="input-width"
+						/>
+					</el-form-item>
+					<el-form-item :label="t('责任人姓名')" prop="principalName">
+						<el-input
+							v-model="formData.principalName"
+							placeholder="请输入责任人姓名"
+							clearable
+							maxlength="20"
+							show-word-limit
+							class="input-width"
+						/>
+					</el-form-item>
+					<el-form-item :label="t('责任人手机号')" prop="principalMobile">
+						<el-input
+							v-model="formData.principalMobile"
+							placeholder="请输入责任人手机号"
+							clearable
+							maxlength="20"
+							show-word-limit
+							class="input-width"
+						/>
+					</el-form-item>
+					<el-form-item :label="t('责任人身份证')" prop="principalIdCard">
+						<el-input
+							v-model="formData.principalIdCard"
+							placeholder="请输入责任人身份证"
+							clearable
+							maxlength="18"
+							show-word-limit
+							class="input-width"
+						/>
+					</el-form-item>
+					<el-form-item :label="t('签名来源')">
+						<el-radio-group v-model="formData.signSource">
+							<el-radio v-for="item in signConfig.signSourceList" :key="item.type" :label="item.type">{{ item.name }}</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item :label="t('签名类型')">
+						<el-radio-group v-model="formData.signType">
+							<el-radio v-for="item in signConfig.signTypeList" :key="item.type" :label="item.type">{{ item.name }}</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<!-- <el-form-item :label="t('上传图片')" prop="imgUrl">
+					<upload-image v-model="formData.imgUrl" :limit="1" />
+				</el-form-item>
+				<div class="ml-[150px] text-[12px] text-[#999] leading-[20px]">
+					当签名来源为商标、APP、小程序、事业单位简称或企业名称简称时，需必填此字段
+				</div>
+				<div
+					class="my-[5px] ml-[150px] text-[12px] text-[#999] leading-[20px]"
+				>
+					当签名来源为事业单位全称或企业名称全称时，选填此字段。
+				</div> -->
+					<el-form-item :label="t('营业执照')" prop="bizLicenseUrl">
+						<upload-image v-model="formData.bizLicenseUrl" :limit="1" />
+					</el-form-item>
+					<el-form-item :label="t('企查查唯一性截图')" prop="qccUrl">
+						<upload-image v-model="formData.qccUrl" :limit="1" />
+					</el-form-item>
+					<el-form-item :label="t('中国商标网截图')" prop="tmnetUrl">
+						<upload-image v-model="formData.tmnetUrl" :limit="1" />
+					</el-form-item>
+					<el-form-item :label="t('移动ICP截图')" prop="mobileIcpUrl">
+						<upload-image v-model="formData.mobileIcpUrl" :limit="1" />
+					</el-form-item>
+					<el-form-item :label="t('应用商店 /小程序页面开发者截图')" prop="telecomAppstoreUrl">
+						<upload-image v-model="formData.telecomAppstoreUrl" :limit="1" />
+					</el-form-item>
+					<el-form-item :label="t('身份证正面(人像面)')" prop="idcardFrontUrl">
+						<upload-image v-model="formData.idcardFrontUrl" :limit="1" />
+					</el-form-item>
+					<el-form-item :label="t('身份证反面URL')" prop="idcardBackUrl">
+						<upload-image v-model="formData.idcardBackUrl" :limit="1" />
+					</el-form-item>
+					<el-form-item :label="t('是否默认')">
+						<el-radio-group v-model="formData.defaultSign">
+							<el-radio :label="1">是</el-radio>
+							<el-radio :label="0">否</el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</el-form>
+			</div>
+			<template #footer>
+				<el-button @click="visibleAdd = false">{{ t('cancel') }}</el-button>
+				<el-button type="primary" @click="onSave()">{{ t('confirm') }}</el-button>
+			</template>
+		</el-dialog>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -148,196 +253,277 @@ const visible = ref(false)
 const visibleAdd = ref(false)
 const emit = defineEmits(['select'])
 const props = defineProps({
-    username: {
-        type: String,
-        default: ''
-    }
+	username: {
+		type: String,
+		default: '',
+	},
 })
 const initialFormData = {
-    defaultSign: 0,
-    imgUrl: '',
-    contentExample: '',
-    signType: '',
-    signSource: '',
-    principalIdCard: '',
-    principalName: '',
-    principalMobile: '',
-    legalPerson: '',
-    creditCode: '',
-    companyName: '',
-    signature: ''
+	defaultSign: 0,
+	imgUrl: '',
+	bizLicenseUrl: '',
+	qccUrl: '',
+	tmnetUrl: '',
+	mobileIcpUrl: '',
+	telecomAppstoreUrl: '',
+	idcardFrontUrl: '',
+	idcardBackUrl: '',
+	contentExample: '',
+	signType: '',
+	signSource: '',
+	principalIdCard: '',
+	principalName: '',
+	principalMobile: '',
+	legalPerson: '',
+	creditCode: '',
+	companyName: '',
+	signature: '',
 }
 const formData = reactive({ ...initialFormData })
 
 const signConfig = reactive({
-    signTypeList: [],
-    signSourceList: []
+	signTypeList: [],
+	signSourceList: [],
 })
 const getSmsSignConfigFn = () => {
-    getSmsSignConfig().then(res => {
-        signConfig.signTypeList = res.data.sign_type_list
-        signConfig.signSourceList = res.data.sign_source_list
-        formData.signSource = res.data.sign_source_list[0].type
-        formData.signType = res.data.sign_type_list[0].type
-    })
+	getSmsSignConfig().then((res) => {
+		signConfig.signTypeList = res.data.sign_type_list
+		signConfig.signSourceList = res.data.sign_source_list
+		formData.signSource = res.data.sign_source_list[0].type
+		formData.signType = res.data.sign_type_list[0].type
+	})
 }
 
 getSmsSignConfigFn()
 
 const formRef = ref()
 const formRules = computed(() => {
-    return {
-        signature: [
-            { required: true, message: '请输入短信签名', trigger: 'blur' },
-            {
-                validator: (rule, value, callback) => {
-                    const singleBracketValid = /^【[^【】]*】$/.test(value)
-                    if (!singleBracketValid) {
-                        return callback(new Error('短信签名必须被【】包裹'))
-                    }
+	return {
+		signature: [
+			{ required: true, message: '请输入短信签名', trigger: 'blur' },
+			{
+				validator: (rule, value, callback) => {
+					const singleBracketValid = /^【[^【】]*】$/.test(value)
+					if (!singleBracketValid) {
+						return callback(new Error('短信签名必须被【】包裹'))
+					}
 
-                    const content = value.slice(1, -1)
+					const content = value.slice(1, -1)
 
-                    const lengthValid = content.length >= 2 && content.length <= 20
-                    if (!lengthValid) {
-                        return callback(new Error('短信签名内容需在 2-20 个字符之间'))
-                    }
+					const lengthValid = content.length >= 2 && content.length <= 20
+					if (!lengthValid) {
+						return callback(new Error('短信签名内容需在 2-20 个字符之间'))
+					}
 
-                    const invalidChars = /[\s\-+=*&%#@~;]/
-                    if (invalidChars.test(content)) {
-                        return callback(new Error('短信签名不能包含空格或特殊字符 - + = * & % # @ ~ ;'))
-                    }
+					const invalidChars = /[\s\-+=*&%#@~;]/
+					if (invalidChars.test(content)) {
+						return callback(new Error('短信签名不能包含空格或特殊字符 - + = * & % # @ ~ ;'))
+					}
 
-                    callback()
-                },
-                trigger: 'blur'
-            }
-        ],
-        principalMobile: [
-            { required: true, message: '请输入经办人手机号', trigger: 'blur' },
-            { validator: phoneVerify, trigger: 'blur' }
-        ],
-        companyName: [
-            { required: true, message: '请输入企业名称', trigger: 'blur' }
-        ],
-        contentExample: [
-            { required: true, message: '请输入短信示例内容', trigger: 'blur' }
-        ],
-        creditCode: [
-            { required: true, message: '请输入社会统一信用代码', trigger: 'blur' }
-        ],
-        legalPerson: [
-            { required: true, message: '请输入法人姓名', trigger: 'blur' }
-        ],
-        principalName: [
-            { required: true, message: '请输入经办人姓名', trigger: 'blur' }
-        ],
-        principalIdCard: [
-            { required: true, message: '请输入经办人身份证', trigger: 'blur' },
-            { validator: idCardVerify, trigger: 'blur' }
-        ],
-        imgUrl: [
-            {
-                validator: (rule, value, callback) => {
-                    const needImage = [3, 4, 5].includes(formData.signSource) || formData.signType === 1
-                    if (needImage) {
-                        if (!value || value.length === 0) {
-                            callback(new Error('请上传图片'))
-                        } else {
-                            callback()
-                        }
-                    } else {
-                        callback() // 不需要校验
-                    }
-                },
-                trigger: 'blur'
-            }
-        ]
-
-    }
+					callback()
+				},
+				trigger: 'blur',
+			},
+		],
+		principalMobile: [
+			{ required: true, message: '请输入责任人手机号', trigger: 'blur' },
+			{ validator: phoneVerify, trigger: 'blur' },
+		],
+		companyName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+		contentExample: [{ required: true, message: '请输入短信示例内容', trigger: 'blur' }],
+		creditCode: [
+			{
+				required: true,
+				message: '请输入社会统一信用代码',
+				trigger: 'blur',
+			},
+		],
+		legalPerson: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
+		principalName: [{ required: true, message: '请输入责任人姓名', trigger: 'blur' }],
+		principalIdCard: [
+			{ required: true, message: '请输入责任人身份证', trigger: 'blur' },
+			{ validator: idCardVerify, trigger: 'blur' },
+		],
+		imgUrl: [
+			{
+				validator: (rule, value, callback) => {
+					const needImage = [3, 4, 5].includes(formData.signSource) || formData.signType === 1
+					if (needImage) {
+						if (!value || value.length === 0) {
+							callback(new Error('请上传图片'))
+						} else {
+							callback()
+						}
+					} else {
+						callback() // 不需要校验
+					}
+				},
+				trigger: 'blur',
+			},
+		],
+		bizLicenseUrl: [{ required: true, message: '请输入营业执照', trigger: 'blur' }],
+		qccUrl: [
+			{
+				validator: (rule, value, callback) => {
+					const needImage = [1, 2].includes(formData.signSource) || formData.signType === 1
+					if (needImage) {
+						if (!value || value.length === 0) {
+							callback(new Error('请上传企查查唯一性截图'))
+						} else {
+							callback()
+						}
+					} else {
+						callback() // 不需要校验
+					}
+				},
+				trigger: 'blur',
+			},
+		],
+		tmnetUrl: [
+			{
+				validator: (rule, value, callback) => {
+					const needImage = [3].includes(formData.signSource)
+					if (needImage) {
+						if (!value || value.length === 0) {
+							callback(new Error('请上传中国商标网截图'))
+						} else {
+							callback()
+						}
+					} else {
+						callback() // 不需要校验
+					}
+				},
+				trigger: 'blur',
+			},
+		],
+		mobileIcpUrl: [
+			{
+				validator: (rule, value, callback) => {
+					const needImage = [4, 5].includes(formData.signSource)
+					if (needImage) {
+						if (!value || value.length === 0) {
+							callback(new Error('请上传移动ICP截图'))
+						} else {
+							callback()
+						}
+					} else {
+						callback() // 不需要校验
+					}
+				},
+				trigger: 'blur',
+			},
+		],
+		telecomAppstoreUrl: [
+			{
+				validator: (rule, value, callback) => {
+					const needImage = [4, 5].includes(formData.signSource)
+					if (needImage) {
+						if (!value || value.length === 0) {
+							callback(new Error('请上传应用商店/小程序页面开发者截图'))
+						} else {
+							callback()
+						}
+					} else {
+						callback() // 不需要校验
+					}
+				},
+				trigger: 'blur',
+			},
+		],
+		idcardFrontUrl: [
+			{
+				required: true,
+				message: '请输入身份证正面(人像面)',
+				trigger: 'blur',
+			},
+		],
+		idcardBackUrl: [{ required: true, message: '请输入身份证反面', trigger: 'blur' }],
+	}
 })
 
 const idCardVerify = (rule: any, value: any, callback: any) => {
-    if (value && !/^[1-9]\d{5}(19|20)\d{2}((0\d)|(1[0-2]))(([0-2]\d)|3[0-1])\d{3}([0-9Xx])$/.test(value)) {
-        callback(new Error(t('请输入正确的身份证号码')))
-    } else {
-        callback()
-    }
+	if (value && !/^[1-9]\d{5}(19|20)\d{2}((0\d)|(1[0-2]))(([0-2]\d)|3[0-1])\d{3}([0-9Xx])$/.test(value)) {
+		callback(new Error(t('请输入正确的身份证号码')))
+	} else {
+		callback()
+	}
 }
 
 const phoneVerify = (rule: any, value: any, callback: any) => {
-    if (value && !/^1[3-9]\d{9}$/.test(value)) {
-        callback(new Error(t('请输入正确的手机号码')))
-    } else {
-        callback()
-    }
+	if (value && !/^1[3-9]\d{9}$/.test(value)) {
+		callback(new Error(t('请输入正确的手机号码')))
+	} else {
+		callback()
+	}
 }
 
 const onSave = async () => {
-    await formRef.value?.validate(async (valid) => {
-        if (valid) {
-            addSign(props.username, formData).then((res) => {
-                setTimeout(() => {
-                    visibleAdd.value = false
-                    loadSignList()
-                }, 500)
-            })
-        }
-    })
+	await formRef.value?.validate(async (valid) => {
+		if (valid) {
+			addSign(props.username, formData).then((res) => {
+				setTimeout(() => {
+					visibleAdd.value = false
+					loadSignList()
+				}, 500)
+			})
+		}
+	})
 }
 
 // 表单内容
 const tableData = reactive({
-    page: 1,
-    limit: 10,
-    total: 0,
-    loading: false,
-    data: [],
-    searchParam: {}
+	page: 1,
+	limit: 10,
+	total: 0,
+	loading: false,
+	data: [],
+	searchParam: {},
 })
 
 const open = () => {
-    visible.value = true
-    loadSignList()
+	visible.value = true
+	loadSignList()
 }
 // 获取列表
 const loadSignList = () => {
-    tableData.loading = true
-    const params = {
-        page: tableData.page,
-        limit: tableData.limit,
-        ...tableData.searchParam
-    }
-    getSignList(props.username, params).then((res) => {
-        tableData.loading = false
-        tableData.data = res.data.data
-        tableData.total = res.data.total
-    }).catch(() => {
-        tableData.loading = false
-    })
+	tableData.loading = true
+	const params = {
+		page: tableData.page,
+		limit: tableData.limit,
+		...tableData.searchParam,
+	}
+	getSignList(props.username, params)
+		.then((res) => {
+			tableData.loading = false
+			tableData.data = res.data.data
+			tableData.total = res.data.total
+		})
+		.catch(() => {
+			tableData.loading = false
+		})
 }
 
 const addEvent = () => {
-    Object.assign(formData, initialFormData)
-    formData.signSource = signConfig.signSourceList[0].type
-    formData.signType = signConfig.signTypeList[0].type
-    visibleAdd.value = true
+	Object.assign(formData, initialFormData)
+	formData.signSource = signConfig.signSourceList[0].type
+	formData.signType = signConfig.signTypeList[0].type
+	visibleAdd.value = true
 }
 
-const deleteTemplate = (row:any) => {
-    ElMessageBox.confirm(t('确定删除该签名吗？'), t('提示'), {
-        confirmButtonText: t('确定'),
-        cancelButtonText: t('取消'),
-        type: 'warning'
-    }).then(() => {
-        deleteSign(props.username, { signatures: [row.sign] }).then((res) => {
-            // loadSignList()
-            tableData.loading = true
-            setTimeout(() => {
-                loadSignList()
-            }, 1000)
-        })
-    })
+const deleteTemplate = (row: any) => {
+	ElMessageBox.confirm(t('确定删除该签名吗？'), t('提示'), {
+		confirmButtonText: t('确定'),
+		cancelButtonText: t('取消'),
+		type: 'warning',
+	}).then(() => {
+		deleteSign(props.username, { signatures: [row.sign] }).then((res) => {
+			// loadSignList()
+			tableData.loading = true
+			setTimeout(() => {
+				loadSignList()
+			}, 1000)
+		})
+	})
 }
 
 // 批量复选框
@@ -348,8 +534,8 @@ const isIndeterminate = ref(false)
 
 // 监听批量复选框事件
 const toggleChange = (value: any) => {
-    isIndeterminate.value = false
-    smsSignListTableRef.value.toggleAllSelection()
+	isIndeterminate.value = false
+	smsSignListTableRef.value.toggleAllSelection()
 }
 
 const smsSignListTableRef = ref()
@@ -359,58 +545,59 @@ const multipleSelection: any = ref([])
 
 // 监听表格单行选中
 const handleSelectionChange = (val: []) => {
-    multipleSelection.value = val
+	multipleSelection.value = val
 
-    toggleCheckbox.value = false
-    if (multipleSelection.value.length > 0 && multipleSelection.value.length < tableData.data.length) {
-        isIndeterminate.value = true
-    } else {
-        isIndeterminate.value = false
-    }
+	toggleCheckbox.value = false
+	if (multipleSelection.value.length > 0 && multipleSelection.value.length < tableData.data.length) {
+		isIndeterminate.value = true
+	} else {
+		isIndeterminate.value = false
+	}
 
-    if (multipleSelection.value.length == tableData.data.length && tableData.data.length && multipleSelection.value.length) {
-        toggleCheckbox.value = true
-    }
+	if (multipleSelection.value.length == tableData.data.length && tableData.data.length && multipleSelection.value.length) {
+		toggleCheckbox.value = true
+	}
 }
 const checkSelectable = (row: any, index: number) => {
-    return !row.is_default // 只有不是“使用中”的行可选
+	return !row.is_default // 只有不是“使用中”的行可选
 }
 
 // 批量删除
 const batchDeleteEvent = () => {
-    if (multipleSelection.value.length == 0) {
-        ElMessage({
-            type: 'warning',
-            message: `${t('请选择要删除的签名')}`
-        })
-        return
-    }
+	if (multipleSelection.value.length == 0) {
+		ElMessage({
+			type: 'warning',
+			message: `${t('请选择要删除的签名')}`,
+		})
+		return
+	}
 
-    ElMessageBox.confirm(t('确定删除选中的签名吗？'), t('warning'), {
-        confirmButtonText: t('confirm'),
-        cancelButtonText: t('cancel'),
-        type: 'warning'
-    }).then(() => {
-        const signatures: any = []
-        multipleSelection.value.forEach((item: any) => {
-            signatures.push(item.sign)
-        })
+	ElMessageBox.confirm(t('确定删除选中的签名吗？'), t('warning'), {
+		confirmButtonText: t('confirm'),
+		cancelButtonText: t('cancel'),
+		type: 'warning',
+	}).then(() => {
+		const signatures: any = []
+		multipleSelection.value.forEach((item: any) => {
+			signatures.push(item.sign)
+		})
 
-        deleteSign(props.username, {
-            signatures
-        }).then(() => {
-            tableData.loading = true
-            setTimeout(() => {
-                loadSignList()
-            }, 1000)
-        }).catch(() => {
-        })
-    })
+		deleteSign(props.username, {
+			signatures,
+		})
+			.then(() => {
+				tableData.loading = true
+				setTimeout(() => {
+					loadSignList()
+				}, 1000)
+			})
+			.catch(() => {})
+	})
 }
 
-const selectTemplate = (row:any) => {
-    visible.value = false
-    emit('select', row)
+const selectTemplate = (row: any) => {
+	visible.value = false
+	emit('select', row)
 }
 
 defineExpose({ open })
diff --git a/admin/src/app/views/setting/layout.vue b/admin/src/app/views/setting/layout.vue
index 2b1454e27..32f11b5ec 100644
--- a/admin/src/app/views/setting/layout.vue
+++ b/admin/src/app/views/setting/layout.vue
@@ -1,80 +1,80 @@
 <template>
-  <div class="main-container">
-    <el-card class="box-card !border-none" shadow="never">
+    <div class="main-container">
+        <el-card class="box-card !border-none" shadow="never">
 
-      <div class="flex justify-between items-center">
-        <span class="text-page-title">{{ pageName }}</span>
-      </div>
+            <div class="flex justify-between items-center">
+                <span class="text-page-title">{{ pageName }}</span>
+            </div>
 
-      <div class="mt-[20px]">
-        <el-table :data="addonList" size="large" v-loading="loading">
-          <template #empty>
-            <span>{{ !loading ? t('emptyData') : '' }}</span>
-          </template>
+            <div class="mt-[20px]">
+                <el-table :data="addonList" size="large" v-loading="loading">
+                    <template #empty>
+                        <span>{{ !loading ? t('emptyData') : '' }}</span>
+                    </template>
 
-          <el-table-column prop="title" :label="t('app')" min-width="120" >
-            <template #default="{ row }">
-              <div class="flex items-center">
-                <el-image class="w-[40px] h-[40px] rounded-md overflow-hidden" :src="row.icon" fit="contain">
-                  <template #error>
-                    <div class="flex items-center w-full h-full">
-                      <img class="w-full h-full" src="@/app/assets/images/icon-addon-one.png" alt="">
-                    </div>
-                  </template>
-                </el-image>
-                <div class="flex-1 ml-2 truncate">{{ row.title }}</div>
-              </div>
-            </template>
-          </el-table-column>
+                    <el-table-column prop="title" :label="t('app')" min-width="120" >
+                        <template #default="{ row }">
+                            <div class="flex items-center">
+                                <el-image class="w-[40px] h-[40px] rounded-md overflow-hidden" :src="row.icon" fit="contain">
+                                    <template #error>
+                                        <div class="flex items-center w-full h-full">
+                                            <img class="w-full h-full" src="@/app/assets/images/icon-addon-one.png" alt="">
+                                        </div>
+                                    </template>
+                                </el-image>
+                                <div class="flex-1 ml-2 truncate">{{ row.title }}</div>
+                            </div>
+                        </template>
+                    </el-table-column>
 
-          <el-table-column :label="t('operation')" align="right" fixed="right" width="100">
-            <template #default="{ row }">
-              <el-button type="primary" link @click="openSettingLayer(row.key)">{{ t('setting') }}</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </el-card>
-  </div>
-
-  <el-dialog v-model="showDialog" :title="t('selectLayout')" width="800" :destroy-on-close="true">
-    <div class="h-[300px]">
-      <el-scrollbar >
-        <div class="flex justify-between items-center mb-[20px]">
-          <h3 class="!text-sm !text-[#444]">{{ t('layout') }}</h3>
-          <div class="flex items-center cursor-pointer" @click="toDiyLayout">
-            <span class="iconfont iconwenhao text-[#999] !text-[14px]"></span>
-            <div class="ml-[2px] text-[12px] text-[#999]">如何开发自定义布局</div>
-          </div>
-        </div>
-        <div class="flex justify-items-stretch">
-          <div class="w-[180px] h-[130px] mr-[10px] mb-[10px] border hover:border-primary cursor-pointer"
-               :class="{'border-primary': ((!layoutConfig[currAddon] && item.layout == 'default') || (layoutConfig[currAddon] == item.layout)) }"
-               @click="layoutConfig[currAddon] = item.layout"
-               v-for="item in systemLayout">
-            <img :src="img(item.cover)" class="w-full h-full" />
-          </div>
-          <div class="w-[180px] h-[130px] mr-[20px] border hover:border-primary cursor-pointer"
-               :class="{'border-primary': ((!layoutConfig[currAddon] && addonLayout.layout == 'default') || (layoutConfig[currAddon] == addonLayout.layout)) }"
-               @click="layoutConfig[currAddon] = addonLayout.layout"
-               v-if="addonLayout">
-            <img :src="img(addonLayout.cover)" class="w-full h-full" />
-          </div>
-        </div>
-        <!-- <h3 class="panel-title !text-sm">{{ t('themeColor') }}</h3>
-        <div>
-            <el-color-picker v-model="themeColor[currAddon]" size="large" />
-            <div class="form-tip text-[#999] mt-2">设置的色调会在前端站点列表体现[home/index]，用于区分不同的应用</div>
-        </div> -->
-      </el-scrollbar>
+                    <el-table-column :label="t('operation')" align="right" fixed="right" width="100">
+                        <template #default="{ row }">
+                            <el-button type="primary" link @click="openSettingLayer(row.key)">{{ t('setting') }}</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </el-card>
     </div>
-    <template #footer>
+
+    <el-dialog v-model="showDialog" :title="t('selectLayout')" width="800" :destroy-on-close="true">
+        <div class="h-[330px]">
+            <el-scrollbar >
+                <div class="flex justify-between items-center mb-[20px]">
+                    <h3 class="!text-sm !text-[#444]">{{ t('layout') }}</h3>
+                    <div class="flex items-center cursor-pointer" @click="toDiyLayout">
+                        <span class="iconfont iconwenhao text-[#999] !text-[14px]"></span>
+                        <div class="ml-[2px] text-[12px] text-[#999]">如何开发自定义布局</div>
+                    </div>
+                </div>
+                <div class="flex flex-wrap justify-items-stretch">
+                    <div class="w-[180px] h-[130px] mr-[10px] mb-[10px] border hover:border-primary cursor-pointer"
+                         :class="{'border-primary': ((!layoutConfig[currAddon] && item.layout == 'default') || (layoutConfig[currAddon] == item.layout)) }"
+                         @click="layoutConfig[currAddon] = item.layout"
+                         v-for="item in systemLayout">
+                        <img :src="img(item.cover)" class="w-full h-full" />
+                    </div>
+                    <div class="w-[180px] h-[130px] mr-[20px] border hover:border-primary cursor-pointer"
+                         :class="{'border-primary': ((!layoutConfig[currAddon] && addonLayout.layout == 'default') || (layoutConfig[currAddon] == addonLayout.layout)) }"
+                         @click="layoutConfig[currAddon] = addonLayout.layout"
+                         v-if="addonLayout">
+                        <img :src="img(addonLayout.cover)" class="w-full h-full" />
+                    </div>
+                </div>
+                <!-- <h3 class="panel-title !text-sm">{{ t('themeColor') }}</h3>
+                <div>
+                    <el-color-picker v-model="themeColor[currAddon]" size="large" />
+                    <div class="form-tip text-[#999] mt-2">设置的色调会在前端站点列表体现[home/index]，用于区分不同的应用</div>
+                </div> -->
+            </el-scrollbar>
+        </div>
+        <template #footer>
             <span class="dialog-footer">
                 <el-button @click="showDialog = false">{{ t('cancel') }}</el-button>
                 <el-button type="primary" :loading="loading" @click="confirm()">{{ t('confirm') }}</el-button>
             </span>
-    </template>
-  </el-dialog>
+        </template>
+    </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -93,67 +93,67 @@ const systemLayout = ref([])
 const addonLayout = ref(null)
 const themeColor = ref({})
 const addonList = ref([
-  {
-    title: t('manyApp'),
-    key: 'system',
-    icon: ''
-  }
+    {
+        title: t('manyApp'),
+        key: 'system',
+        icon: ''
+    }
 ])
 
 const layouts = import.meta.globEager('@/layout/**/layout.json')
 for (const key in layouts) {
-  const layout = layouts[key]
-  systemLayout.value.push(layout.default)
+    const layout = layouts[key]
+    systemLayout.value.push(layout.default)
 }
 const addonLayouts = import.meta.globEager('@/addon/**/layout/layout.json')
 
 getInstalledAddonList().then(({ data }) => {
-  Object.keys(data).forEach((key) => {
-    const item = data[key]
-    item.type == 'app' && addonList.value.push(item)
-  })
-  loading.value = false
+    Object.keys(data).forEach((key) => {
+        const item = data[key]
+        item.type == 'app' && addonList.value.push(item)
+    })
+    loading.value = false
 })
 
 const getLayoutConfig = () => {
-  getLayout().then(({ data }) => {
-    layoutConfig.value = data
-  })
-  getThemecolor().then(({ data }) => {
-    themeColor.value = data
-  })
+    getLayout().then(({ data }) => {
+        layoutConfig.value = data
+    })
+    getThemecolor().then(({ data }) => {
+        themeColor.value = data
+    })
 }
 getLayoutConfig()
 
 const currAddon = ref('')
 const showDialog = ref(false)
 const openSettingLayer = async (key: string) => {
-  if (key != 'system') {
-    addonLayout.value = null
-    Object.keys(addonLayouts).forEach((path) => {
-      path.indexOf(`/addon/${key}/`) != -1 && (addonLayout.value = addonLayouts[path].default)
-    })
-  }
-  currAddon.value = key
-  showDialog.value = true
+    if (key != 'system') {
+        addonLayout.value = null
+        Object.keys(addonLayouts).forEach((path) => {
+            path.indexOf(`/addon/${key}/`) != -1 && (addonLayout.value = addonLayouts[path].default)
+        })
+    }
+    currAddon.value = key
+    showDialog.value = true
 }
 
 const confirm = () => {
-  setThemecolor({
-    key: currAddon.value,
-    value: themeColor.value[currAddon.value] ? themeColor.value[currAddon.value] : ''
-  })
-  setLayout({
-    key: currAddon.value,
-    value: layoutConfig.value[currAddon.value] ? layoutConfig.value[currAddon.value] : 'default'
-  })
-  showDialog.value = false
+    setThemecolor({
+        key: currAddon.value,
+        value: themeColor.value[currAddon.value] ? themeColor.value[currAddon.value] : ''
+    })
+    setLayout({
+        key: currAddon.value,
+        value: layoutConfig.value[currAddon.value] ? layoutConfig.value[currAddon.value] : 'default'
+    })
+    showDialog.value = false
 }
 
 // 跳转自定义布局
 const toDiyLayout = () => {
-  let url = 'https://doc.niucloud.com/saas.html?keywords=/pluginDev/diyLayoutDev';
-  window.open(url)
+    let url = 'https://doc.press.niucloud.com/php/saas-framework/dev/pluginDev/diyLayoutDev.html';
+    window.open(url)
 }
 </script>
 
diff --git a/admin/src/app/views/setting/notice.vue b/admin/src/app/views/setting/notice.vue
index a6caa6432..6fa70e2a5 100644
--- a/admin/src/app/views/setting/notice.vue
+++ b/admin/src/app/views/setting/notice.vue
@@ -1,176 +1,719 @@
 <template>
-    <!--消息模板-->
-    <div class="main-container" v-loading="noticeTableData.loading">
-        <el-card class="box-card !border-none" shadow="never">
-            <h3 class="panel-title !text-sm">{{ t('buyerNotice') }}</h3>
+  <!--消息模板-->
+  <div class="main-container" v-loading="noticeTableData.loading">
+    <el-card class="box-card !border-none" shadow="never">
+      <h3 class="panel-title !text-sm">{{ t('buyerNotice') }}</h3>
 
-            <div class="flex flex-row flex-wrap">
-                <el-table :data="noticeTableData.buyer" size="large" :span-method="buyerSpan">
-                    <el-table-column prop="addon_name" :label="t('addon')" min-width="120" />
-                    <el-table-column prop="name" :label="t('noticeType')" min-width="120" />
-                    <el-table-column :label="t('operation')" align="right" fixed="right" min-width="300">
-                        <template #default="{ row }">
-                            <div class="flex">
-                                <div class="text-sm mr-1 flex items-center cursor-pointer" v-if="row.support_type.indexOf('sms') != -1" @click="setNotice(row, 'sms')">
-                                    <el-icon class="text-[15px] mr-[3px]" :class="row.is_sms ? 'open' : ''">
-                                        <SuccessFilled />
-                                    </el-icon>
-                                    <span class="ml-0.5">{{ t('sms') }}</span>
-                                </div>
-                                <div class="text-sm  flex items-center cursor-pointer ml-[20px]" v-if="row.support_type.indexOf('wechat') != -1" @click="setNotice(row, 'wechat')">
-                                    <el-icon class="text-[15px] mr-[3px]" :class="row.is_wechat ? 'open' : ''">
-                                        <SuccessFilled />
-                                    </el-icon>
-                                    <span class="ml-0.5">{{ t('wechat') }}</span>
-                                </div>
-                                <div class="text-sm  flex items-center cursor-pointer ml-[20px]" v-if="row.support_type.indexOf('weapp') != -1" @click="setNotice(row, 'weapp')">
-                                    <el-icon class="text-[15px] mr-[3px]" :class="row.is_weapp ? 'open' : ''">
-                                        <SuccessFilled />
-                                    </el-icon>
-                                    <span class="ml-0.5">{{ t('weapp') }}</span>
-                                </div>
-                            </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </el-card>
+      <div class="flex flex-row flex-wrap">
+        <el-table
+            :data="noticeTableData.buyer"
+            size="large"
+            :span-method="buyerSpan"
+        >
+          <el-table-column
+              prop="addon_name"
+              :label="t('addon')"
+              min-width="120"
+          />
+          <el-table-column
+              prop="name"
+              :label="t('noticeType')"
+              min-width="120"
+          />
+          <el-table-column
+              :label="t('operation')"
+              align="right"
+              fixed="right"
+              min-width="300"
+          >
+            <template #default="{ row }">
+              <div class="flex">
+                <div
+                    class="text-sm mr-1 flex items-center cursor-pointer"
+                    v-if="row.support_type.indexOf('sms') != -1"
+                    @click="setNotice(row, 'sms')"
+                >
+                  <el-icon
+                      class="text-[15px] mr-[3px]"
+                      :class="row.is_sms ? 'open' : ''"
+                  >
+                    <SuccessFilled />
+                  </el-icon>
+                  <span class="ml-0.5">{{ t('sms') }}</span>
+                </div>
+                <div
+                    class="text-sm flex items-center cursor-pointer ml-[20px]"
+                    v-if="
+										row.support_type.indexOf('wechat') != -1
+									"
+                    @click="setNotice(row, 'wechat')"
+                >
+                  <el-icon
+                      class="text-[15px] mr-[3px]"
+                      :class="row.is_wechat ? 'open' : ''"
+                  >
+                    <SuccessFilled />
+                  </el-icon>
+                  <span class="ml-0.5">{{
+                      t('wechat')
+                    }}</span>
+                </div>
+                <div
+                    class="text-sm flex items-center cursor-pointer ml-[20px]"
+                    v-if="
+										row.support_type.indexOf('weapp') != -1
+									"
+                    @click="setNotice(row, 'weapp')"
+                >
+                  <el-icon
+                      class="text-[15px] mr-[3px]"
+                      :class="row.is_weapp ? 'open' : ''"
+                  >
+                    <SuccessFilled />
+                  </el-icon>
+                  <span class="ml-0.5">{{ t('weapp') }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
 
-        <el-card class="box-card mt-[15px] !border-none" shadow="never">
-            <h3 class="panel-title !text-sm">{{ t('sellerNotice') }}</h3>
+    <el-card class="box-card mt-[15px] !border-none" shadow="never">
+      <div class="flex items-center mb-[20px] gap-[10px]">
+        <h3 class="panel-title !text-sm !mb-[0]">
+          {{ t('sellerNotice') }}
+        </h3>
+        <el-button
+            type="primary"
+            @click="openBindAccountDialog"
+            class="!text-[12px]"
+        >绑定接收信息账号</el-button
+        >
+      </div>
 
-            <div class="flex flex-row flex-wrap">
-                <el-table :data="noticeTableData.seller" size="large" :span-method="buyerSpan">
-                    <el-table-column prop="addon_name" :label="t('addon')" min-width="120" />
-                    <el-table-column prop="name" :label="t('noticeType')" min-width="120" />
-                    <el-table-column :label="t('operation')" align="right" fixed="right" min-width="300">
-                        <template #default="{ row }">
-                            <div class="flex">
-                                <div class="text-sm mr-1 flex items-center cursor-pointer" v-if="row.support_type.indexOf('sms') != -1" @click="setNotice(row, 'sms')">
-                                    <el-icon class="text-[15px] mr-[3px]" :class="row.is_sms ? 'open' : ''">
-                                        <SuccessFilled />
-                                    </el-icon>
-                                    <span class="ml-0.5">{{ t('sms') }}</span>
-                                </div>
-                                <div class="text-sm  flex items-center cursor-pointer ml-[20px]" v-if="row.support_type.indexOf('wechat') != -1" @click="setNotice(row, 'wechat')">
-                                    <el-icon class="text-[15px] mr-[3px]" :class="row.is_wechat ? 'open' : ''">
-                                        <SuccessFilled />
-                                    </el-icon>
-                                    <span class="ml-0.5">{{ t('wechat') }}</span>
-                                </div>
-                                <div class="text-sm  flex items-center cursor-pointer ml-[20px]" v-if="row.support_type.indexOf('weapp') != -1" @click="setNotice(row, 'weapp')">
-                                    <el-icon class="text-[15px] mr-[3px]" :class="row.is_weapp ? 'open' : ''">
-                                        <SuccessFilled />
-                                    </el-icon>
-                                    <span class="ml-0.5">{{ t('weapp') }}</span>
-                                </div>
-                            </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </el-card>
+      <div class="flex flex-row flex-wrap">
+        <el-table
+            :data="noticeTableData.seller"
+            size="large"
+            :span-method="buyerSpan"
+        >
+          <el-table-column
+              prop="addon_name"
+              :label="t('addon')"
+              min-width="120"
+          />
+          <el-table-column
+              prop="name"
+              :label="t('noticeType')"
+              min-width="120"
+          />
+          <el-table-column
+              :label="t('operation')"
+              align="right"
+              fixed="right"
+              min-width="300"
+          >
+            <template #default="{ row }">
+              <div class="flex">
+                <div
+                    class="text-sm mr-1 flex items-center cursor-pointer"
+                    v-if="row.support_type.indexOf('sms') != -1"
+                    @click="setNotice(row, 'sms')"
+                >
+                  <el-icon
+                      class="text-[15px] mr-[3px]"
+                      :class="row.is_sms ? 'open' : ''"
+                  >
+                    <SuccessFilled />
+                  </el-icon>
+                  <span class="ml-0.5">{{ t('sms') }}</span>
+                </div>
+                <div
+                    class="text-sm flex items-center cursor-pointer ml-[20px]"
+                    v-if="
+										row.support_type.indexOf('wechat') != -1
+									"
+                    @click="setNotice(row, 'wechat')"
+                >
+                  <el-icon
+                      class="text-[15px] mr-[3px]"
+                      :class="row.is_wechat ? 'open' : ''"
+                  >
+                    <SuccessFilled />
+                  </el-icon>
+                  <span class="ml-0.5">{{
+                      t('wechat')
+                    }}</span>
+                </div>
+                <div
+                    class="text-sm flex items-center cursor-pointer ml-[20px]"
+                    v-if="
+										row.support_type.indexOf('weapp') != -1
+									"
+                    @click="setNotice(row, 'weapp')"
+                >
+                  <el-icon
+                      class="text-[15px] mr-[3px]"
+                      :class="row.is_weapp ? 'open' : ''"
+                  >
+                    <SuccessFilled />
+                  </el-icon>
+                  <span class="ml-0.5">{{ t('weapp') }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
 
-        <sms ref="smsDialog" @complete="loadNoticeList()" />
-        <wechat ref="wechatDialog" @complete="loadNoticeList()" />
-        <weapp ref="weappDialog" @complete="loadNoticeList()" />
+    <sms ref="smsDialog" @complete="loadNoticeList()" />
+    <wechat ref="wechatDialog" @complete="loadNoticeList()" />
+    <weapp ref="weappDialog" @complete="loadNoticeList()" />
+    <el-dialog
+        v-model="bindDialogVisible"
+        @close="bindDialogClose"
+        width="300"
+    >
+      <view class="flex flex-col justify-center items-center">
+        <span class="mb-[15px]">{{ isBind.title }}</span>
+        <el-image
+            v-if="isBind.key == 'weapp'"
+            class="w-[120px] h-[120px]"
+            :src="isBind.weapp_qrcode"
+            :fit="contain"
+        />
+        <el-image
+            v-else
+            class="w-[120px] h-[120px]"
+            :src="isBind.wechat_qrcode"
+            :fit="contain"
+        />
+      </view>
+    </el-dialog>
 
-    </div>
+    <!-- 绑定接收信息账号弹窗 -->
+    <el-dialog
+        v-model="bindAccountDialogVisible"
+        title="绑定接收信息账号"
+        width="500px"
+        @close="bindAccountDialogClose"
+    >
+      <div class="account-bind-options">
+        <div class="option-item">
+          <div class="flex flex-col">
+						<span class="title" v-if="!isBind.bind_sms_info"
+            >手机号</span
+            >
+            <span class="info" v-else
+            >手机号：{{ isBind.bind_sms_info }}</span
+            >
+          </div>
+          <template v-if="!Number(isBind.bind_sms)">
+            <el-button
+                type="primary"
+                @click="bindSmsFn"
+                class="!text-[12px]"
+            >绑定</el-button
+            >
+          </template>
+          <template v-else>
+            <el-button
+                type="danger"
+                @click="cancelBindFn('sms')"
+                class="!text-[12px]"
+            >解绑</el-button
+            >
+          </template>
+        </div>
+        <div class="option-item">
+          <div class="flex flex-col">
+						<span class="title" v-if="!isBind.bind_wechat_info"
+            >微信账号</span
+            >
+            <span class="info" v-else
+            >微信openId：{{ isBind.bind_wechat_info }}</span
+            >
+          </div>
+          <template v-if="!Number(isBind.bind_wechat)">
+            <el-button
+                type="primary"
+                @click="bindWeChatFn"
+                class="!text-[12px]"
+            >绑定</el-button
+            >
+          </template>
+          <template v-else>
+            <el-button
+                type="danger"
+                @click="cancelBindFn('wechat')"
+                class="!text-[12px]"
+            >解绑</el-button
+            >
+          </template>
+        </div>
+        <!--				<div class="option-item">-->
+        <!--					<div class="flex flex-col">-->
+        <!--						<span class="title" v-if="!isBind.bind_weapp_info"-->
+        <!--							>小程序账号</span-->
+        <!--						>-->
+        <!--						<span class="info" v-else-->
+        <!--							>小程序openId：{{ isBind.bind_weapp_info }}</span-->
+        <!--						>-->
+        <!--					</div>-->
+        <!--					<template v-if="!Number(isBind.bind_weapp)">-->
+        <!--						<el-button-->
+        <!--							type="primary"-->
+        <!--							@click="bindWeappFn"-->
+        <!--							class="!text-[12px]"-->
+        <!--							>绑定</el-button-->
+        <!--						>-->
+        <!--					</template>-->
+        <!--					<template v-else>-->
+        <!--						<el-button-->
+        <!--							type="danger"-->
+        <!--							@click="cancelBindFn('weapp')"-->
+        <!--							class="!text-[12px]"-->
+        <!--							>解绑</el-button-->
+        <!--						>-->
+        <!--					</template>-->
+        <!--				</div>-->
+      </div>
+    </el-dialog>
+
+    <!-- 新增：短信绑定弹窗 -->
+    <el-dialog
+        v-model="smsBindDialogVisible"
+        title="绑定接收信息手机号"
+        width="400px"
+        @close="resetSmsBindForm"
+    >
+      <el-form
+          :model="smsBindForm"
+          :rules="smsBindRules"
+          ref="smsBindFormRef"
+          label-width="80px"
+      >
+        <el-form-item label="手机号" prop="mobile">
+          <el-input
+              v-model="smsBindForm.mobile"
+              placeholder="请输入手机号"
+              maxlength="11"
+              @input="handleMobileInput"
+          />
+        </el-form-item>
+        <el-form-item label="验证码" prop="code">
+          <el-input
+              v-model="smsBindForm.code"
+              placeholder="请输入验证码"
+              maxlength="6"
+              style="width: 50%"
+          />
+          <el-button
+              class="ml-2"
+              type="primary"
+              :disabled="
+							!canSendCode ||
+							sendingCode ||
+							smsBindForm.mobile.length !== 11
+						"
+              @click="sendSmsCode"
+          >
+            {{ codeBtnText }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="smsBindDialogVisible = false"
+        >取消</el-button
+        >
+        <el-button
+            type="primary"
+            :loading="bindingSms"
+            @click="submitSmsBind"
+        >
+          确认绑定
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import { t } from '@/lang'
-import { getNoticeList } from '@/app/api/notice'
+import {
+  getNoticeList,
+  cancelBind,
+  getBindInfo,
+  getWechatAuthUrl,
+  getWeappAuthUrl,
+  sendSms,
+  bindSms,
+} from '@/app/api/notice'
 import Sms from '@/app/views/setting/components/notice-sms.vue'
 import Wechat from '@/app/views/setting/components/notice-wechat.vue'
 import Weapp from '@/app/views/setting/components/notice-weapp.vue'
+import QRCode from 'qrcode'
+import { chain } from 'lodash-es'
+import { img } from '@/utils/common'
+import { SuccessFilled } from '@element-plus/icons-vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
-const smsDialog : Record<string, any> | null = ref(null)
-const wechatDialog : Record<string, any> | null = ref(null)
-const weappDialog : Record<string, any> | null = ref(null)
+const smsDialog: Record<string, any> | null = ref(null)
+const wechatDialog: Record<string, any> | null = ref(null)
+const weappDialog: Record<string, any> | null = ref(null)
 
-const noticeTableData = reactive({
-    loading: true,
-    buyer: [],
-    seller: []
-})
+// 新增：绑定接收信息账号弹窗显示状态
+const bindAccountDialogVisible = ref(false)
+
+// 打开绑定接收信息账号弹窗
+const openBindAccountDialog = () => {
+  bindAccountDialogVisible.value = true
+}
+
+// 关闭绑定接收信息账号弹窗
+const bindAccountDialogClose = () => {
+  bindAccountDialogVisible.value = false
+}
+
+const noticeTableData = reactive({ loading: true, buyer: [], seller: [] })
 
 /**
  * 获取配置信息
  */
 const loadNoticeList = () => {
-    noticeTableData.loading = true
-
-    getNoticeList({}).then(res => {
+  noticeTableData.loading = true
+  getNoticeList({})
+      .then((res) => {
         noticeTableData.buyer = []
         noticeTableData.seller = []
-        res.data.forEach(item => {
-            if (item.notice.length) {
-                const buyer = []; const seller = []
-                Object.keys(item.notice).forEach((key, index) => {
-                    const notice = item.notice[key]
-                    notice.addon_name = item.title
-                    notice.receiver_type == 1 ? buyer.push(notice) : seller.push(notice)
-                })
-                if (buyer.length) {
-                    buyer[0].rowspan = buyer.length
-                    noticeTableData.buyer = noticeTableData.buyer.concat(buyer)
-                }
-                if (seller.length) {
-                    seller[0].rowspan = seller.length
-                    noticeTableData.seller = noticeTableData.seller.concat(seller)
-                }
+        res.data.forEach((item) => {
+          if (item.notice.length) {
+            const buyer = []
+            const seller = []
+            Object.keys(item.notice).forEach((key, index) => {
+              const notice = item.notice[key]
+              notice.addon_name = item.title
+              notice.receiver_type == 1
+                  ? buyer.push(notice)
+                  : seller.push(notice)
+            })
+            if (buyer.length) {
+              buyer[0].rowspan = buyer.length
+              noticeTableData.buyer =
+                  noticeTableData.buyer.concat(buyer)
             }
+            if (seller.length) {
+              seller[0].rowspan = seller.length
+              noticeTableData.seller =
+                  noticeTableData.seller.concat(seller)
+            }
+          }
         })
         noticeTableData.loading = false
-    }).catch((e) => {
+      })
+      .catch((e) => {
         noticeTableData.loading = false
-    })
+      })
 }
 
-const buyerSpan = (row : any) => {
-    if (row.columnIndex === 0) {
-        if (row.row.rowspan) {
-            return {
-                rowspan: row.row.rowspan,
-                colspan: 1
-            }
-        } else {
-            return {
-                rowspan: 0,
-                colspan: 0
-            }
-        }
+const isBind = ref({
+  bind_sms: 0, // 新增：短信绑定状态
+  bind_wechat: 0,
+  bind_weapp: 0,
+  bind_sms_info: '',
+  bind_wechat_info: '',
+  bind_weapp_info: '',
+  wechat_qrcode: '',
+  weapp_qrcode: '',
+  title: '',
+  key: 'wechat',
+})
+// 查看是否绑定
+const getBindInfoFn = (isFirstQuery = false) => {
+  getBindInfo().then((res) => {
+    console.log(res.data)
+    if (Object.keys(res.data).length > 0) {
+      isBind.value.bind_sms = res.data.mobile ? 1 : 0 // 新增：更新短信绑定状态
+      isBind.value.bind_wechat = res.data.wechat_openid ? 1 : 0 // 新增：更新微信绑定状态
+      isBind.value.bind_weapp = res.data.weapp_openid ? 1 : 0 // 新增：更新小程序绑定状态
+
+      isBind.value.bind_sms_info = res.data.mobile
+      isBind.value.bind_wechat_info = res.data.wechat_openid
+      isBind.value.bind_weapp_info = res.data.weapp_openid
+      if (!isFirstQuery && isBind.value[`bind_${isBind.value.key}`]) {
+        bindDialogClose()
+      }
     }
+  })
+}
+getBindInfoFn(true)
+// --------------------- 绑定微信 ---------------------
+let isBindRepeat = false
+const bindDialogVisible = ref(false)
+const requestTimer = ref()
+const bindWeChatFn = () => {
+  if (isBindRepeat) return
+  isBindRepeat = true
+  getWechatAuthUrl()
+      .then((res) => {
+        isBindRepeat = false
+        if (res?.data?.url) generateQRCode(res.data.url, 'wechat_qrcode')
+        bindDialogVisible.value = true
+        isBind.value.title = '微信扫一扫，绑定接收信息微信'
+        isBind.value.key = 'wechat'
+        requestTimer.value = setInterval(getBindInfoFn, 1000)
+      })
+      .catch((e) => {
+        isBindRepeat = false
+      })
+}
+
+const bindWeappFn = () => {
+  if (isBindRepeat) return
+  isBindRepeat = true
+  getWeappAuthUrl()
+      .then((res) => {
+        isBindRepeat = false
+        if (res?.data?.url) isBind.value.weapp_qrcode = img(res.data.url)
+        bindDialogVisible.value = true
+        isBind.value.title = '微信扫一扫，绑定接收信息小程序'
+        isBind.value.key = 'weapp'
+        requestTimer.value = setInterval(getBindInfoFn, 1000)
+      })
+      .catch((e) => {
+        isBindRepeat = false
+      })
+}
+
+const generateQRCode = async (url, type) => {
+  try {
+    // 生成二维码
+    isBind.value[type] = await QRCode.toDataURL(url, {
+      errorCorrectionLevel: 'L',
+      margin: 0,
+      width: 120,
+    })
+  } catch (e) {
+    isBind.value[type] = ''
+    console.error('生成二维码失败', e)
+  }
+}
+
+// --------------------- 取消绑定 ---------------------
+const isUnbindRepeat = ref(false)
+const cancelBindFn = (key: any) => {
+  ElMessageBox.confirm('确定取消绑定吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).then(() => {
+    if (isUnbindRepeat.value) return
+    isUnbindRepeat.value = true
+
+    cancelBind({ unbind_type: [key] })
+        .then((res) => {
+          ElMessage({ message: '取消绑定成功', type: 'success' })
+          getBindInfoFn()
+          isUnbindRepeat.value = false
+        })
+        .catch((e) => {
+          isUnbindRepeat.value = false
+        })
+  })
+}
+
+const bindDialogClose = () => {
+  clearInterval(requestTimer.value)
+  bindDialogVisible.value = false
+}
+// --------------------- 新增：短信绑定相关逻辑 ---------------------
+// 短信绑定弹窗显示状态
+const smsBindDialogVisible = ref(false)
+// 表单ref
+const smsBindFormRef = ref<FormInstance>()
+// 绑定中状态
+const bindingSms = ref(false)
+// 是否可以发送验证码
+const canSendCode = ref(true)
+// 发送验证码中
+const sendingCode = ref(false)
+// 验证码按钮文字
+const codeBtnText = ref('发送验证码')
+// 倒计时秒数
+const countdown = ref(60)
+
+// 短信绑定表单
+const smsBindForm = reactive({
+  mobile: '', // 手机号
+  code: '', // 验证码
+  mobile_key: '', // 发送验证码返回的key
+})
+
+// 短信绑定表单验证规则
+const smsBindRules = reactive<FormRules>({
+  mobile: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '请输入正确的手机号',
+      trigger: 'blur',
+    },
+  ],
+  code: [
+    { required: true, message: '请输入验证码', trigger: 'blur' },
+    { pattern: /^\d{4}$/, message: '请输入6位数字验证码', trigger: 'blur' },
+  ],
+})
+
+// 手机号输入处理（只保留数字）
+const handleMobileInput = (val: string) => {
+  smsBindForm.mobile = val.replace(/\D/g, '')
+}
+
+// 发送验证码
+const sendSmsCode = async () => {
+  try {
+    sendingCode.value = true
+    // 发送验证码请求
+    const res = await sendSms({ mobile: smsBindForm.mobile })
+    if (res.data) {
+      // 保存返回的mobile_key
+      smsBindForm.mobile_key = res.data.key || ''
+
+      // 开始倒计时
+      canSendCode.value = false
+      codeBtnText.value = `${countdown.value}秒后重新发送`
+      const timer = setInterval(() => {
+        countdown.value--
+        codeBtnText.value = `${countdown.value}秒后重新发送`
+        if (countdown.value <= 0) {
+          clearInterval(timer)
+          canSendCode.value = true
+          codeBtnText.value = '发送验证码'
+          countdown.value = 60
+        }
+      }, 1000)
+    }
+  } catch (error) {
+
+  } finally {
+    sendingCode.value = false
+  }
+}
+
+// 提交短信绑定
+const submitSmsBind = async () => {
+  if (!smsBindFormRef.value) return
+
+  // 表单验证
+  try {
+    await smsBindFormRef.value.validate()
+    bindingSms.value = true
+
+    // 调用绑定接口
+    const res = await bindSms({
+      mobile: smsBindForm.mobile,
+      mobile_key: smsBindForm.mobile_key,
+      mobile_code: smsBindForm.code,
+    })
+
+    if (res) {
+      smsBindDialogVisible.value = false
+      getBindInfoFn() // 更新绑定状态
+    }
+  } catch (error) {
+  } finally {
+    bindingSms.value = false
+  }
+}
+
+// 重置短信绑定表单
+const resetSmsBindForm = () => {
+  smsBindForm.mobile = ''
+  smsBindForm.code = ''
+  smsBindForm.mobile_key = ''
+  canSendCode.value = true
+  codeBtnText.value = '发送验证码'
+  countdown.value = 60
+  if (smsBindFormRef.value) {
+    smsBindFormRef.value.clearValidate()
+  }
+}
+
+// 实现bindSmsFn方法
+const bindSmsFn = () => {
+  // 打开短信绑定弹窗
+  smsBindDialogVisible.value = true
+  // 重置表单
+  resetSmsBindForm()
+}
+// --------------------- 短信绑定逻辑结束 ---------------------
+
+const buyerSpan = (row: any) => {
+  if (row.columnIndex === 0) {
+    if (row.row.rowspan) {
+      return { rowspan: row.row.rowspan, colspan: 1 }
+    } else {
+      return { rowspan: 0, colspan: 0 }
+    }
+  }
 }
 
 loadNoticeList()
 
-const setNotice = (data : any, type : string) => {
-    data.type = type
-    data.status = data['is_' + type]
-    if (type === 'sms') {
-        smsDialog.value.setFormData(data)
-        smsDialog.value.showDialog = true
-    } else if (type === 'wechat') {
-        wechatDialog.value.setFormData(data)
-        wechatDialog.value.showDialog = true
-    } else if (type === 'weapp') {
-        weappDialog.value.setFormData(data)
-        weappDialog.value.showDialog = true
-    }
+const setNotice = (data: any, type: string) => {
+  data.type = type
+  data.status = data['is_' + type]
+  if (type === 'sms') {
+    data.bind_sms = isBind.value.bind_sms
+    smsDialog.value.setFormData(data)
+    smsDialog.value.showDialog = true
+  } else if (type === 'wechat') {
+    data.bind_wechat = isBind.value.bind_wechat
+    wechatDialog.value.setFormData(data)
+    wechatDialog.value.showDialog = true
+  } else if (type === 'weapp') {
+    data.bind_weapp = isBind.value.bind_weapp
+    weappDialog.value.setFormData(data)
+    weappDialog.value.showDialog = true
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-    .open {
-        color: var(--el-color-primary);
+.open {
+  color: var(--el-color-primary);
+}
+
+.notice-type {
+  > div:nth-last-child(1):first-child {
+    width: 100%;
+  }
+}
+
+.account-bind-options {
+  .option-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+
+    &:last-child {
+      border-bottom: none;
     }
 
-    .notice-type {
-        >div:nth-last-child(1):first-child {
-            width: 100%;
-        }
+    .title {
+      font-size: 14px;
+      color: var(--el-text-color-regular);
     }
-</style>
+    .info {
+      color: #333;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/admin/src/app/views/setting/system.vue b/admin/src/app/views/setting/system.vue
index be4e963e2..6d7543deb 100644
--- a/admin/src/app/views/setting/system.vue
+++ b/admin/src/app/views/setting/system.vue
@@ -1,79 +1,79 @@
 <template>
-    <div class="main-container">
-        <el-form class="page-form loading-box" :model="formData" label-width="150px" ref="formRef" :rules="formRules" v-loading="loading">
-            <el-card class="box-card !border-none" shadow="never">
-                <h3 class="text-[16px] text-[#1D1F3A] font-bold mb-4">{{ pageName }}</h3>
-                <h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('websiteInfo') }}</h3>
+  <div class="main-container">
+    <el-form class="page-form loading-box" :model="formData" label-width="150px" ref="formRef" :rules="formRules" v-loading="loading">
+      <el-card class="box-card !border-none" shadow="never">
+        <h3 class="text-[16px] text-[#1D1F3A] font-bold mb-4">{{ pageName }}</h3>
+        <h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('websiteInfo') }}</h3>
 
-                <el-form-item :label="t('siteName')" prop="site_name">
-                    <el-input v-model.trim="formData.site_name" :placeholder="t('siteNamePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
-                </el-form-item>
-                <el-form-item :label="t('logo')">
-                    <div>
-                        <upload-image v-model="formData.logo" />
-                        <p class="text-[12px] text-[#a9a9a9]">{{ t('logoPlaceholder') }}</p>
-                    </div>
-                </el-form-item>
-                <el-form-item :label="t('icon')">
-                    <div>
-                        <upload-image v-model="formData.icon" />
-                        <p class="text-[12px] text-[#a9a9a9]">{{ t('iconPlaceholder') }}</p>
-                    </div>
-                </el-form-item>
-                <el-form-item :label="t('keywords')">
-                    <el-input v-model.trim="formData.keywords" :placeholder="t('keywordsPlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
-                </el-form-item>
-                <el-form-item :label="t('desc')">
-                    <el-input v-model.trim="formData.desc" type="textarea" :rows="4" clearable :placeholder="t('descPlaceholder')" class="input-width" maxlength="100" show-word-limit />
-                </el-form-item>
+        <el-form-item :label="t('siteName')" prop="site_name">
+          <el-input v-model.trim="formData.site_name" :placeholder="t('siteNamePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
+        </el-form-item>
+        <el-form-item :label="t('logo')" prop="logo">
+          <div>
+            <upload-image v-model="formData.logo" />
+            <p class="text-[12px] text-[#a9a9a9]">{{ t('logoPlaceholder') }}</p>
+          </div>
+        </el-form-item>
+        <el-form-item :label="t('icon')" prop="icon">
+          <div>
+            <upload-image v-model="formData.icon" />
+            <p class="text-[12px] text-[#a9a9a9]">{{ t('iconPlaceholder') }}</p>
+          </div>
+        </el-form-item>
+        <el-form-item :label="t('keywords')">
+          <el-input v-model.trim="formData.keywords" :placeholder="t('keywordsPlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
+        </el-form-item>
+        <el-form-item :label="t('desc')">
+          <el-input v-model.trim="formData.desc" type="textarea" :rows="4" clearable :placeholder="t('descPlaceholder')" class="input-width" maxlength="100" show-word-limit />
+        </el-form-item>
 
-                <div class="mt-[20px]" v-show="appType == 'site'">
-                    <h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('frontEndInfo') }}</h3>
-                    <el-form-item :label="t('frontEndName')">
-                        <el-input v-model.trim="formData.front_end_name" :placeholder="t('frontEndNamePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
-                    </el-form-item>
-                    <el-form-item :label="t('phone')">
-                        <el-input v-model.trim="formData.phone" :placeholder="t('phonePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
-                    </el-form-item>
-                    <el-form-item :label="t('logo')">
-                        <upload-image v-model="formData.front_end_logo" />
-                    </el-form-item>
-                    <el-form-item :label="t('icon')">
-                        <upload-image v-model="formData.front_end_icon" />
-                    </el-form-item>
+        <div class="mt-[20px]" v-show="appType == 'site'">
+          <h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('frontEndInfo') }}</h3>
+          <el-form-item :label="t('frontEndName')">
+            <el-input v-model.trim="formData.front_end_name" :placeholder="t('frontEndNamePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
+          </el-form-item>
+          <el-form-item :label="t('phone')">
+            <el-input v-model.trim="formData.phone" :placeholder="t('phonePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
+          </el-form-item>
+          <el-form-item :label="t('logo')">
+            <upload-image v-model="formData.front_end_logo" />
+          </el-form-item>
+          <el-form-item :label="t('icon')">
+            <upload-image v-model="formData.front_end_icon" />
+          </el-form-item>
 
-                    <el-form-item :label="t('metaTitle')">
-                        <el-input v-model.trim="formData.meta_title" :placeholder="t('MetaPlaceholder')" class="input-width" clearable maxlength="40" show-word-limit />
-                    </el-form-item>
-                    <el-form-item :label="t('metaDescription')">
-                        <el-input v-model.trim="formData.meta_desc" :placeholder="t('metaDescriptionPlaceholder')" class="input-width" clearable maxlength="200" show-word-limit />
-                    </el-form-item>
-                    <el-form-item :label="t('metaKeywords')">
-                        <el-input v-model.trim="formData.meta_keyword" :placeholder="t('metaKeywordsPlaceholder')" class="input-width" clearable maxlength="200" show-word-limit />
-                    </el-form-item>
-                </div>
-
-                <div class="mt-[20px]" v-if="appType == 'admin'">
-                    <h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('serviceInformation') }}</h3>
-                    <el-form-item :label="t('contactsTel')">
-                        <el-input v-model.trim="formData.tel" :placeholder="t('contactsTelPlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
-                    </el-form-item>
-                    <el-form-item :label="t('wechatCode')">
-                        <upload-image v-model="formData.wechat_code" />
-                    </el-form-item>
-                    <el-form-item :label="t('customerServiceCode')">
-                        <upload-image v-model="formData.enterprise_wechat" />
-                    </el-form-item>
-                </div>
-            </el-card>
-        </el-form>
-
-        <div class="fixed-footer-wrap">
-            <div class="fixed-footer">
-                <el-button type="primary" :loading="loading" @click="save(formRef)">{{ t('save') }}</el-button>
-            </div>
+          <el-form-item :label="t('metaTitle')">
+            <el-input v-model.trim="formData.meta_title" :placeholder="t('MetaPlaceholder')" class="input-width" clearable maxlength="40" show-word-limit />
+          </el-form-item>
+          <el-form-item :label="t('metaDescription')">
+            <el-input v-model.trim="formData.meta_desc" :placeholder="t('metaDescriptionPlaceholder')" class="input-width" clearable maxlength="200" show-word-limit />
+          </el-form-item>
+          <el-form-item :label="t('metaKeywords')">
+            <el-input v-model.trim="formData.meta_keyword" :placeholder="t('metaKeywordsPlaceholder')" class="input-width" clearable maxlength="200" show-word-limit />
+          </el-form-item>
         </div>
+
+        <div class="mt-[20px]" v-if="appType == 'admin'">
+          <h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('serviceInformation') }}</h3>
+          <el-form-item :label="t('contactsTel')">
+            <el-input v-model.trim="formData.tel" :placeholder="t('contactsTelPlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
+          </el-form-item>
+          <el-form-item :label="t('wechatCode')">
+            <upload-image v-model="formData.wechat_code" />
+          </el-form-item>
+          <el-form-item :label="t('customerServiceCode')">
+            <upload-image v-model="formData.enterprise_wechat" />
+          </el-form-item>
+        </div>
+      </el-card>
+    </el-form>
+
+    <div class="fixed-footer-wrap">
+      <div class="fixed-footer">
+        <el-button type="primary" :loading="loading" @click="save(formRef)">{{ t('save') }}</el-button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -91,46 +91,46 @@ const pageName = route.meta.title
 const loading = ref(true)
 const appType = ref(getAppType())
 const formData: any = reactive<Record<string, string>>({
-    site_name: '',
-    logo: '',
-    desc: '',
-    latitude: '',
-    keywords: '',
-    longitude: '',
-    province_id: '',
-    city_id: '',
-    district_id: '',
-    address: '',
-    full_address: '',
-    business_hours: '',
-    phone: '',
-    front_end_name: '',
-    front_end_logo: '',
-    front_end_icon: '',
-    icon: '',
-    wechat_code: '',
-    enterprise_wechat: '',
-    tel: '',
-    site_login_logo: '',
-    site_login_bg_img: '',
-    meta_title:"",
-    meta_desc:"",
-    meta_keyword:"",
+  site_name: '',
+  logo: '',
+  desc: '',
+  latitude: '',
+  keywords: '',
+  longitude: '',
+  province_id: '',
+  city_id: '',
+  district_id: '',
+  address: '',
+  full_address: '',
+  business_hours: '',
+  phone: '',
+  front_end_name: '',
+  front_end_logo: '',
+  front_end_icon: '',
+  icon: '',
+  wechat_code: '',
+  enterprise_wechat: '',
+  tel: '',
+  site_login_logo: '',
+  site_login_bg_img: '',
+  meta_title: '',
+  meta_desc: '',
+  meta_keyword: ''
 })
 
 const setFormData = async () => {
-    const data = await (await getWebsite()).data
-    Object.keys(formData).forEach((key: string) => {
-        if (data[key] != undefined) formData[key] = data[key]
-    })
+  const data = await (await getWebsite()).data
+  Object.keys(formData).forEach((key: string) => {
+    if (data[key] != undefined) formData[key] = data[key]
+  })
 
-    const service_data: any = await (await getService()).data
-    formData.wechat_code = service_data.wechat_code
-    formData.enterprise_wechat = service_data.enterprise_wechat
-    formData.tel = service_data.tel
-    formData.site_login_logo = service_data.site_login_logo
-    formData.site_login_bg_img = service_data.site_login_bg_img
-    loading.value = false
+  const service_data: any = await (await getService()).data
+  formData.wechat_code = service_data.wechat_code
+  formData.enterprise_wechat = service_data.enterprise_wechat
+  formData.tel = service_data.tel
+  formData.site_login_logo = service_data.site_login_logo
+  formData.site_login_bg_img = service_data.site_login_bg_img
+  loading.value = false
 }
 setFormData()
 
@@ -138,36 +138,42 @@ const formRef = ref<FormInstance>()
 
 // 表单验证规则
 const formRules = reactive<FormRules>({
-    site_name: [
-        { required: true, message: t('siteNamePlaceholder'), trigger: 'blur' }
-    ],
-    front_end_name: [
-        { required: true, message: t('frontEndNamePlaceholder'), trigger: 'blur' }
-    ]
+  site_name: [
+    { required: true, message: t('siteNamePlaceholder'), trigger: 'blur' }
+  ],
+  logo: [
+    { required: true, message: t('请选择长方形Logo'), trigger: 'blur' }
+  ],
+  icon: [
+    { required: true, message: t('请选择正方形Logo'), trigger: 'blur' }
+  ],
+  front_end_name: [
+    { required: true, message: t('frontEndNamePlaceholder'), trigger: 'blur' }
+  ]
 })
 
 /**
  * 保存
  */
 const save = async (formEl: FormInstance | undefined) => {
-    if (loading.value || !formEl) return
+  if (loading.value || !formEl) return
 
-    await formEl.validate(async (valid) => {
-        if (valid) {
-            loading.value = true
-            setWebsite(formData).then(() => {
-                loading.value = false
-                appType.value == 'admin' ? useSystemStore().getWebsiteInfo() : useUserStore().getSiteInfo()
-            }).catch(() => {
-                loading.value = false
-            })
-        }
-    })
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      loading.value = true
+      setWebsite(formData).then(() => {
+        loading.value = false
+        appType.value == 'admin' ? useSystemStore().getWebsiteInfo() : useUserStore().getSiteInfo()
+      }).catch(() => {
+        loading.value = false
+      })
+    }
+  })
 }
 </script>
 
 <style lang="scss" scoped>
 :deep(.loading-box .el-loading-spinner){
-    top: 33%;
+  top: 33%;
 }
 </style>
diff --git a/admin/src/app/views/tools/attachment.vue b/admin/src/app/views/tools/attachment.vue
index 20da35e7b..19d55b78b 100644
--- a/admin/src/app/views/tools/attachment.vue
+++ b/admin/src/app/views/tools/attachment.vue
@@ -1,18 +1,18 @@
 <template>
-    <div class="main-container attachment-container">
-        <el-card class="box-card !border-none full-container" shadow="never">
+  <div class="main-container attachment-container">
+    <el-card class="box-card !border-none full-container" shadow="never">
 
-            <div class="flex justify-between items-center mb-[20px]">
-                <span class="text-page-title">{{ pageName }}</span>
-            </div>
+      <div class="flex justify-between items-center mb-[20px]">
+        <span class="text-page-title">{{ pageName }}</span>
+      </div>
 
-            <el-tabs v-model="type" tab-position="top">
-                <el-tab-pane :label="t(tab)" v-for="(tab, index) in attachmentType" :name="tab" :key="index">
-                    <attachment scene="attachment" :type="tab" />
-                </el-tab-pane>
-            </el-tabs>
-        </el-card>
-    </div>
+      <el-tabs v-model="type" tab-position="top">
+        <el-tab-pane :label="t(tab)" v-for="(tab, index) in attachmentType" :name="tab" :key="index">
+          <attachment scene="attachment" :type="tab" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -30,46 +30,46 @@ const type = ref(attachmentType[0])
 
 <style lang="scss">
 .attachment-container {
-    overflow: hidden;
-    min-height: calc(100vh - 94px);
-    background-color: var(--el-bg-color-overlay);
+  overflow: hidden;
+  min-height: calc(100vh - 94px);
+  background-color: var(--el-bg-color-overlay);
 
-    .full-container {
-        height: calc(100vh - 100px);
+  .full-container {
+    height: calc(100vh - 100px);
+  }
+
+  .el-card__body {
+    height: 100%;
+  }
+
+  .el-tabs {
+    display: flex;
+    flex-direction:  column;
+    height: calc(100% - 40px);
+  }
+
+  .el-tabs__content {
+    flex: 1;
+
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+
+  .el-tabs__nav-wrap::after {
+    height: 1px;
+  }
+
+  .main-wrap {
+    border: none;
+
+    .group-wrap {
+      padding: 0 15px 0 0;
     }
 
-    .el-card__body {
-        height: 100%;
-    }
-
-    .el-tabs {
-        display: flex;
-        flex-direction: column-reverse;
-        height: calc(100% - 40px);
-    }
-
-    .el-tabs__content {
-        flex: 1;
-
-        .el-tab-pane {
-            height: 100%;
-        }
-    }
-
-    .el-tabs__nav-wrap::after {
-        height: 1px;
-    }
-
-    .main-wrap {
-        border: none;
-
-        .group-wrap {
-            padding: 0 15px 0 0;
-        }
-
-        .attachment-list-wrap {
-            padding: 0 0 0 15px;
-        }
+    .attachment-list-wrap {
+      padding: 0 0 0 15px;
     }
+  }
 }
 </style>
diff --git a/admin/src/app/views/tools/cloud_compile.vue b/admin/src/app/views/tools/cloud_compile.vue
index 39b324704..c6d39762d 100644
--- a/admin/src/app/views/tools/cloud_compile.vue
+++ b/admin/src/app/views/tools/cloud_compile.vue
@@ -83,7 +83,7 @@
                         温馨提示
                     </span>
                     <span class="text-[12px] text-[#9699B6] ml-[10px]">运行环境要求：需预先配置 Nodejs 环境</span>
-                    <span class="text-[14px]  text-primary cursor-pointer ml-[10px] border-b-[1px] border-solid border-primary"  @click="linkEvent('https://doc.niucloud.com/saas.html?keywords=/di-san-fang-yun-bian-yi-pei-zhi')">搭建教程</span>
+                    <span class="text-[14px]  text-primary cursor-pointer ml-[10px] border-b-[1px] border-solid border-primary"  @click="linkEvent('https://doc.press.niucloud.com/php/saas-framework/use/other/third-party-cloud-compilation.html')">搭建教程</span>
                 </div>
                  <div class="ml-[40px] text-[14px] text-[#4F516D] mb-[18px]">
                     <span>1、下载第三方云编译服务器搭建程序包</span><span class="text-primary cursor-pointer "  @click="linkEvent('https://gitee.com/niucloud-team/niucloud-compile-server')"> niucloud-compile-server</span>
@@ -139,7 +139,7 @@
                 </div>
                 <div>
                     <div class="ml-[40px] text-[#374151] text-[14px] italic">
-                        <span class="text-[16px] italic">#安装依赖：</span>
+                        <span class="text-[16px] italic font-500">#安装依赖：</span>
                         <span class="italic">进入admin端与uniapp端以及web端目录都可执行</span>
                     </div>
                     <div class="ml-[40px] w-[1085px] h-[40px]  bg-[#F9F9FB] rounded-[4px] mt-[10px] flex items-center justify-between border-[#F1F1F8] border-solid border-[1px] px-[10px]">
@@ -149,9 +149,9 @@
                 </div>
                 <div class="mt-[21px]">
                     <div class="ml-[40px] text-[14px] text-[#374151] italic">
-                        <span class="text-[16px] italic">#后台admin端口打包：</span>
+                        <span class="text-[16px] italic font-500">#后台admin端口打包：</span>
                         <span>进入admin目录下执行，执行后编译代码默认移动到系统的niucloud下的</span>
-                        <span class="text-[#F09000] mx-[3px]">public/admin</span>
+                        <span class="text-[#F09000] mx-[3px] font-bold">public/admin</span>
                         <span>目录下</span>
                     </div>
                     <div class="ml-[40px] w-[1085px] h-[40px]  bg-[#F9F9FB] rounded-[4px] mt-[10px] flex items-center justify-between border-[#F1F1F8] border-solid border-[1px] px-[10px]">
@@ -161,9 +161,9 @@
                 </div>
                 <div class="mt-[21px]">
                     <div class="ml-[40px] text-[14px] text-[#374151] italic">
-                        <span class="text-[16px] italic">#使用uniapp打包H5：</span>
+                        <span class="text-[16px] italic font-500">#使用uniapp打包H5：</span>
                         <span>进入uniapp目录下执行，执行后编译代码默认移动到系统niucloud下的</span>
-                        <span class="text-[#F09000] mx-[3px]">public/wap</span>
+                        <span class="text-[#F09000] mx-[3px] font-bold">public/wap</span>
                         <span>目录下</span>
                     </div>
                     <div class="ml-[40px] w-[1085px] h-[40px]  bg-[#F9F9FB] rounded-[4px] mt-[10px] flex items-center justify-between border-[#F1F1F8] border-solid border-[1px] px-[10px]">
@@ -173,9 +173,9 @@
                 </div>
                 <div class="mt-[21px]">
                     <div class="ml-[40px] text-[14px] text-[#374151] italic">
-                        <span class="text-[16px] italic">#使用uniapp打包微信小程序：</span>
+                        <span class="text-[16px] italic font-500">#使用uniapp打包微信小程序：</span>
                         <span>进入uniapp目录下执行，执行后编译代码默认移动到系统niucloud下的</span>
-                        <span class="text-[#F09000] mx-[3px]">uni-app/dist/build/mp-weixin</span>
+                        <span class="text-[#F09000] mx-[3px] font-bold">uni-app/dist/build/mp-weixin</span>
                         <span>目录</span>
                     </div>
                     <div class="ml-[40px] w-[1085px] h-[40px]  bg-[#F9F9FB] rounded-[4px] mt-[10px] flex items-center justify-between border-[#F1F1F8] border-solid border-[1px] px-[10px]">
@@ -185,9 +185,9 @@
                 </div>
                 <div class="mt-[21px]">
                     <div class="ml-[40px] text-[14px] text-[#374151] italic">
-                        <span class="text-[16px] italic">#前台web(pc)端打包:：</span>
+                        <span class="text-[16px] italic font-500">#前台web(pc)端打包:：</span>
                         <span>进入web目录下执行，执行后编译代码默认移动到系统niucloud下的</span>
-                        <span class="text-[#F09000] mx-[3px]">public/web</span>
+                        <span class="text-[#F09000] mx-[3px] font-bold">public/web</span>
                         <span>目录下</span>
                     </div>
                     <div class="ml-[40px] w-[1085px] h-[40px]  bg-[#F9F9FB] rounded-[4px] mt-[10px] flex items-center justify-between border-[#F1F1F8] border-solid border-[1px] px-[10px]">
diff --git a/admin/src/app/views/wxoplatform/weapp_version.vue b/admin/src/app/views/wxoplatform/weapp_version.vue
index 9ec1b24a4..e40609433 100644
--- a/admin/src/app/views/wxoplatform/weapp_version.vue
+++ b/admin/src/app/views/wxoplatform/weapp_version.vue
@@ -146,7 +146,7 @@ const handleFailReason = (data: any) => {
     failReasonDialogShow.value = true
 }
 const helpInfo = () => {
-    window.open('https://doc.niucloud.com/saasUse.html?keywords=/configFAQ/minWaChatUpload')
+    window.open('https://doc.press.niucloud.com/php/saas-framework/use/configFAQ/minWaChatUpload.html')
 }
 
 const deleteVersion = (data: any) => {
diff --git a/admin/src/components/upload-image/index.vue b/admin/src/components/upload-image/index.vue
index 9cf78eb91..d69ece4e0 100644
--- a/admin/src/components/upload-image/index.vue
+++ b/admin/src/components/upload-image/index.vue
@@ -11,7 +11,7 @@
                         <icon name="element Delete" color="#fff" size="18px" @click.stop="removeImage" />
                     </div>
                 </div>
-                <upload-attachment :limit="limit" @confirm="confirmSelect" v-else>
+                <upload-attachment :limit="uploadImgNum" @confirm="confirmSelect" v-else>
                     <div class="w-full h-full flex items-center justify-center flex-col content-wrap">
                         <icon name="element Plus" size="20px" color="var(--el-text-color-secondary)" />
                         <div class="leading-none text-xs mt-[10px] text-secondary">{{ imageText || t('upload.root') }}</div>
@@ -34,7 +34,7 @@
                 </div>
             </div>
             <div class="rounded cursor-pointer overflow-hidden relative border border-dashed border-color" :style="style" v-if="images.data.length < limit">
-                <upload-attachment :limit="limit" @confirm="confirmSelect">
+                <upload-attachment :limit="uploadImgNum" @confirm="confirmSelect">
                     <div class="w-full h-full flex items-center justify-center flex-col content-wrap">
                         <icon name="element Plus" size="20px" color="var(--el-text-color-secondary)" />
                         <div class="leading-none text-xs mt-[10px] text-secondary">{{ imageText || t('upload.root') }}</div>
@@ -105,6 +105,11 @@ const setValue = () => {
     previewImageList = toRaw(images.data).map((url: string) => { return url.indexOf('data:image') != -1 ? url : img(url) })
 }
 
+const uploadImgNum = computed(() => {
+    const num = prop.limit - images.data.length
+    return num
+})
+
 watch(() => value.value, () => {
     if (value.value.indexOf('data:image') != -1) {
         images.data = [value.value]
diff --git a/admin/src/layout/admin/components/aside/index.vue b/admin/src/layout/admin/components/aside/index.vue
index 1faa34ae2..a3a119c7f 100644
--- a/admin/src/layout/admin/components/aside/index.vue
+++ b/admin/src/layout/admin/components/aside/index.vue
@@ -77,10 +77,12 @@ routers.forEach(item => {
     oneMenuData.value.push(item)
 })
 
-const oneMenuActive = ref(oneMenuData.value[0].name)
+const oneMenuActive = ref(oneMenuData.value[0]?.name || '')
 watch(route, () => {
-    twoMenuData.value = route.matched[2].children ?? []
-    oneMenuActive.value = route.matched[1].name == ADMIN_ROUTE.children[0].name ? route.matched[2].name : route.matched[1].name
+    twoMenuData.value = route.matched[2]?.children ?? []
+    if (route.matched[1] && route.matched[2]) {
+        oneMenuActive.value = route.matched[1].name == ADMIN_ROUTE.children[0]?.name ? route.matched[2].name : route.matched[1].name
+    }
     defaultOpeneds.value = twoMenuData.value.map(item => item.name)
 }, { immediate: true })
 
diff --git a/admin/src/layout/admin/components/tabs.vue b/admin/src/layout/admin/components/tabs.vue
index 561663f98..a0fed2005 100644
--- a/admin/src/layout/admin/components/tabs.vue
+++ b/admin/src/layout/admin/components/tabs.vue
@@ -53,7 +53,10 @@ const tabClick = (content: any) => {
 const removeTab = (content: any) => {
     if (route.path == content) {
         const tabs = Object.keys(tabbarStore.tabs)
-        router.push({ path: tabs[tabs.indexOf(content) - 1] })
+        const currentIndex = tabs.indexOf(content)
+        if (currentIndex > 0) {
+            router.push({ path: tabs[currentIndex - 1] })
+        }
     }
     tabbarStore.removeTab(content)
 }
diff --git a/admin/src/layout/bussiness/components/aside/side.vue b/admin/src/layout/bussiness/components/aside/side.vue
index e000ef4d8..77a71b27c 100644
--- a/admin/src/layout/bussiness/components/aside/side.vue
+++ b/admin/src/layout/bussiness/components/aside/side.vue
@@ -94,17 +94,17 @@ routers.forEach(item => {
     }
 
     // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
-    // oneMenuData.value.sort((a, b) => {
-    //     if (a.meta.sort && b.meta.sort) {
-    //         return b.meta.sort - a.meta.sort
-    //     } else if (a.meta.sort) {
-    //         return -1
-    //     } else if (b.meta.sort) {
-    //         return 1
-    //     } else {
-    //         return 0
-    //     }
-    // })
+    oneMenuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {
+            return 1
+        } else {
+            return 0
+        }
+    })
 })
 
 // 多应用时将应用插入菜单
@@ -119,17 +119,17 @@ if (siteInfo?.apps.length > 1) {
     oneMenuData.value.unshift(...routers)
 
     // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
-    // oneMenuData.value.sort((a, b) => {
-    //     if (a.meta.sort && b.meta.sort) {
-    //         return b.meta.sort - a.meta.sort
-    //     } else if (a.meta.sort) {
-    //         return -1
-    //     } else if (b.meta.sort) {
-    //         return 1
-    //     } else {
-    //         return 0
-    //     }
-    // })
+    oneMenuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {
+            return 1
+        } else {
+            return 0
+        }
+    })
 }
 
 const oneMenuActive = ref(route.matched[1].name)
diff --git a/admin/src/layout/bussiness/components/header/index.vue b/admin/src/layout/bussiness/components/header/index.vue
index 70b65e93d..dfcdd325f 100644
--- a/admin/src/layout/bussiness/components/header/index.vue
+++ b/admin/src/layout/bussiness/components/header/index.vue
@@ -86,7 +86,7 @@
         <input type="hidden" v-model="comparisonToken">
         <input type="hidden" v-model="comparisonSiteId">
 
-        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
+        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :append-to-body="true">
             <span>{{ t('layout.detectionLoginContent') }}</span>
             <template #footer>
                 <span class="dialog-footer">
diff --git a/admin/src/layout/darkside/components/aside/side.vue b/admin/src/layout/darkside/components/aside/side.vue
index e8c1f9a01..545d9ffef 100644
--- a/admin/src/layout/darkside/components/aside/side.vue
+++ b/admin/src/layout/darkside/components/aside/side.vue
@@ -94,17 +94,17 @@ routers.forEach((item, index) => {
     }
 
     // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
-    // menuData.value.sort((a, b) => {
-    //     if (a.meta.sort && b.meta.sort) {
-    //         return b.meta.sort - a.meta.sort
-    //     } else if (a.meta.sort) {
-    //         return -1
-    //     } else if (b.meta.sort) {
-    //         return 1
-    //     } else {
-    //         return 0
-    //     }
-    // })
+    menuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {
+            return 1
+        } else {
+            return 0
+        }
+    })
 })
 
 // 多应用时将应用插入菜单
@@ -119,17 +119,17 @@ if (siteInfo?.apps.length > 1) {
     menuData.value.unshift(...routers)
 
     // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
-    // menuData.value.sort((a, b) => {
-    //     if (a.meta.sort && b.meta.sort) {
-    //         return b.meta.sort - a.meta.sort
-    //     } else if (a.meta.sort) {
-    //         return -1
-    //     } else if (b.meta.sort) {
-    //         return 1
-    //     } else {
-    //         return 0
-    //     }
-    // })
+    menuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {
+            return 1
+        } else {
+            return 0
+        }
+    })
 }
 </script>
 
diff --git a/admin/src/layout/darkside/components/header/index.vue b/admin/src/layout/darkside/components/header/index.vue
index 0b0089909..1176e32ee 100644
--- a/admin/src/layout/darkside/components/header/index.vue
+++ b/admin/src/layout/darkside/components/header/index.vue
@@ -86,7 +86,7 @@
         <input type="hidden" v-model="comparisonToken">
         <input type="hidden" v-model="comparisonSiteId">
 
-        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
+        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :append-to-body="true">
             <span>{{ t('layout.detectionLoginContent') }}</span>
             <template #footer>
                 <span class="dialog-footer">
diff --git a/admin/src/layout/default/components/aside/menu-item.vue b/admin/src/layout/default/components/aside/menu-item.vue
index cb4d8a7a8..7577e8d78 100644
--- a/admin/src/layout/default/components/aside/menu-item.vue
+++ b/admin/src/layout/default/components/aside/menu-item.vue
@@ -184,10 +184,10 @@ const handleJump = (routeName: string) => {
         routeName = 'addon_list'
     }
     // 跳转时添加随机查询参数（用于触发页面感知）
-    const query = route.name === routeName 
-      ? { refresh: Date.now() } // 相同路由时添加随机参数
-      : {};
-    
+    const query = route.name === routeName
+        ? { refresh: Date.now() } // 相同路由时添加随机参数
+        : {};
+
     // 执行跳转
     router.push({ name: routeName, query });
 }
diff --git a/admin/src/layout/default/components/aside/side.vue b/admin/src/layout/default/components/aside/side.vue
index 25a4db932..246121403 100644
--- a/admin/src/layout/default/components/aside/side.vue
+++ b/admin/src/layout/default/components/aside/side.vue
@@ -30,8 +30,8 @@ import useSystemStore from '@/stores/modules/system'
 import useUserStore from '@/stores/modules/user'
 import menuItem from './menu-item.vue'
 import { img } from '@/utils/common'
-import { findFirstValidRoute ,formatRouters} from '@/router/routers'
-import { getShowApp,getShowSpecialMenu} from '@/app/api/site'
+import { findFirstValidRoute, formatRouters } from '@/router/routers'
+import { getShowApp, getShowSpecialMenu } from '@/app/api/site'
 
 import storage from '@/utils/storage'
 
@@ -52,9 +52,9 @@ const appList = ref<Record<string, any>[]>([])
 const getAppList = async () => {
     const res = await getShowApp()
     appList.value = res.data
-    
     storage.set({ key: 'defaultAppList', data: appList.value })
 }
+
 const specialList = ref<Record<string, any>[]>([])
 const getShowSpecialMenuList = async () => {
     const res = await getShowSpecialMenu()
@@ -64,7 +64,6 @@ const getShowSpecialMenuList = async () => {
     storage.set({ key: 'specialAppList', data: specialList.value })
 }
 
-
 onMounted(() => {
     getAppList()
     getShowSpecialMenuList()
@@ -97,17 +96,17 @@ routers.forEach(item => {
 
     // console.log('menuData', menuData.value)
     // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
-    // menuData.value.sort((a, b) => {
-    //     if (a.meta.sort && b.meta.sort) {
-    //         return b.meta.sort - a.meta.sort
-    //     } else if (a.meta.sort) {
-    //         return -1
-    //     } else if (b.meta.sort) {
-    //         return 1
-    //     } else {
-    //         return 0
-    //     }
-    // })
+    menuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {
+            return 1
+        } else {
+            return 0
+        }
+    })
 })
 
 // 多应用时将应用插入菜单
@@ -122,17 +121,17 @@ if (siteInfo?.apps.length > 1) {
     menuData.value.unshift(...routers)
 
     // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
-    // menuData.value.sort((a, b) => {
-    //     if (a.meta.sort && b.meta.sort) {
-    //         return b.meta.sort - a.meta.sort
-    //     } else if (a.meta.sort) {
-    //         return -1
-    //     } else if (b.meta.sort) {
-    //         return 1
-    //     } else {
-    //         return 0
-    //     }
-    // })
+    menuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {
+            return 1
+        } else {
+            return 0
+        }
+    })
 }
 </script>
 
diff --git a/admin/src/layout/default/components/header/index.vue b/admin/src/layout/default/components/header/index.vue
index 33b676001..43cd267ed 100644
--- a/admin/src/layout/default/components/header/index.vue
+++ b/admin/src/layout/default/components/header/index.vue
@@ -87,7 +87,7 @@
         <input type="hidden" v-model="comparisonToken">
         <input type="hidden" v-model="comparisonSiteId">
 
-        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
+        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :append-to-body="true">
             <span>{{ t('layout.detectionLoginContent') }}</span>
             <template #footer>
                 <span class="dialog-footer">
diff --git a/admin/src/layout/lightside/components/aside/index.vue b/admin/src/layout/lightside/components/aside/index.vue
new file mode 100644
index 000000000..b4759e22d
--- /dev/null
+++ b/admin/src/layout/lightside/components/aside/index.vue
@@ -0,0 +1,433 @@
+<template>
+  <div :class="['layout-aside ease-in duration-200 flex box-border', { 'bright': !dark}]">
+    <div class="flex flex-col border-0 border-r-[1px] border-solid border-[var(--el-color-info-light-8)] box-border overflow-hidden">
+      <div :class="['w-[150px] one-menu hide-scrollbar', { 'expanded': systemStore.menuIsCollapse  }]" >
+        <div class="flex flex-col items-center">
+          <template v-for="(item, index) in oneMenuData">
+            <div v-if="item.meta.show" :title="systemStore.menuIsCollapse ? item.meta.title : item.meta.short_title" class="menu-item my-[2px] p-2 flex w-full box-border cursor-pointer relative" :class="{'is-active':oneMenuActive===item.original_name,'hover-left': systemStore.menuIsCollapse, 'vertical': !systemStore.menuIsCollapse , 'horizontal': systemStore.menuIsCollapse }" :style="{ height: (systemStore.menuIsCollapse ) ? '40px' : '55px' }" @click="router.push({ name: item.name })">
+              <div class="w-[20px] h-[20px] flex items-center justify-center menu-icon" :class="{'is-active':oneMenuActive===item.original_name}">
+                <template v-if="item.meta.icon">
+                  <el-image class="w-[20px] h-[20px] overflow-hidden" :src="item.meta.icon" fit="fill" v-if="isUrl(item.meta.icon)"/>
+                  <icon :name="item.meta.icon" size="20px" color="#1D1F3A" v-else />
+                </template>
+                <icon v-else :name="'iconfont iconshezhi1'" color="#1D1F3A" />
+              </div>
+              <div v-if="systemStore.menuIsCollapse" class="text-left text-[14px] mt-[3px] w-[75px] using-hidden ml-[10px]">{{ item.meta.title || item.meta.short_title }}</div>
+              <div v-else class="text-center text-[12px] using-hidden mt-1">{{ item.meta.short_title || item.meta.title }}</div>
+            </div>
+          </template>
+        </div>
+      </div>
+
+    </div>
+    <div class="flex flex-col two-menu w-[185px] " v-if="twoMenuData.length">
+      <el-scrollbar class="flex-1" >
+        <el-menu :default-active="route.name" :router="true" class="aside-menu">
+          <menu-item v-for="(route, index) in twoMenuData" :routes="route" :key="index" :isNewVersion="isNewVersion" />
+        </el-menu>
+        <div class="h-[48px]"></div>
+      </el-scrollbar>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import useSystemStore from '@/stores/modules/system'
+import useUserStore from '@/stores/modules/user'
+import { findFirstValidRoute, formatRouters } from "@/router/routers"
+import { isUrl } from '@/utils/common'
+import menuItem from './menu-item.vue'
+import { getVersions } from "@/app/api/auth"
+import { getFrameworkVersionList } from "@/app/api/module"
+import storage from '@/utils/storage'
+
+const route = useRoute()
+const userStore = useUserStore()
+const routers = userStore.routers
+const systemStore = useSystemStore()
+const siteInfo = userStore.siteInfo
+const router = useRouter()
+const addonRouters: Record<string, any> = {}
+const addonIndexRoute = userStore.addonIndexRoute
+const dark = computed(() => {
+  return systemStore.dark
+})
+
+const twoMenuData = ref<Record<string, any>[]>([])
+const oneMenuData = ref<Record<string, any>[]>([])
+routers.forEach(item => {
+  item.original_name = item.name
+  if (item.meta.addon == '') {
+    if (item.meta.attr == '') {
+      if (item.children && item.children.length) {
+        item.name = findFirstValidRoute(item.children)
+      }
+      oneMenuData.value.push(item)
+    }
+  } else if (item.meta.addon != '' && siteInfo?.apps.length <= 1 && siteInfo?.apps[0].key == item.meta.addon && item.meta.show) {
+    if (item.children) {
+      item.children.forEach((citem: Record<string, any>) => {
+        citem.original_name = citem.name
+        if (citem.children && citem.children.length) {
+          citem.name = findFirstValidRoute(citem.children)
+        }
+      })
+      oneMenuData.value.unshift(...item.children)
+    } else {
+      oneMenuData.value.unshift(item)
+    }
+  } else {
+    addonRouters[item.meta.addon] = item
+  }
+
+  // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
+  oneMenuData.value.sort((a, b) => {
+    if (a.meta.sort && b.meta.sort) {
+      return b.meta.sort - a.meta.sort
+    } else if (a.meta.sort) {
+      return -1
+    } else if (b.meta.sort) {
+      return 1
+    } else {
+      return 0
+    }
+  })
+})
+
+// 多应用时将应用插入菜单
+if (siteInfo?.apps.length > 1) {
+  const routers:Record<string, any>[] = []
+  siteInfo?.apps.forEach((item: Record<string, any>) => {
+    if (addonRouters[item.key]) {
+      addonRouters[item.key].name = addonIndexRoute[item.key]
+      routers.push(addonRouters[item.key])
+    }
+  })
+  oneMenuData.value.unshift(...routers)
+
+  // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
+  oneMenuData.value.sort((a, b) => {
+    if (a.meta.sort && b.meta.sort) {
+      return b.meta.sort - a.meta.sort
+    } else if (a.meta.sort) {
+      return -1
+    } else if (b.meta.sort) {
+      return 1
+    } else {
+      return 0
+    }
+  })
+}
+
+const oneMenuActive = ref(route.matched[1].name)
+// 从 addonKeys 中提取所有需要匹配的 key
+const getAddonAllKeys = (addonData) => {
+  if (!addonData || typeof addonData !== 'object') return [];
+  const allKeys = [];
+  Object.values(addonData).forEach(category => {
+    if (Array.isArray(category.list)) {
+      category.list.forEach(item => {
+        if (item.key) allKeys.push(item.key);
+      });
+    }
+  });
+  return allKeys;
+};
+
+// 处理 specialMenusKeys 子菜单 show 的方法
+const handleSpecialMenus = () => {
+  const specialMenusKeys = storage.get('specialAppList')
+  if (Array.isArray(specialMenusKeys) && specialMenusKeys.length) {
+    const processedSpecialMenus = JSON.parse(JSON.stringify(specialMenusKeys));
+    const activeAppKey = storage.get('activeAppKey');
+
+    // 收集所有特殊菜单的name
+    processedSpecialMenus.forEach(menu => {
+      if (menu.children && Array.isArray(menu.children)) {
+        const traverseChildren = (children) => {
+          children.forEach(child => {
+            if (child && child.is_show !== undefined) {
+              child.is_show = (child.menu_key === activeAppKey) ? 1 : 0;
+            }
+          });
+        };
+        traverseChildren(menu.children);
+      }
+    });
+    // 过滤掉 children 为空的特殊菜单
+    const filteredSpecialMenus = processedSpecialMenus.filter(menu => {
+      return menu.children && menu.children.length > 0;
+    });
+    return formatRouters(filteredSpecialMenus);
+  }
+  return [];
+};
+watch(route, () => {
+  if (route.meta.attr != '') {
+    oneMenuActive.value = route.matched[1].name
+    twoMenuData.value = route.matched[1].children ?? []
+  } else {
+    // 多应用
+    if (siteInfo?.apps.length > 1) {
+      twoMenuData.value = route.matched[2].children
+      oneMenuActive.value = route.matched[2].name
+    } else {
+      // 单应用
+      const oneMenu = route.matched[2]
+      if (oneMenu.meta.addon == '') {
+        oneMenuActive.value = route.matched[2].name
+        twoMenuData.value = route.matched[2].children ?? []
+      } else {
+        if (oneMenu.meta.addon == siteInfo?.apps[0].key) {
+          oneMenuActive.value = route.matched[3].name
+          twoMenuData.value = route.matched[3].children ?? []
+        } else {
+          oneMenuActive.value = route.matched[2].name
+          twoMenuData.value = route.matched[2].children ?? []
+        }
+      }
+    }
+  }
+  // const addonKeys = storage.get('defaultAppList')
+  // const addonAllKeys = getAddonAllKeys(addonKeys)
+  // twoMenuData.value = twoMenuData.value.filter((child) =>{
+  //     return !child.name || !addonAllKeys.includes(child.name);
+  // })
+  // if(oneMenuActive.value == 'addon'){
+  //     // 处理特殊菜单并插入到 twoMenuData 中（与 addon_list 同级）
+  //     const processedSpecialMenus = handleSpecialMenus();
+  //         if (processedSpecialMenus.length) {
+  //         // 先找到 addon_list 在 twoMenuData 中的索引
+  //         const addonListIndex = twoMenuData.value.findIndex(
+  //             (item) => item.name === 'addon_list'
+  //         );
+  //         if (addonListIndex !== -1) {
+  //             // 将特殊菜单插入到 addon_list 后面（同级）
+  //             twoMenuData.value.splice(
+  //             addonListIndex + 1,
+  //             0,
+  //             ...processedSpecialMenus
+  //             );
+  //         } else {
+  //             // 如果没有 addon_list，直接将特殊菜单添加到 twoMenuData 中
+  //             twoMenuData.value.push(...processedSpecialMenus);
+  //         }
+  //     }
+  // }
+}, { immediate: true })
+
+const frameworkVersionList = ref([])
+const isNewVersion = computed(() => {
+  if (!newVersion.value || newVersion.value.version_no === version.value) {
+    return false;
+  }
+
+  // 将版本号转为字符串再处理
+  const currentVersionStr = String(version.value);
+  const latestVersionStr = String(newVersion.value.version_no);
+  // 移除点号并转为数字比较
+  const currentVersionNum = parseInt(currentVersionStr.replace(/\./g, ''), 10);
+  const latestVersionNum = parseInt(latestVersionStr.replace(/\./g, ''), 10);
+  return latestVersionNum > currentVersionNum;
+})
+
+const getFrameworkVersionListFn = () => {
+  getFrameworkVersionList().then(({ data }) => {
+    frameworkVersionList.value = data
+  }).catch(() => {
+  })
+}
+getFrameworkVersionListFn()
+
+const newVersion: any = computed(() => {
+  return frameworkVersionList.value.length ? frameworkVersionList.value[0] : null
+})
+const version = ref('')
+const getVersionsInfo = () => {
+  getVersions().then((res) => {
+    version.value = res.data.version.version
+  })
+}
+getVersionsInfo()
+
+</script>
+
+<style lang="scss">
+.one-menu{
+  padding: 20px 10px 10px;
+  width: 78px;
+  overflow-y: auto;
+  // transition: width 0.1s ease-out;
+  &.expanded {
+    width: 185px;
+    padding: 18px 15px 15px;
+  }
+  .menu-item{
+    border-radius: 2px;
+    justify-content: center;
+    &.vertical {
+      width: 55px;
+      height: 55px;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &.horizontal {
+      flex-direction: row;
+      align-items: center;
+    }
+    .menu-icon {
+      // background-color: transparent; /* 默认无背景色 */
+      color: #1D1F3A;
+    }
+
+    // .menu-icon.is-active {
+    // background-color: var(--el-color-primary); /* 选中时背景色 */
+    // color: white; /* 选中时图标颜色变白 */
+    // border-radius: 4px; /* 可选：使图标背景为圆形 */
+    // }
+
+    &:hover{
+      background-color: #EAEBF0 !important;
+      border-radius: 6px;
+      // background-color: var(--el-color-primary-light-9) !important;
+      // color:var(--el-color-primary);
+    }
+    &.is-active{
+      background-color: #EAEBF0 !important;
+      border-radius: 6px;
+      // background-color: var(--el-color-primary-light-9) !important;
+      // border: none;
+      // color:var(--el-color-primary);
+    }
+    span{
+      font-size: 14px;
+      margin-left: 8px;
+    }
+  }
+  .menu-item.hover-left {
+    justify-content: flex-start;
+    padding-left: 5px;
+  }
+  &.expanded .menu-item .text-center {
+    opacity: 1;
+  }
+  .el-menu{
+    border: 0;
+  }
+  .el-scrollbar{
+    height: calc(100vh - 65px);
+  }
+}
+.two-menu{
+  .aside-menu:not(.el-menu--collapse) {
+    width: 185px;
+    border: 0;
+    padding-top: 15px;
+    .el-menu-item{
+      height: 40px;
+      margin: 4px 15px;
+      padding: 0 8px !important;
+      border-radius: 2px;
+      span{
+        margin-left: 8px;
+        font-size: 14px;
+      }
+      &.is-active{
+        background-color: #EAEBF0 !important;
+        border-radius: 6px;
+        color: inherit;
+        // background-color: var(--el-color-primary-light-9) !important;
+      }
+      &:hover{
+        background-color: #EAEBF0 !important;
+        border-radius: 6px;
+        // background-color: var(--el-color-primary-light-9) !important;
+        // color: var(--el-color-primary);
+      }
+    }
+    .el-sub-menu{
+      width: 185px;
+      margin: 4px 0;
+      // margin-bottom: 8px;
+      .el-sub-menu__title{
+        margin: 0 15px;
+        height: 40px;
+        padding-left: 8px;
+        border-radius: 2px;
+        span{
+          height: 40px;
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+        }
+        &:hover{
+          background-color:#EAEBF0 !important;
+          border-radius: 6px;
+          // background-color: var(--el-color-primary-light-9) !important;
+          // color: var(--el-color-primary);
+        }
+        .el-icon.el-sub-menu__icon-arrow{
+          right: 5px;
+        }
+      }
+      .el-menu-item{
+        padding-left: 25px !important;
+      }
+    }
+  }
+}
+
+.logo-wrap {
+  padding: 0;
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+
+  .logo {
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .logo-title {
+    flex: 1;
+    width: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: var(--el-font-size-base);
+  }
+}
+// :deep(.el-scrollbar__bar){
+//     display: none !important;
+// }
+// .layout-aside .el-scrollbar__wrap--hidden-default, .layout-aside .el-scrollbar{
+//     overflow: inherit !important;
+// }
+// 隐藏滚动条
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+  /* Chrome/Safari/Edge */
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  /* IE/Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+// .layout-aside .menu-item.is-active{
+//     position: relative;
+//     &:after{
+//         content: "";
+//         position: absolute;
+//         top: 0;
+//         bottom: 0;
+//         width: 1px;
+//         background: var(--el-color-primary);
+//         right: -1px;
+//     }
+// }
+</style>
diff --git a/admin/src/layout/lightside/components/aside/menu-item.vue b/admin/src/layout/lightside/components/aside/menu-item.vue
new file mode 100644
index 000000000..03ecab0e9
--- /dev/null
+++ b/admin/src/layout/lightside/components/aside/menu-item.vue
@@ -0,0 +1,80 @@
+<template>
+    <template v-if="meta.show">
+        <el-sub-menu v-if="routes.children" :index="String(routes.name)">
+            <template #title>
+                <div v-if="meta.icon && props.level != 2" class="w-[13px] h-[13px] mr-[10rpx] relative flex justify-center items-center">
+                    <icon v-if="meta.icon && props.level != 2" :name="meta.icon" color="#1D1F3A" class="absolute !w-auto" />
+                </div>
+                <span class="using-hidden" :class="['ml-[10px]', {'text-[15px]': routes.meta.class == 1}, {'text-[14px]': routes.meta.class != 1}]">{{ meta.title }}</span>
+            </template>
+            <menu-item v-for="(route, index) in routes.children" :routes="route" :level="props.level + 1"  :key="index" :isNewVersion="props.isNewVersion" />
+        </el-sub-menu>
+        <el-menu-item v-else :index="String(routes.name)" :route="routes.path">
+            <template #title>
+                <div v-if="meta.icon && props.level != 2" class="w-[13px] h-[13px] mr-[10rpx] relative flex justify-center items-center">
+                    <icon v-if="meta.icon && props.level != 2"  color="#1D1F3A" :name="meta.icon" class="absolute !w-auto" />
+                </div>
+                <span class="using-hidden" :class="[{'text-[15px]': routes.meta.class == 1}, {'text-[14px]': routes.meta.class != 1}, {'ml-[10px]': routes.meta.class == 2, 'ml-[15px]': routes.meta.class == 3}]">{{ meta.title }}
+                    <div v-if="meta.view=='app/upgrade'&& props.isNewVersion" class="w-[7px] h-[7px] bg-[#DA203E] absolute flex items-center justify-center rounded-full top-[10px] right-[65px]"></div>
+                </span>
+            </template>
+        </el-menu-item>
+    </template>
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/lang'
+import { ref, computed } from 'vue'
+import menuItem from './menu-item.vue'
+import { CollectionTag } from '@element-plus/icons-vue'
+
+const props = defineProps({
+    routes: {
+        type: Object,
+        required: true
+    },
+    level: {
+        type: Number,
+        default: 1
+    },
+    isNewVersion: {
+        type: Boolean,
+        default: false
+    }
+})
+const meta = computed(() => props.routes.meta)
+</script>
+
+<style lang="scss">
+.el-sub-menu{
+    .el-icon{
+        width: auto;
+    }
+    li{
+        font-size: 15px;
+    }
+}
+.el-alert .el-alert__description{
+    margin-top: 0;
+}
+.index-item {
+	border: 1px solid;
+	border-color: var(--el-color-primary);
+    &:hover {
+		color: #fff;
+        background-color: var(--el-color-primary);
+    }
+}
+
+</style>
+<style scoped>
+.using-hidden {
+    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    white-space: nowrap;
+}
+</style>
diff --git a/admin/src/layout/lightside/components/aside/side.vue b/admin/src/layout/lightside/components/aside/side.vue
new file mode 100644
index 000000000..cf3b63ef2
--- /dev/null
+++ b/admin/src/layout/lightside/components/aside/side.vue
@@ -0,0 +1,141 @@
+<template>
+    <el-container class="w-100" :class="[{ 'sidebar-dark-mode': systemStore.sidebar == 'twoType' }, { 'sidebar-brightness-mode': systemStore.sidebar == 'oneType' }]">
+        <el-main class="menu-wrap">
+            <el-scrollbar>
+                <el-menu :default-active="menuActive" :router="true" class="aside-menu h-full" :unique-opened="true" :collapse="systemStore.menuIsCollapse">
+                    <menu-item v-for="(route, index) in userStore.routers[0].children" :routes="route" :key="index" />
+                </el-menu>
+                <div class="h-[48px]"></div>
+            </el-scrollbar>
+        </el-main>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import useSystemStore from '@/stores/modules/system'
+import useUserStore from '@/stores/modules/user'
+import menuItem from './menu-item.vue'
+
+const logo = ref('@/app/assets/images/login_logo.png')
+const systemStore = useSystemStore()
+const userStore = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const siteInfo = userStore.siteInfo
+
+const menuActive = computed(() => String(route.name))
+
+userStore.routers = userStore.routers.filter((item, index) => {
+    if (item.name == 'setting_manage') {
+        // item.meta.class = 1
+        if (item.children) {
+            item.children.forEach((subItem, subIndex) => {
+                subItem.meta.class = 1
+                if (subItem.children) {
+                    subItem.children.forEach((threeItem, threeIndex) => {
+                        threeItem.meta.class = 2
+                    })
+                }
+            })
+        }
+        return item.children
+    }
+})
+
+// userStore.routers.forEach((item, index) => {
+//     item.meta.class = 1
+//     if (item.children) {
+//         item.children.forEach((subItem, subIndex) => {
+//             subItem.meta.class = 2
+//             if (subItem.children) {
+//                 subItem.children.forEach((threeItem, threeIndex) => {
+//                     threeItem.meta.class = 3
+//                 })
+//             }
+//         })
+//     }
+// })
+</script>
+
+<style lang="scss">
+.logo-wrap {
+    padding: 0;
+    display: flex;
+    white-space: nowrap;
+    align-items: center;
+
+    .logo {
+        height: 100%;
+        box-sizing: border-box;
+    }
+
+    .logo-title {
+        flex: 1;
+        width: 0;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        font-size: var(--el-font-size-base);
+    }
+}
+
+.menu-wrap {
+    flex: 1 !important;
+    padding: 0 !important;
+
+    .el-menu {
+        border-right: 0 !important;
+    }
+}
+
+.sidebar-dark-mode {
+    background-color: #191a23;
+
+    &>.logo-wrap {
+        .logo>i {
+            font-size: 20px;
+        }
+
+        border-bottom: 2px solid #101117;
+    }
+
+    .el-menu {
+        background-color: #191a23;
+
+        .el-sub-menu {
+            background: transparent !important;
+        }
+
+        .el-sub-menu__title,
+        .el-menu-item {
+            background: transparent !important;
+            color: #B7B7ba;
+
+            &:hover {
+                background-color: transparent !important;
+                color: #fff !important;
+            }
+        }
+
+        .el-menu-item.is-active {
+            color: #fff !important;
+            background-color: var(--el-color-primary) !important;
+        }
+
+        li::after {
+            content: "";
+            width: 0;
+            height: 0;
+        }
+    }
+}
+
+.sidebar-brightness-mode {
+    &>.logo-wrap {
+        .logo>i {
+            font-size: 20px;
+        }
+    }
+}
+</style>
diff --git a/admin/src/layout/lightside/components/header/index.vue b/admin/src/layout/lightside/components/header/index.vue
new file mode 100644
index 000000000..6cdeb872b
--- /dev/null
+++ b/admin/src/layout/lightside/components/header/index.vue
@@ -0,0 +1,289 @@
+<template>
+    <el-container class="h-[64px] w-full layout-admin flex items-center justify-between pr-[15px] border-b-[1px] border-solid border-[var(--el-color-info-light-8)]" >
+        <!-- :class="['h-full px-[10px]',{'layout-header border-b border-color': !dark}]"  -->
+        <div class="flex items-center">
+            <!-- <div class="navbar-item flex items-center h-full cursor-pointer" @click="toggleMenuCollapse">
+                <icon name="element Expand" v-if="systemStore.menuIsCollapse" />
+                <icon name="element Fold" v-else />
+            </div> -->
+            <div class="flex justify-center items-center flex-shrink-0" :class="{'w-[185px]': systemStore.menuIsCollapse,'w-[78px]': !systemStore.menuIsCollapse}">
+                <div class="w-full h-[40px] overflow-hidden">
+                    <el-image style="width: 100%; height: 100%" :src="img(logoUrl)" fit="contain" v-if="!systemStore.menuIsCollapse">
+                        <template #error>
+                            <div class="flex justify-center items-center w-full h-full"><img class="max-w-[70px]" src="@/app/assets/images/logo.default.png" alt=""  object-fit="contain"></div>
+                        </template>
+                    </el-image>
+                    <el-image style="width: 100%; height: 100%" :src="img(longLogoUrl)" fit="contain" v-else>
+                        <template #error>
+                            <div class="flex justify-center items-center w-full h-full"><img class="max-w-[180px]" src="@/app/assets/images/logo.default.png" alt=""  object-fit="contain"></div>
+                        </template>
+                    </el-image>
+                </div>
+            </div>
+            <div class="left-panel flex items-center text-[14px] leading-[1]">
+                <div class="navbar-item flex items-center h-full cursor-pointer" @click="toggleMenuCollapse">
+                    <icon name="element Fold" v-if="systemStore.menuIsCollapse" />
+                    <icon name="element Expand" v-else />
+                </div>
+                <!-- 刷新当前页 -->
+                <div class="navbar-item flex items-center h-full cursor-pointer" @click="refreshRouter">
+                    <icon name="element Refresh" />
+                </div>
+                <!-- 面包屑导航 -->
+                <div class="flex items-center h-full pl-[10px] hidden-xs-only">
+                    <el-breadcrumb separator="/">
+                        <el-breadcrumb-item v-for="(route, index) in breadcrumb" :key="index" :to="route.path" class="inter">{{route.meta.title }}</el-breadcrumb-item>
+                    </el-breadcrumb>
+                </div>
+            </div>
+        </div>
+        <!-- <div>
+            <el-input placeholder="搜索站点或应用"  v-model.trim="keywords" />
+        </div> -->
+
+        <div>
+            <div class="right-panel h-full flex items-center justify-end">
+                <div class="flex items-center flex-shrink-0 hidden-xs-only">
+                    <el-dropdown trigger="hover" :hide-on-click="false" popper-class="site-info-wrap" class="mr-[8px]">
+                        <!-- 状态 -->
+                        <div class="mx-[8px] bg-[#f6f6f6] border-[1px] border-solid border-[#eee] rounded-[4px] px-[9px] py-[6px] flex items-center">
+                            <span class="mr-[6px] text-[12px] !text-[#333]">{{siteInfo.site_name}}</span>
+                            <span class="!text-[10px] text-[#f56c6c]" :class="{'!text-[#67c23a]': siteInfo.status == 1, '!text-[#f56c6c]': siteInfo.status == 3}">{{ siteInfo.status_name }}</span>
+                        </div>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item>
+                                    <!-- 站点id -->
+                                    <div class="text-[14px]">站点编号：{{siteInfo.site_id}}</div>
+                                </el-dropdown-item>
+                                <el-dropdown-item>
+                                    <!-- 到期时间 -->
+                                    <div v-if="siteInfo.expire_time == 0" class="text-[14px]">到期时间：永久</div>
+                                    <div v-else class="text-[14px]">到期时间：{{ siteInfo.expire_time }}</div>
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </div>
+                <div class="flex items-center flex-shrink-0 hidden-xs-only">
+                    <el-popover placement="bottom" :width="330" trigger="click" v-model:visible="isMenuSearch" >
+                        <template #reference>
+                            <i class="iconfont icona-sousuoV6xx-36 cursor-pointer px-[8px] !text-[14px]"></i>
+                        </template>
+                        <template #default>
+                            <div class="flex items-center">
+                                <el-select v-model="selectedRoute"  filterable class="!w-[250px] mr-[20px] menu-select" :teleported="false" clearable  @change="handleRouteSelect">
+                                    <el-option v-for="item in flatRoutes" :key="item.name" :label="item.full_title" :value="item.name" >
+                                    </el-option>
+                                </el-select>
+                                <el-button type="primary" link @click="isMenuSearch = false">{{t('取消')}}</el-button>
+                            </div>
+                        </template>
+                    </el-popover>
+                </div>
+                <!-- 预览 只有站点时展示-->
+                <i class="iconfont iconicon_huojian1 cursor-pointer px-[8px]" :title="t('visitWap')" @click="toPreview"></i>
+                <i class="iconfont iconlingdang-xianxing cursor-pointer px-[8px]" :title="t('newInfo')" v-if="appType == 'site'"></i>
+                <!-- 切换语言 -->
+                <!-- <div class="navbar-item flex items-center h-full cursor-pointer">
+                    <switch-lang />
+                </div> -->
+                <!-- 切换全屏 -->
+                <!-- <div class="navbar-item flex items-center h-full cursor-pointer" @click="toggleFullscreen">
+                    <icon name="iconfont icontuichuquanping" v-if="isFullscreen" />
+                    <icon name="iconfont iconquanping" v-else />
+                </div> -->
+                <!-- 布局设置 -->
+                <div class="navbar-item flex items-center h-full cursor-pointer">
+                    <layout-setting />
+                </div>
+                <!-- 用户信息 -->
+                <div class="navbar-item flex items-center h-full cursor-pointer">
+                    <user-info />
+                </div>
+            </div>
+        </div>
+
+        <input type="hidden" v-model="comparisonToken" />
+        <input type="hidden" v-model="comparisonSiteId" />
+
+        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :append-to-body="true">
+            <span>{{ t('layout.detectionLoginContent') }}</span>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="detectionLoginFn">{{ t('layout.detectionLoginOperation') }}</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import useUserStore from '@/stores/modules/user'
+import useAppStore from '@/stores/modules/app'
+import useSystemStore from '@/stores/modules/system'
+import { useRoute, useRouter } from 'vue-router'
+import { img } from '@/utils/common'
+import { t } from '@/lang'
+import storage from '@/utils/storage'
+import userInfo from './user-info.vue'
+import layoutSetting from './layout-setting.vue'
+
+const systemStore = useSystemStore()
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const userStore = useUserStore()
+const routers = userStore.routers
+const siteInfo:any = computed(() => {
+    return userStore.siteInfo
+})
+
+const logoUrl = computed(() => {
+    return userStore.siteInfo.icon ? userStore.siteInfo.icon : systemStore.website.icon
+})
+const longLogoUrl = computed(() => {
+    return userStore.siteInfo.logo ? userStore.siteInfo.logo : systemStore.website.logo
+})
+// 检测登录 start
+const detectionLoginDialog = ref(false)
+const comparisonToken = ref('')
+const comparisonSiteId = ref('')
+if (storage.get('comparisonTokenStorage')) {
+    comparisonToken.value = storage.get('comparisonTokenStorage')
+}
+if (storage.get('comparisonSiteIdStorage')) {
+    comparisonSiteId.value = storage.get('comparisonSiteIdStorage')
+}
+// 监听标签页面切换
+document.addEventListener('visibilitychange', e => {
+    if (document.visibilityState === 'visible' && (comparisonSiteId.value != storage.get('siteId') || comparisonToken.value != storage.get('token'))) {
+        detectionLoginDialog.value = true
+    }
+})
+
+const getParentTitleChain = (meta: any) => {
+    let titles = []
+    let current = meta?.parent_route
+
+    while (current) {
+        if (current.short_title) {
+        titles.unshift(current.short_title)
+        }
+        current = current.parent_route
+    }
+
+    return titles.join(' - ');
+};
+
+// 2. 改造 flattenRoutes：增加 parentShow 参数，传递父级 show 状态
+const flattenRoutes = (routes: any, parent = null, parentShow = 1) => {
+    let flat = [];
+
+    routes.forEach(route => {
+        const { path, name, meta = {}, short_title, children } = route;
+        // 关键：当前菜单的最终 show 状态 = 自身 show（默认1） && 父级 show（默认1）
+        // 若父级 show 不是1，当前菜单直接隐藏，不加入列表
+        const currentShow = meta.show === undefined ? 1 : meta.show;
+        const finalShow = currentShow && parentShow; // 父级隐藏则子级必隐藏
+
+        // 叶子节点判断：type=1 + 最终 show=1（父级+自身都显示）
+        const isLeaf = meta.type === 1 && finalShow === 1;
+
+        if (isLeaf) {
+        const title = meta.title || short_title || '';
+        const parentTitleChain = getParentTitleChain(meta);
+        const fullTitle = parentTitleChain ? `${parentTitleChain} - ${title}` : title;
+        const item = {
+            path,
+            name,
+            title,
+            parent_title: parentTitleChain,
+            full_title: fullTitle
+        };
+        flat.push(item);
+        }
+
+        // 递归处理子菜单：传递当前菜单的 finalShow 作为子级的 parentShow
+        if (children && children.length > 0) {
+        flat = flat.concat(flattenRoutes(children, route, finalShow));
+        }
+    });
+
+    return flat;
+}
+
+const isMenuSearch = ref(false)
+const selectedRoute = ref('')
+const flatRoutes = flattenRoutes(routers);
+const handleRouteSelect = (name:any) => {
+    if (name) {
+        router.push({ name })
+        isMenuSearch.value = false
+    }
+}
+
+const detectionLoginFn = () => {
+    detectionLoginDialog.value = false
+    location.reload()
+}
+// 检测登录 end
+
+// 刷新路由
+const refreshRouter = () => {
+    if (!appStore.routeRefreshTag) return
+    appStore.refreshRouterView()
+}
+
+// 面包屑导航
+const breadcrumb = computed(() => {
+    const matched = route.matched.filter(item => { return item.meta.title })
+    if (matched[0] && matched[0].path == '/') matched.splice(0, 1)
+    return matched
+})
+storage.set({ key: 'currHeadMenuName', data: "" })
+systemStore.toggleMenuCollapse(storage.get('menuiscollapse') || false)
+const toggleMenuCollapse = () => {
+    systemStore.toggleMenuCollapse(!systemStore.menuIsCollapse)
+}
+
+const appType = storage.get('app_type')
+// 跳转去预览
+const toPreview = () => {
+    const url = router.resolve({
+        path: '/preview/wap',
+        query: {
+            page:'/'
+        }
+    })
+    window.open(url.href)
+}
+</script>
+
+<style lang="scss" scoped>
+.layout-header{
+    position: relative;
+    z-index: 5;
+    border-bottom: 1px solid #e8e9eb;
+}
+.navbar-item {
+    padding: 0 8px;
+}
+.index-item {
+	border: 1px solid;
+	border-color: var(--el-color-primary);
+    &:hover {
+		color: #fff;
+        background-color: var(--el-color-primary);
+    }
+}
+// :deep(.el-input__wrapper) {
+//     box-shadow: none !important;
+//     border-radius: 4px !important;
+//     background: #F7F7FA !important;
+//     min-width: 638px;
+//     height: 40px;
+//     border-radius: 4px !important;
+// }
+</style>
diff --git a/admin/src/layout/lightside/components/header/layout-setting.vue b/admin/src/layout/lightside/components/header/layout-setting.vue
new file mode 100644
index 000000000..a40fe00c8
--- /dev/null
+++ b/admin/src/layout/lightside/components/header/layout-setting.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="flex">
+        <icon name="element Setting" @click="drawer = true" />
+
+        <el-drawer v-model="drawer" :title="t('layout.layoutSetting')" size="300px">
+            <el-scrollbar>
+                <!-- 黑暗模式 -->
+                <div class="setting-item flex items-center justify-between mb-[10px]">
+                    <div class="title text-base text-tx-secondary">{{ t('layout.darkMode') }}</div>
+                    <div>
+                        <el-switch v-model="dark" :active-value="true" :inactive-value="false" />
+                    </div>
+                </div>
+                <!-- 主题颜色 -->
+                <div class="setting-item flex items-center justify-between mb-[10px]">
+                    <div class="title text-base text-tx-secondary">{{ t('layout.themeColor') }}</div>
+                    <div>
+                        <el-color-picker v-model="theme" />
+                    </div>
+                </div>
+                <!-- 标签栏 -->
+                <div class="setting-item flex items-center justify-between mb-[10px]">
+                    <div class="title text-base text-tx-secondary">{{ t('layout.tab') }}</div>
+                    <div>
+                        <el-switch v-model="tab" :active-value="true" :inactive-value="false" />
+                    </div>
+                </div>
+            </el-scrollbar>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import useSystemStore from '@/stores/modules/system'
+import { useDark, useToggle } from '@vueuse/core'
+import { setThemeColor } from '@/utils/common'
+import { t } from '@/lang'
+import storage from "@/utils/storage";
+
+const drawer = ref(false)
+const systemStore = useSystemStore()
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+const dark = computed({
+    get () {
+        return systemStore.dark
+    },
+    set (val) {
+        systemStore.setTheme('dark', val)
+        toggleDark(val)
+        setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
+    }
+})
+
+const tab = computed({
+    get () {
+        return systemStore.tab
+    },
+    set (val) {
+        systemStore.$patch((state) => {
+            state.tab = val
+            storage.set({ key: 'tab', data: val })
+        })
+    }
+})
+
+const theme = computed({
+    get () {
+        return systemStore.theme
+    },
+    set (val) {
+        systemStore.setTheme('theme', val)
+        setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
+    }
+})
+
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__header) {
+    margin-bottom: 0 !important;
+}
+
+.layout-style {
+    &>div:nth-child(2n+2) {
+        margin-right: 0;
+    }
+}
+</style>
diff --git a/admin/src/layout/lightside/components/header/switch-lang.vue b/admin/src/layout/lightside/components/header/switch-lang.vue
new file mode 100644
index 000000000..811aa68ec
--- /dev/null
+++ b/admin/src/layout/lightside/components/header/switch-lang.vue
@@ -0,0 +1,32 @@
+<template>
+    <el-dropdown @command="switchLang" :tabindex="1">
+        <icon name="iconfont iconfanyi" />
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item command="zh-cn" :disabled="systemStore.lang == 'zh-cn'">简体中文</el-dropdown-item>
+                <el-dropdown-item command="en" :disabled="systemStore.lang == 'en'">English</el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
+</template>
+
+<script lang="ts" setup>
+import useSystemStore from '@/stores/modules/system'
+import { language } from '@/lang'
+import { useRoute } from 'vue-router'
+import storage from '@/utils/storage'
+
+const route = useRoute()
+const systemStore = useSystemStore()
+
+const switchLang = (command: string) => {
+    systemStore.$patch((state) => {
+        state.lang = command
+        storage.set({ key: 'lang', data: command })
+    })
+    language.loadLocaleMessages(route.path, systemStore.lang)
+    location.reload()
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/admin/src/layout/lightside/components/header/user-info.vue b/admin/src/layout/lightside/components/header/user-info.vue
new file mode 100644
index 000000000..dd89fc76f
--- /dev/null
+++ b/admin/src/layout/lightside/components/header/user-info.vue
@@ -0,0 +1,160 @@
+<template>
+    <div>
+        <el-dropdown @command="clickEvent" :tabindex="1">
+            <div class="userinfo flex h-full items-center">
+                <el-avatar v-if="userStore.userInfo.head_img" :size="25" :icon="UserFilled" :src="img(userStore.userInfo.head_img)"/>
+                <img v-else src="@/app/assets/images/member_head.png" class="w-[25px] rounded-full" />
+                <div class="user-name pl-[8px]">{{ userStore.userInfo.username }}</div>
+                <icon name="element ArrowDown" class="ml-[5px]" />
+            </div>
+            <template #dropdown>
+                <div class="p-[10px]">
+                    <div class="userinfo flex h-full items-center pb-[10px] border-b-[1px] border-solid border-[#e5e5e5]">
+                        <el-avatar v-if="userStore.userInfo.head_img" :size="45" :icon="UserFilled" :src="img(userStore.userInfo.head_img)"/>
+                        <img v-else src="@/app/assets/images/member_head.png" class="w-[45px] rounded-full" />
+                        <div>
+                            <div class="user-name pl-[8px] text-[14px]">{{ userStore.userInfo.username }}</div>
+                            <div class="pl-[8px] text-[13px] text-[#9699B6]">个人中心</div>
+                        </div>
+                    </div>
+                    <el-dropdown-menu>
+                        <el-dropdown-item @click="toLink('/home/index')" v-if="isAllowChange">
+                            <div class="flex items-center leading-[1] py-[5px]">
+                                <span class="iconfont iconqiehuan ml-[4px] !text-[14px] mr-[10px]"></span>
+                                <span class="text-[14px]">切换站点</span>
+                            </div>
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="getUserInfoFn">
+                            <div class="flex items-center leading-[1] py-[5px]">
+                                <span class="iconfont iconshezhi1 ml-[4px] !text-[14px] mr-[10px]"></span>
+                                <span class="text-[14px]">账号设置</span>
+                            </div>
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="changePasswordDialog=true">
+                            <div class="flex items-center leading-[1] py-[5px]">
+                                <span class="iconfont iconxiugai ml-[4px] !text-[14px] mr-[10px]"></span>
+                                <span class="text-[14px]">修改密码</span>
+                            </div>
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="logout">
+                            <div class="flex items-center leading-[1] py-[5px]">
+                                <span class="iconfont icontuichudenglu ml-[4px] !text-[14px] mr-[10px]"></span>
+                                <span class="text-[14px]">退出登录</span>
+                            </div>
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </div>
+            </template>
+        </el-dropdown>
+        <el-dialog v-model="changePasswordDialog" width="450px" title="修改密码">
+            <div>
+                <el-form :model="saveInfo" label-width="90px" ref="formRef" :rules="formRules" class="page-form">
+                    <el-form-item :label="t('originalPassword')" prop="original_password">
+                        <el-input v-model="saveInfo.original_password" type="password" :placeholder="t('originalPasswordPlaceholder')" clearable class="input-width" maxlength="40" />
+                    </el-form-item>
+                    <el-form-item :label="t('newPassword')" prop="password">
+                        <el-input v-model="saveInfo.password" type="password" :placeholder="t('passwordPlaceholder')" clearable class="input-width" maxlength="40" />
+                        <div class="form-tip">{{t('passwordTip')}}</div>
+                    </el-form-item>
+                    <el-form-item :label="t('passwordCopy')" prop="password_copy">
+                        <el-input v-model="saveInfo.password_copy" type="password" :placeholder="t('passwordPlaceholder')" clearable class="input-width" maxlength="40" />
+                    </el-form-item>
+                </el-form>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="changePasswordDialog = false">{{t('cancel')}}</el-button>
+                    <el-button type="primary" @click="submitForm(formRef)">{{t('save')}}</el-button>
+                </span>
+            </template>
+        </el-dialog>
+        <user-info-edit ref="userInfoEditRef" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { UserFilled } from '@element-plus/icons-vue'
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import type { FormInstance, FormRules, ElNotification } from 'element-plus'
+import useUserStore from '@/stores/modules/user'
+import { setUserInfo } from '@/app/api/personal'
+import { img } from '@/utils/common'
+import { t } from '@/lang'
+import userInfoEdit from '@/app/components/user-info-edit/index.vue'
+
+const isAllowChange = localStorage.getItem('isAllowChange') === 'true';
+const userStore = useUserStore()
+const router = useRouter()
+const clickEvent = (command: string) => {
+    switch (command) {
+        case 'logout':
+            userStore.logout()
+            break
+    }
+}
+
+const logout = () => {
+    userStore.logout()
+}
+const toLink = (link) => {
+    router.push(link)
+}
+const userInfoEditRef = ref(null)
+const getUserInfoFn = () => {
+    userInfoEditRef.value?.open()
+}
+// 修改密码 --- start
+const changePasswordDialog = ref(false)
+const formRef = ref<FormInstance>()
+// 提交信息
+const saveInfo = reactive({
+    original_password: '',
+    password: '',
+    password_copy: ''
+})
+
+// 表单验证规则
+const formRules = reactive<FormRules>({
+    original_password: [
+        { required: true, message: t('originalPasswordPlaceholder'), trigger: 'blur' }
+    ],
+    password: [
+        { required: true, message: t('passwordPlaceholder'), trigger: 'blur' }
+    ],
+    password_copy: [
+        { required: true, message: t('passwordPlaceholder'), trigger: 'blur' }
+    ]
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.validate((valid) => {
+        if (valid) {
+            let msg = ''
+            if (saveInfo.password && !saveInfo.original_password) msg = t('originalPasswordHint')
+            if (saveInfo.password && saveInfo.original_password && !saveInfo.password_copy) msg = t('newPasswordHint')
+            if (saveInfo.password && saveInfo.original_password && saveInfo.password_copy && saveInfo.password != saveInfo.password_copy) msg = t('doubleCipherHint')
+            if (msg) {
+                ElNotification({
+                    type: 'error',
+                    message: msg
+                })
+                return
+            }
+
+            setUserInfo(saveInfo).then((res: any) => {
+                changePasswordDialog.value = false
+            })
+        } else {
+            return false
+        }
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.el-popper .el-dropdown-menu{
+    width: 150px;
+}
+</style>
diff --git a/admin/src/layout/lightside/components/tabs.vue b/admin/src/layout/lightside/components/tabs.vue
new file mode 100644
index 000000000..561663f98
--- /dev/null
+++ b/admin/src/layout/lightside/components/tabs.vue
@@ -0,0 +1,136 @@
+<template>
+    <div class="tab-wrap w-full px-[16px]">
+        <el-tabs :closable="tabbarStore.tabLength > 1" :model-value="route.path" @tab-click="tabClick" @tab-remove="removeTab">
+            <el-tab-pane v-for="(tab, key, index) in tabbarStore.tabs" :name="tab.path" :key="index">
+                <template #label>
+                    <el-dropdown trigger="contextmenu" placement="bottom-start">
+                        <span :class="{ 'text-primary': route.path == tab.path }" class="tab-name">{{ tab.title }}</span>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item icon="Back" :disabled="index == 0" @click="closeLeft(tab.path)">{{t('tabs.closeLeft') }}</el-dropdown-item>
+                                <el-dropdown-item icon="Right" :disabled="index == (tabbarStore.tabLength - 1)" @click="closeRight(tab.path)">{{t('tabs.closeRight') }}</el-dropdown-item>
+                                <el-dropdown-item icon="Close" :disabled="tabbarStore.tabLength == 1" @click="closeOther(tab.path)">{{t('tabs.closeOther') }}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </template>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, onMounted } from 'vue'
+import useTabbarStore from '@/stores/modules/tabbar'
+import { useRoute, useRouter } from 'vue-router'
+import { t } from '@/lang'
+
+const tabbarStore = useTabbarStore()
+const route = useRoute()
+const router = useRouter()
+
+onMounted(() => {
+    tabbarStore.addTab(route)
+})
+
+watch(route, (nval: any) => {
+    tabbarStore.addTab(nval)
+})
+
+/**
+ * 添加tab
+ * @param content
+ */
+const tabClick = (content: any) => {
+    const tabRoute = tabbarStore.tabs[content.props.name]
+    router.push({ path: tabRoute.path, query: tabRoute.query })
+}
+
+/**
+ * 移除tab
+ * @param content
+ */
+const removeTab = (content: any) => {
+    if (route.path == content) {
+        const tabs = Object.keys(tabbarStore.tabs)
+        router.push({ path: tabs[tabs.indexOf(content) - 1] })
+    }
+    tabbarStore.removeTab(content)
+}
+
+/**
+ * 关闭左侧
+ * @param path
+ */
+const closeLeft = (path: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    for (let i = tabs.indexOf(path) - 1; i >= 0; i--) {
+        delete tabbarStore.tabs[tabs[i]]
+    }
+    router.push({ path })
+}
+
+/**
+ * 关闭右侧
+ * @param path
+ */
+const closeRight = (path: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    for (let i = tabs.indexOf(path) + 1; i < tabs.length; i++) {
+        delete tabbarStore.tabs[tabs[i]]
+    }
+    router.push({ path })
+}
+
+/**
+ * 关闭其他
+ * @param path
+ */
+const closeOther = (path: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    tabs.forEach((key: string) => { key != path && delete tabbarStore.tabs[key] })
+    router.push({ path })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs) {
+    .el-tabs--border-card {
+        border: none;
+    }
+
+    .el-tabs__header {
+        margin: 0;
+    }
+
+    .el-tabs__nav-wrap {
+        margin-bottom: 0;
+
+        &::after {
+            display: none;
+        }
+    }
+
+    .el-tabs__content {
+        display: none;
+    }
+
+    .el-tabs__item {
+        display: inline-flex !important;
+        padding: 0 20px !important;
+        align-items: center;
+
+        .tab-name:focus {
+            outline: none !important;
+        }
+    }
+
+    .el-tabs__active-bar {
+        display: none;
+    }
+
+    .el-tabs__item.is-active {
+        background-color: var(--el-color-primary-light-9);
+    }
+}
+</style>
diff --git a/admin/src/layout/lightside/index.vue b/admin/src/layout/lightside/index.vue
new file mode 100644
index 000000000..318143112
--- /dev/null
+++ b/admin/src/layout/lightside/index.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="flex w-full h-screen">
+        <el-container>
+            <!-- 顶部 -->
+            <el-header>
+                <layout-header></layout-header>
+            </el-header>
+            <!-- 顶部 end -->
+            <el-container :style="{height:'calc(100vh - 64px)'}">
+                <!-- 左侧边栏 -->
+                <layout-aside></layout-aside>
+                <!-- 左侧边栏 end -->
+                <!-- 主体 -->
+                <el-main class="h-full p-0 bg-page">
+                    <el-scrollbar>
+                        <div class="p-[15px]">
+                            <router-view v-slot="{ Component, route }" v-if="appStore.routeRefreshTag">
+                                <keep-alive :include="tabbarStore.tabNames" :max="15">
+                                    <component :is="Component" :key="route.fullPath" />
+                                </keep-alive>
+                            </router-view>
+                        </div>
+                    </el-scrollbar>
+                </el-main>
+                    <!-- 主体 end -->
+            </el-container>
+        </el-container>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import layoutHeader from './components/header/index.vue'
+import layoutAside from './components/aside/index.vue'
+import useAppStore from '@/stores/modules/app'
+import useTabbarStore from '@/stores/modules/tabbar'
+
+const appStore = useAppStore()
+const tabbarStore = useTabbarStore()
+</script>
+
+<style lang="scss" scoped>
+.bg-page {
+    background-color: #F7F7FA;
+}
+:deep(.inter .el-breadcrumb__inner){
+    font-weight: inherit !important;
+    color: var(--el-text-color-regular) !important;
+}
+</style>
diff --git a/admin/src/layout/lightside/layout.json b/admin/src/layout/lightside/layout.json
new file mode 100644
index 000000000..b697ed934
--- /dev/null
+++ b/admin/src/layout/lightside/layout.json
@@ -0,0 +1,4 @@
+{
+	"layout": "lightside",
+	"cover": "/static/resource/images/system/layout_lightside.png"
+}
diff --git a/admin/src/layout/profession/components/aside/side.vue b/admin/src/layout/profession/components/aside/side.vue
index 6b584a824..e8fb08922 100644
--- a/admin/src/layout/profession/components/aside/side.vue
+++ b/admin/src/layout/profession/components/aside/side.vue
@@ -107,17 +107,17 @@ routers.forEach(item => {
         addonRouters[item.meta.addon] = item
     }
     // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
-    // oneMenuData.value.sort((a, b) => {
-    //     if (a.meta.sort && b.meta.sort) {
-    //         return b.meta.sort - a.meta.sort
-    //     } else if (a.meta.sort) {
-    //         return -1
-    //     } else if (b.meta.sort) {
-    //         return 1
-    //     } else {
-    //         return 0
-    //     }
-    // })
+    oneMenuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {
+            return 1
+        } else {
+            return 0
+        }
+    })
 })
 // 多应用时将应用插入菜单
 if (siteInfo?.apps.length > 1) {
@@ -130,17 +130,17 @@ if (siteInfo?.apps.length > 1) {
     })
     oneMenuData.value.unshift(...routers)
     // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
-    // oneMenuData.value.sort((a, b) => {
-    //     if (a.meta.sort && b.meta.sort) {
-    //         return b.meta.sort - a.meta.sort
-    //     } else if (a.meta.sort) {
-    //         return -1
-    //     } else if (b.meta.sort) {
-    //         return 1
-    //     } else {
-    //         return 0
-    //     }
-    // })
+    oneMenuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {
+            return 1
+        } else {
+            return 0
+        }
+    })
 }
 
 const appList = ref(null)
diff --git a/admin/src/layout/profession/components/header/index.vue b/admin/src/layout/profession/components/header/index.vue
index aaf0f8a5c..cb0866a89 100644
--- a/admin/src/layout/profession/components/header/index.vue
+++ b/admin/src/layout/profession/components/header/index.vue
@@ -88,7 +88,7 @@
         <input type="hidden" v-model="comparisonToken">
         <input type="hidden" v-model="comparisonSiteId">
 
-        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
+        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :append-to-body="true">
             <span>{{ t('layout.detectionLoginContent') }}</span>
             <template #footer>
                 <span class="dialog-footer">
diff --git a/admin/src/layout/routine/components/aside/index.vue b/admin/src/layout/routine/components/aside/index.vue
new file mode 100644
index 000000000..899e37dcf
--- /dev/null
+++ b/admin/src/layout/routine/components/aside/index.vue
@@ -0,0 +1,34 @@
+<template>
+    <el-aside class="layout-aside  w-auto">
+        <side class="hidden-xs-only" />
+    </el-aside>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { useRoute } from 'vue-router'
+import side from './side.vue'
+import useSystemStore from '@/stores/modules/system'
+
+const systemStore = useSystemStore()
+
+const route = useRoute()
+watch(route, () => {
+    systemStore.$patch(state => {
+        state.menuDrawer = false
+    })
+})
+</script>
+
+<style lang="scss">
+.layout-aside {
+    background-color: var(--side-dark-color, var(--el-bg-color));
+    border-right: 1px solid var(--el-border-color-lighter);
+}
+
+.aside-drawer {
+    .el-drawer__body {
+        padding: 0px !important;
+    }
+}
+</style>
diff --git a/admin/src/layout/routine/components/aside/menu-item.vue b/admin/src/layout/routine/components/aside/menu-item.vue
new file mode 100644
index 000000000..20f2e28a0
--- /dev/null
+++ b/admin/src/layout/routine/components/aside/menu-item.vue
@@ -0,0 +1,86 @@
+<template>
+    <template v-if="meta.show">
+        <el-sub-menu v-if="hasVisibleChild" :index="String(routes.name)">
+            <template #title>
+                <div class="w-[25px] h-full flex items-center justify-center">
+                    <template v-if="meta.icon">
+                        <el-image class="w-[16px] h-[16px] overflow-hidden" :src="meta.icon" fit="fill" v-if="isUrl(meta.icon)"/>
+                        <icon :name="meta.icon" v-else />
+                    </template>
+                    <icon v-else :name="'iconfont iconshezhi1'" />
+                </div>
+                <span class="text-[14px]">{{ meta.title }}</span>
+            </template>
+            <menu-item v-for="(route, index) in routes.children" :routes="route" :key="index" :level="props.level + 1" />
+        </el-sub-menu>
+        <el-menu-item :index="String(routes.name)" @click="handleJump(routes.name)" v-else>
+            <template #title>
+                <div class="w-[25px] h-full flex items-center justify-center" v-if="props.level == 1">
+                    <template v-if="meta.icon">
+                        <el-image class="w-[16px] h-[16px] overflow-hidden" :src="meta.icon" fit="fill" v-if="isUrl(meta.icon)"/>
+                        <icon :name="meta.icon" v-else />
+                    </template>
+                    <icon v-else :name="'iconfont iconshezhi1'" />
+                </div>
+                <span class="text-[14px]">{{ meta.title }}</span>
+            </template>
+        </el-menu-item>
+    </template>
+
+</template>
+
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router'
+import { ref, computed } from 'vue'
+import { img, isUrl } from '@/utils/common'
+import menuItem from './menu-item.vue'
+import storage from '@/utils/storage'
+
+const router = useRouter()
+const route = useRoute()
+
+const props = defineProps({
+    routes: {
+        type: Object,
+        required: true
+    },
+    level: {
+        type: Number,
+        default: 1
+    }
+})
+
+const meta = computed(() => props.routes.meta)
+
+const hasVisibleChild = computed(() => {
+    if (!props.routes.children || !Array.isArray(props.routes.children)) {
+        return false
+    }
+    return props.routes.children.some(child => child.meta?.show === 1)
+})
+
+// 统一处理跳转逻辑
+const handleJump = (routeName: string) => {
+    // 检查目标路由是否在特殊菜单列表中
+    const specialMenuNames = storage.get('specialMenuNames')
+    const specialMenuNamesLevel1 = storage.get('specialMenuNamesLevel1')
+    const isInSpecialMenus = specialMenuNames.includes(routeName)
+    // 核心逻辑：如果不在特殊菜单中，就删除activeAppKey
+    if (!isInSpecialMenus) {
+        storage.remove('activeAppKey')
+    }
+    // 点击特殊菜单的一级，跳转应用列表
+    if (specialMenuNamesLevel1.includes(routeName)) {
+        routeName = 'addon_list'
+    }
+    // 跳转时添加随机查询参数（用于触发页面感知）// 相同路由时添加随机参数
+    const query = route.name === routeName ? { refresh: Date.now() } : {}
+
+    // 执行跳转
+    router.push({ name: routeName, query })
+}
+
+</script>
+
+<style lang="scss">
+</style>
diff --git a/admin/src/layout/routine/components/aside/side.vue b/admin/src/layout/routine/components/aside/side.vue
new file mode 100644
index 000000000..5be9e10f7
--- /dev/null
+++ b/admin/src/layout/routine/components/aside/side.vue
@@ -0,0 +1,343 @@
+<template>
+    <el-container class="w-100 h-[100%]">
+        <el-main class="p-0 flex">
+            <el-scrollbar v-if="twoMenuData.length" class="two-menu w-[200px]">
+                <el-menu class="aside-menu" :default-active="route.name" :default-openeds="menuOption" :router="true" :collapse="systemStore.menuIsCollapse">
+                    <menu-item v-for="(route, index) in twoMenuData" :routes="route" :key="index" />
+                </el-menu>
+                <div class="h-[48px]"></div>
+            </el-scrollbar>
+        </el-main>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import menuItem from './menu-item.vue'
+import useSystemStore from '@/stores/modules/system'
+import useUserStore from '@/stores/modules/user'
+import { cloneDeep } from 'lodash-es'
+import storage from '@/utils/storage'
+import { getShowApp, getShowSpecialMenu } from '@/app/api/site'
+import { formatRouters } from '@/router/routers'
+
+const route = useRoute()
+
+const systemStore = useSystemStore()
+const userStore = useUserStore()
+
+const siteInfo = userStore.siteInfo
+
+const appList = ref(null)
+const twoMenuData = ref<Record<string, any>[]>([])
+const oneMenuActive = ref(route.matched[1].name)
+
+const getAppList = async () => {
+    const res = await getShowApp()
+    appList.value = res.data
+    storage.set({ key: 'defaultAppList', data: appList.value })
+}
+const specialList = ref<Record<string, any>[]>([])
+const getShowSpecialMenuList = async () => {
+    const res = await getShowSpecialMenu()
+    specialList.value = res.data.list
+    storage.set({ key: 'specialAppList', data: specialList.value })
+}
+
+const specialMenuNames = ref<string[]>([])
+const specialMenuNamesLevel1 = ref<string[]>([])
+
+onMounted(() => {
+    getAppList()
+    getShowSpecialMenuList()
+    const processedSpecialMenus = handleSpecialMenus()
+    specialMenuNames.value = collectSpecialMenuNames(processedSpecialMenus)
+    specialMenuNamesLevel1.value = collectSpecialMenuNamesLevel1(processedSpecialMenus)
+    storage.set({ key: 'specialMenuNames', data: specialMenuNames.value })
+    storage.set({ key: 'specialMenuNamesLevel1', data: specialMenuNamesLevel1.value })
+})
+
+// 让二级菜单默认展开
+const menuOption = ref([])
+const secondMenuShowWayFn = () => {
+    menuOption.value = []
+    if (oneMenuActive.value !== 'active' && oneMenuActive.value !== 'addon' && twoMenuData.value && Object.values(twoMenuData.value).length) {
+        const data = cloneDeep(twoMenuData.value)
+        for (const key in data) {
+            menuOption.value.push(data[key].name)
+        }
+    }
+}
+
+// 从 addonKeys 中提取所有需要匹配的 key
+const getAddonAllKeys = (addonData) => {
+    if (!addonData || typeof addonData !== 'object') return []
+    const allKeys = []
+    Object.values(addonData).forEach(category => {
+        if (Array.isArray(category.list)) {
+            category.list.forEach(item => {
+                if (item.key) allKeys.push(item.key)
+            })
+        }
+    })
+    return allKeys
+}
+
+// 处理 specialMenusKeys 子菜单 show 的方法
+const handleSpecialMenus = () => {
+    const specialMenusKeys = storage.get('specialAppList')
+    if (Array.isArray(specialMenusKeys) && specialMenusKeys.length) {
+        const processedSpecialMenus = JSON.parse(JSON.stringify(specialMenusKeys))
+        const activeAppKey = storage.get('activeAppKey')
+        // 收集所有特殊菜单的name
+        processedSpecialMenus.forEach(menu => {
+            if (menu.children && Array.isArray(menu.children)) {
+                const traverseChildren = (children) => {
+                    children.forEach(child => {
+                        if (child && child.is_show !== undefined) {
+                            child.is_show = (child.menu_key === activeAppKey) ? 1 : 0
+                        }
+                    })
+                }
+                traverseChildren(menu.children)
+            }
+        })
+        // 过滤掉 children 为空的特殊菜单
+        const filteredSpecialMenus = processedSpecialMenus.filter(menu => {
+            return menu.children && menu.children.length > 0
+        })
+        return formatRouters(filteredSpecialMenus)
+    }
+    return []
+}
+
+watch(route, () => {
+    if (route.meta.attr != '') {
+        oneMenuActive.value = route.matched[1].name
+        twoMenuData.value = route.matched[1].children ?? []
+    } else {
+        // 多应用
+        if (siteInfo?.apps.length > 1) {
+            twoMenuData.value = route.matched[2].children
+            oneMenuActive.value = route.matched[2].name
+        } else {
+            // 单应用
+            const oneMenu = route.matched[2]
+            if (oneMenu.meta.addon == '') {
+                oneMenuActive.value = route.matched[2].name
+                twoMenuData.value = route.matched[2].children ?? []
+            } else {
+                if (oneMenu.meta.addon == siteInfo?.apps[0].key) {
+                    oneMenuActive.value = route.matched[3].name
+                    twoMenuData.value = route.matched[3].children ?? []
+                } else {
+                    oneMenuActive.value = route.matched[2].name
+                    twoMenuData.value = route.matched[2].children ?? []
+                }
+            }
+        }
+    }
+    secondMenuShowWayFn()
+    const addonKeys = storage.get('defaultAppList')
+    const addonAllKeys = getAddonAllKeys(addonKeys)
+    twoMenuData.value = twoMenuData.value.filter((child) => {
+        return !child.name || !addonAllKeys.includes(child.name)
+    })
+    if (oneMenuActive.value == 'addon') {
+        // 处理特殊菜单并插入到 twoMenuData 中（与 addon_list 同级）
+        const processedSpecialMenus = handleSpecialMenus()
+        if (processedSpecialMenus.length) {
+            // 先找到 addon_list 在 twoMenuData 中的索引
+            const addonListIndex = twoMenuData.value.findIndex(
+                (item) => item.name === 'addon_list'
+            )
+            if (addonListIndex !== -1) {
+                // 将特殊菜单插入到 addon_list 后面（同级）
+                twoMenuData.value.splice(
+                    addonListIndex + 1,
+                    0,
+                    ...processedSpecialMenus
+                )
+            } else {
+                // 如果没有 addon_list，直接将特殊菜单添加到 twoMenuData 中
+                twoMenuData.value.push(...processedSpecialMenus)
+            }
+        }
+    }
+}, { immediate: true })
+
+
+// 提取所有特殊菜单的name
+const collectSpecialMenuNames = (menus: any[]) => {
+    const names: string[] = []
+    const traverse = (children: any[]) => {
+        children.forEach(child => {
+            if (child.name) {
+                names.push(child.name)
+            }
+            // 递归处理子菜单
+            if (child.children && Array.isArray(child.children)) {
+                traverse(child.children)
+            }
+        })
+    }
+    menus.forEach(menu => {
+        if (menu.children && Array.isArray(menu.children)) {
+            traverse(menu.children)
+        }
+    })
+    return names
+}
+
+// 提取所有一级特殊菜单的name
+const collectSpecialMenuNamesLevel1 = (menus: any[]) =>{
+    const names: string[] = []
+    menus.forEach(menu => {
+        if (menu.name) {
+            names.push(menu.name)
+        }
+    })
+    return names
+}
+</script>
+
+<style>
+:root,
+body {
+    --layout-side-hover-bg: #f7f8fa;
+    --layout-side-active-bg: var(--el-color-primary-light-9);
+    --layout-side-active-text: var(--el-color-primary);
+}
+</style>
+<style lang="scss">
+.two-menu {
+
+    .aside-menu:not(.el-menu--collapse) {
+        width: 200px;
+        padding-top: 16px;
+        border: 0;
+
+        .el-menu-item {
+            height: 36px;
+            margin: 0 8px 4px;
+            padding: 0 !important;
+            border-radius: 2px;
+
+            span {
+                font-size: 14px;
+                line-height: 36px;
+            }
+            i {
+                line-height: 36px;
+            }
+
+            &.is-active {
+                background-color: #fff !important;
+            }
+
+            &:hover {
+                color: var(--el-color-primary);
+                background-color: #fff !important;
+            }
+        }
+
+        .el-sub-menu {
+            margin-bottom: 8px;
+
+            .el-sub-menu__title {
+                height: 36px;
+                margin: 0 8px 4px;
+                padding-left: 0;
+                border-radius: 2px;
+
+                span {
+                    font-size: 14px;
+                    display: flex;
+                    height: 36px;
+                    align-items: center;
+                }
+
+                &:hover {
+                    color: var(--el-color-primary);
+                    background-color: #fff !important;
+                }
+                .el-icon.el-sub-menu__icon-arrow {
+                    right: 5px;
+                }
+            }
+
+            .el-menu-item {
+                padding-left: 25px !important;
+                span{
+                    margin-left: 0 !important;
+                }
+            }
+            .el-sub-menu{
+                .el-sub-menu__title{
+                    margin: 0 8px 2px;
+                    height: 40px;
+                    padding-left: 18px;
+                    border-radius: 2px;
+                    span{
+                        height: 40px;
+                        display: flex;
+                        align-items: center;
+                        font-size: 14px;
+                    }
+                    &:hover{
+                        background-color: transparent;
+                        color: var(--el-color-primary);
+                    }
+                }
+                .el-menu-item{
+                    padding-left: 40px !important;
+                    span{
+                        margin-left: 0 !important;
+                    }
+                }
+            }
+        }
+    }
+}
+// 二级菜单折叠之后，弹窗样式
+.el-menu--vertical.el-menu--popup-container{
+    .el-menu--popup{
+        padding: 8px;
+        min-width: auto;
+    }
+    .el-menu-item, .el-sub-menu, .el-sub-menu{
+        height: auto!important;
+        padding: 10px;
+        line-height: 1;
+        color: #999;
+        &.is-active{
+            color: #333;
+            background-color: transparent;
+        }
+        &:hover{
+            background-color: var(--layout-side-hover-bg);
+        }
+    }
+}
+
+.logo-wrap {
+    padding: 0;
+    display: flex;
+    white-space: nowrap;
+    align-items: center;
+
+    .logo {
+        height: 100%;
+        box-sizing: border-box;
+    }
+
+    .logo-title {
+        flex: 1;
+        width: 0;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        font-size: var(--el-font-size-base);
+    }
+}
+</style>
diff --git a/admin/src/layout/routine/components/header/index.vue b/admin/src/layout/routine/components/header/index.vue
new file mode 100644
index 000000000..6c0e14b41
--- /dev/null
+++ b/admin/src/layout/routine/components/header/index.vue
@@ -0,0 +1,451 @@
+<template>
+  <el-container :class="['h-full bg-[var(--layout-header-bg)]',{'layout-header border-b border-color': !dark}]" >
+    <div class="flex items-center h-full px-[10px] w-full box-border">
+        <div class="left-panel h-full flex items-center">
+            <el-header class="logo-wrap flex items-center w-[190px]">
+                <div class="logo flex items-center" v-if="!systemStore.menuIsCollapse">
+                    <el-image style="width: 30px; height: 30px" class="rounded-[6px]" :src="img(logoUrl ? logoUrl : '' )" fit="contain">
+                        <template #error>
+                            <div class="flex justify-center items-center w-full h-[30px] rounded-[6px]"><img class="max-w-[30px]" src="@/app/assets/images/icon-addon.png" alt=""  object-fit="contain"></div>
+                        </template>
+                    </el-image>
+                </div>
+                <div class="logo flex items-center justify-center" v-else>
+                    <i class="text-3xl iconfont iconyunkongjian"></i>
+                </div>
+                <!-- 店铺名称 -->
+                <div class="ml-[10px] text-[#333] max-w-[150px] using-hidden">{{siteInfo.site_name}}</div>
+            </el-header>
+        </div>
+        <div class="flex items-center gap-[8px] h-[var(--layout-header-height)] text-[var(--layout-header-text-color)]">
+            <template v-for="(item, index) in oneMenuData" :key="index">
+                <div v-if="item.meta.show" class="flex items-center cursor-pointer" @click="handleJump(item.name)">
+                    <span class="px-[14px] truncate text-[14px] text-[#333] h-[60px] leading-[60px] rounded-[4px] hover:text-primary"  :class="{ '!text-primary font-bold oneMenu': oneMenuActive === item.original_name }">{{item.meta.short_title || item.meta.title }}</span>
+                </div>
+            </template>
+        </div>
+        <div class="ml-auto right-panel h-full flex items-center justify-end">
+            <div class="flex items-center flex-shrink-0 hidden-xs-only">
+                <el-dropdown trigger="hover" :hide-on-click="false" popper-class="site-info-wrap" class="mr-[8px]">
+                    <!-- 状态 -->
+                    <div class="mx-[8px] bg-[#f6f6f6] border-[1px] border-solid border-[#eee] rounded-[4px] px-[9px] py-[6px] flex items-center">
+                        <span class="mr-[6px] text-[12px] !text-[#333]">{{ siteInfo.site_name }}</span>
+                        <span class="!text-[10px] text-[#f56c6c]" :class="{'!text-[#67c23a]': siteInfo.status == 1, '!text-[#f56c6c]': siteInfo.status == 3}">{{ siteInfo.status_name }}</span>
+                    </div>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item>
+                                <!-- 站点id -->
+                                <div class="text-[14px]">站点编号：{{siteInfo.site_id}}</div>
+                            </el-dropdown-item>
+                            <el-dropdown-item>
+                                <!-- 到期时间 -->
+                                <div v-if="siteInfo.expire_time == 0" class="text-[14px]">到期时间：永久</div>
+                                <div v-else class="text-[14px]">到期时间：{{ siteInfo.expire_time }}</div>
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </div>
+            <div class="flex items-center flex-shrink-0 hidden-xs-only">
+                <el-popover placement="bottom" :width="330" trigger="click" v-model:visible="isMenuSearch" >
+                    <template #reference>
+                        <i class="iconfont icona-sousuoV6xx-36 cursor-pointer px-[8px] !text-[14px]"></i>
+                    </template>
+                    <template #default>
+                        <div class="flex items-center">
+                            <el-select v-model="selectedRoute"  filterable class="!w-[250px] mr-[20px] menu-select" :teleported="false" clearable  @change="handleRouteSelect">
+                                <el-option v-for="item in flatRoutes" :key="item.name" :label="item.full_title" :value="item.name" >
+                                </el-option>
+                            </el-select>
+                            <el-button type="primary" link @click="isMenuSearch = false">{{t('取消')}}</el-button>
+                        </div>
+                    </template>
+                </el-popover>
+            </div>
+            <!-- 预览 只有站点时展示-->
+            <i class="navbar-item iconfont iconicon_huojian1 cursor-pointer text-[#333]" :title="t('visitWap')" @click="toPreview"></i>
+            <i class="navbar-item iconfont iconlingdang-xianxing cursor-pointer text-[#333]" :title="t('newInfo')" v-if="appType == 'site'"></i>
+            <!-- 布局设置 -->
+            <div class="navbar-item flex items-center h-full cursor-pointer">
+                <layout-setting />
+            </div>
+            <!-- 用户信息 -->
+            <div class="navbar-item flex items-center h-full cursor-pointer">
+                <user-info />
+            </div>
+        </div>
+    </div>
+    <input type="hidden" v-model="comparisonToken">
+    <input type="hidden" v-model="comparisonSiteId">
+
+    <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :append-to-body="true">
+        <span>{{ t('layout.detectionLoginContent') }}</span>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="detectionLoginFn">{{ t('layout.detectionLoginOperation') }}</el-button>
+            </span>
+        </template>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted, watch } from 'vue'
+import layoutSetting from './layout-setting.vue'
+import userInfo from './user-info.vue'
+import { useFullscreen } from '@vueuse/core'
+import useSystemStore from '@/stores/modules/system'
+import useAppStore from '@/stores/modules/app'
+import useUserStore from '@/stores/modules/user'
+import { useRoute, useRouter } from 'vue-router'
+import { findFirstValidRoute, formatRouters } from '@/router/routers'
+import { t } from '@/lang'
+import { img } from '@/utils/common'
+import storage from '@/utils/storage'
+
+const appType = storage.get('app_type')
+const { toggle: toggleFullscreen } = useFullscreen()
+const systemStore = useSystemStore()
+const appStore = useAppStore()
+const route = useRoute()
+const router = useRouter()
+const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
+
+const userStore = useUserStore()
+const siteInfo:any = computed(() => {
+    return userStore.siteInfo
+})
+const addonIndexRoute = userStore.addonIndexRoute
+
+const dark = computed(() => {
+    return systemStore.dark
+})
+const isMenuSearch = ref(false)
+const routers = userStore.routers
+
+const logoUrl = computed(() => {
+    return userStore.siteInfo.logo ? userStore.siteInfo.logo : systemStore.website.logo
+})
+
+// 检测登录 start
+const detectionLoginDialog = ref(false)
+const comparisonToken = ref('')
+const comparisonSiteId = ref('')
+if (storage.get('comparisonTokenStorage')) {
+    comparisonToken.value = storage.get('comparisonTokenStorage')
+    // storage.remove(['comparisonTokenStorage']);
+}
+if (storage.get('comparisonSiteIdStorage')) {
+    comparisonSiteId.value = storage.get('comparisonSiteIdStorage')
+    // storage.remove(['comparisonSiteIdStorage']);
+}
+// 监听标签页面切换
+document.addEventListener('visibilitychange', e => {
+    if (document.visibilityState === 'visible' && (comparisonSiteId.value != storage.get('siteId') || comparisonToken.value != storage.get('token'))) {
+        detectionLoginDialog.value = true
+    }
+})
+
+const detectionLoginFn = () => {
+    detectionLoginDialog.value = false
+    location.href = `${location.origin}/site/`
+}
+// 检测登录 end
+
+const specialMenuNames = ref<string[]>([])
+const specialMenuNamesLevel1 = ref<string[]>([])
+
+onMounted(() => {
+    const processedSpecialMenus = handleSpecialMenus()
+    specialMenuNames.value = collectSpecialMenuNames(processedSpecialMenus)
+    specialMenuNamesLevel1.value = collectSpecialMenuNamesLevel1(processedSpecialMenus)
+    storage.set({ key: 'specialMenuNames', data: specialMenuNames.value })
+    storage.set({ key: 'specialMenuNamesLevel1', data: specialMenuNamesLevel1.value })
+    // 监听窗体宽度变化
+    window.onresize = () => {
+        return (() => {
+            screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+        })()
+    }
+})
+
+/* 一级菜单 */
+const oneMenuData = ref<Record<string, any>[]>([])
+const addonRouters: Record<string, any> = {}
+routers.forEach(item => {
+    item.original_name = item.name
+    if (item.meta.addon == '') {
+        if (item.meta.attr == '') {
+            if (item.children && item.children.length) {
+                item.name = findFirstValidRoute(item.children)
+            }
+            oneMenuData.value.push(item)
+        }
+    } else if (item.meta.addon != '' && siteInfo.value?.apps.length <= 1 && siteInfo.value?.apps[0].key == item.meta.addon && item.meta.show) {
+        if (item.children) {
+            item.children.forEach((citem: Record<string, any>) => {
+                citem.original_name = citem.name
+                if (citem.children && citem.children.length) {
+                    citem.name = findFirstValidRoute(citem.children)
+                }
+            })
+            oneMenuData.value.unshift(...item.children)
+        } else {
+            oneMenuData.value.unshift(item)
+        }
+    } else {
+        addonRouters[item.meta.addon] = item
+    }
+
+    // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
+    oneMenuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {                               
+            return 1
+        } else {
+            return 0
+        }
+    })
+})
+// 多应用时将应用插入菜单
+if (siteInfo.value?.apps.length > 1) {
+    const routers:Record<string, any>[] = []
+    siteInfo.value?.apps.forEach((item: Record<string, any>) => {
+        if (addonRouters[item.key]) {
+            addonRouters[item.key].name = addonIndexRoute[item.key]
+            routers.push(addonRouters[item.key])
+        }
+    })
+    oneMenuData.value.unshift(...routers)
+
+    // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
+    oneMenuData.value.sort((a, b) => {
+        if (a.meta.sort && b.meta.sort) {
+            return b.meta.sort - a.meta.sort
+        } else if (a.meta.sort) {
+            return -1
+        } else if (b.meta.sort) {                               
+            return 1
+        } else {
+            return 0
+        }
+    })
+}
+const oneMenuActive = ref(oneMenuData.value[0]?.name || '')
+
+watch(route, () => {
+    if (route.meta.attr != '') {
+        oneMenuActive.value = route.matched[1].name
+    } else {
+        // 多应用
+        if (siteInfo.value?.apps.length > 1) {
+            oneMenuActive.value = route.matched[2].name
+        } else {
+            // 单应用
+            const oneMenu = route.matched[2]
+            if (oneMenu.meta.addon == '') {
+                oneMenuActive.value = route.matched[2].name
+            } else {
+                if (oneMenu.meta.addon == siteInfo.value?.apps[0].key) {
+                    oneMenuActive.value = route.matched[3].name
+                } else {
+                    oneMenuActive.value = route.matched[2].name
+                }
+            }
+        }
+    }
+}, { immediate: true })
+
+// 统一处理跳转逻辑
+const handleJump = (routeName: string) => {
+    // 检查目标路由是否在特殊菜单列表中
+    const isInSpecialMenus = specialMenuNames.value.includes(routeName)
+    // 核心逻辑：如果不在特殊菜单中，就删除activeAppKey
+    if (!isInSpecialMenus) {
+        storage.remove('activeAppKey')
+    } else {
+    }
+
+    // 执行跳转
+    router.push({ name: routeName })
+}
+
+// 处理 specialMenusKeys 子菜单 show 的方法
+const handleSpecialMenus = () => {
+    const specialMenusKeys = storage.get('specialAppList')
+    if (Array.isArray(specialMenusKeys) && specialMenusKeys.length) {
+        const processedSpecialMenus = JSON.parse(JSON.stringify(specialMenusKeys))
+        const activeAppKey = storage.get('activeAppKey')
+
+        // 收集所有特殊菜单的name
+        processedSpecialMenus.forEach(menu => {
+            if (menu.children && Array.isArray(menu.children)) {
+                const traverseChildren = (children) => {
+                    children.forEach(child => {
+                        if (child && child.is_show !== undefined) {
+                            child.is_show = (child.menu_key === activeAppKey) ? 1 : 0
+                        }
+                    })
+                }
+                traverseChildren(menu.children)
+            }
+        })
+        // 过滤掉 children 为空的特殊菜单
+        const filteredSpecialMenus = processedSpecialMenus.filter(menu => {
+            return menu.children && menu.children.length > 0
+        })
+        return formatRouters(filteredSpecialMenus)
+    }
+    return []
+}
+
+// 提取所有特殊菜单的name
+const collectSpecialMenuNames = (menus: any[]) => {
+    const names: string[] = []
+    const traverse = (children: any[]) => {
+        children.forEach(child => {
+            if (child.name) {
+                names.push(child.name)
+            }
+            // 递归处理子菜单
+            if (child.children && Array.isArray(child.children)) {
+                traverse(child.children)
+            }
+        })
+    }
+
+    menus.forEach(menu => {
+        if (menu.children && Array.isArray(menu.children)) {
+            traverse(menu.children)
+        }
+    })
+    return names
+}
+
+// 提取所有一级特殊菜单的name
+const collectSpecialMenuNamesLevel1 = (menus: any[]) =>{
+    const names: string[] = []
+    menus.forEach(menu => {
+        if (menu.name) {
+            names.push(menu.name)
+        }
+    })
+    return names
+}
+
+// 跳转去预览
+const toPreview = () => {
+    const url = router.resolve({
+        path: '/preview/wap',
+        query: {
+            page: `/addon/mall/pages/index?site_id=${siteInfo.value.site_id}`
+        }
+    })
+    window.open(url.href)
+}
+
+const getParentTitleChain = (meta:any) => {
+    const titles = []
+    let current = meta?.parent_route
+
+    while (current) {
+        if (current.short_title) {
+            titles.unshift(current.short_title)
+        }
+        current = current.parent_route
+    }
+
+    return titles.join(' - ')
+}
+const flattenRoutes = (routes:any, parent = null)=> {
+    let flat: any = []
+    routes.forEach(route => {
+        const { path, name, meta = {}, short_title, children } = route
+        const isLeaf = meta.type == 1 && meta.show == 1
+        if (isLeaf) {
+            const title = meta.title || short_title || ''
+            const parentTitleChain = getParentTitleChain(meta)
+            const fullTitle = parentTitleChain ? `${parentTitleChain} - ${title}` : title
+            const item = {
+                path,
+                name,
+                title,
+                parent_title: parentTitleChain,
+                full_title: fullTitle
+            }
+
+            flat.push(item)
+        }
+        if (children && children.length > 0) {
+            flat = flat.concat(flattenRoutes(children, route))
+        }
+    })
+
+    return flat
+}
+const flatRoutes = flattenRoutes(routers)
+const selectedRoute = ref('')
+const handleRouteSelect = (name:any) => {
+    if (name) {
+        router.push({ name })
+        isMenuSearch.value = false
+    }
+}
+
+</script>
+<style>
+:root,
+body {
+    --layout-header-bg: #fff;
+    --layout-header-height: 44px;
+    --layout-header-text-color: #333;
+    --layout-header-text-hover: #fff;
+    --layout-header-text-selected: rgba(0, 0, 0, .2);
+}
+</style>
+
+<style lang="scss" scoped>
+.layout-header{
+  position: relative;
+  z-index: 5;
+  box-shadow: 0px 0px 4px 0px rgba(0,145,255,0.1);
+}
+.oneMenu{
+    position: relative;
+    &::after{
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 2px;
+        height: 3px;
+        background-color: var(--el-color-primary);
+    }
+}
+.navbar-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 5px;
+    border-radius: 4px;
+    box-sizing: border-box;
+    &:hover {
+        background-color: var(--layout-header-text-hover);
+    }
+}
+.index-item {
+  border: 1px solid;
+  border-color: var(--el-color-primary);
+  &:hover {
+    color: #fff;
+    background-color: var(--el-color-primary);
+  }
+}
+
+</style>
diff --git a/admin/src/layout/routine/components/header/layout-setting.vue b/admin/src/layout/routine/components/header/layout-setting.vue
new file mode 100644
index 000000000..1d7a3412f
--- /dev/null
+++ b/admin/src/layout/routine/components/header/layout-setting.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="flex">
+    <icon name="element Setting" color="#333" @click="drawer = true" />
+
+    <el-drawer v-model="drawer" :title="t('layout.layoutSetting')" size="300px">
+      <el-scrollbar>
+        <!-- 黑暗模式 -->
+        <div class="setting-item flex items-center justify-between mb-[10px]">
+          <div class="title text-base text-tx-secondary">{{ t('layout.darkMode') }}</div>
+          <div class="">
+            <el-switch v-model="dark" :active-value="true" :inactive-value="false" />
+          </div>
+        </div>
+        <!-- 主题颜色 -->
+        <div class="setting-item flex items-center justify-between mb-[10px]">
+          <div class="title text-base text-tx-secondary">{{ t('layout.themeColor') }}</div>
+          <div class="">
+            <el-color-picker v-model="theme" />
+          </div>
+        </div>
+      </el-scrollbar>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import useSystemStore from '@/stores/modules/system'
+import { useDark, useToggle } from '@vueuse/core'
+import { setThemeColor } from '@/utils/common'
+import { t } from '@/lang'
+
+const drawer = ref(false)
+const systemStore = useSystemStore()
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+const dark = computed({
+  get () {
+    return systemStore.dark
+  },
+  set (val) {
+    systemStore.setTheme('dark', val)
+    toggleDark(val)
+    setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
+  }
+})
+
+const theme = computed({
+  get () {
+    return systemStore.theme
+  },
+  set (val) {
+    systemStore.setTheme('theme', val)
+    setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__header) {
+  margin-bottom: 0 !important;
+}
+
+.layout-style {
+  &>div:nth-child(2n+2) {
+    margin-right: 0;
+  }
+}
+</style>
diff --git a/admin/src/layout/routine/components/header/switch-lang.vue b/admin/src/layout/routine/components/header/switch-lang.vue
new file mode 100644
index 000000000..6addf96b2
--- /dev/null
+++ b/admin/src/layout/routine/components/header/switch-lang.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-dropdown @command="switchLang" :tabindex="1">
+    <icon name="iconfont-iconfanyi" />
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item command="zh-cn" :disabled="systemStore.lang == 'zh-cn'">简体中文</el-dropdown-item>
+        <el-dropdown-item command="en" :disabled="systemStore.lang == 'en'">English</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script lang="ts" setup>
+import useSystemStore from '@/stores/modules/system'
+import { language } from '@/lang'
+import { useRoute } from 'vue-router'
+import storage from '@/utils/storage'
+
+const route = useRoute()
+const systemStore = useSystemStore()
+
+const switchLang = (command: string) => {
+  systemStore.$patch((state) => {
+    state.lang = command
+    storage.set({ key: 'lang', data: command })
+  })
+  language.loadLocaleMessages(route.path, systemStore.lang)
+  location.reload()
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/admin/src/layout/routine/components/header/user-info.vue b/admin/src/layout/routine/components/header/user-info.vue
new file mode 100644
index 000000000..7aa46217d
--- /dev/null
+++ b/admin/src/layout/routine/components/header/user-info.vue
@@ -0,0 +1,240 @@
+<template>
+    <div>
+        <el-dropdown @command="clickEvent" :tabindex="1">
+            <div class="userinfo flex h-full items-center">
+                <el-avatar :size="25" :icon="UserFilled" :src="info && info.head_img ? img(info.head_img) : ''"/>
+                <div class="user-name pl-[8px] text-[#333]">{{ userStore.userInfo.username }}</div>
+                <icon name="element ArrowDown" color="#333" class="ml-[5px]" />
+            </div>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item @click="changeSite">
+                        <div class="flex items-center leading-[1] py-[5px]">
+                        <span class="iconfont iconqiehuan ml-[4px] !text-[14px] mr-[10px]"></span>
+                        <span class="text-[14px]">切换店铺</span>
+                        </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item @click="getUserInfoFn">
+                        <!-- <router-link to="/user/center"> -->
+                        <div class="flex items-center leading-[1] py-[5px]">
+                        <span class="iconfont iconshezhi1 ml-[4px] !text-[14px] mr-[10px]"></span>
+                        <span class="text-[14px]">账号设置</span>
+                        </div>
+                        <!-- </router-link> -->
+                    </el-dropdown-item>
+                    <el-dropdown-item @click="changePasswordDialog=true">
+                        <div class="flex items-center leading-[1] py-[5px]">
+                        <span class="iconfont iconxiugai ml-[4px] !text-[14px] mr-[10px]"></span>
+                        <span class="text-[14px]">修改密码</span>
+                        </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item command="logout">
+                        <div class="flex items-center leading-[1] py-[2px]">
+                        <span class="iconfont icontuichudenglu !text-[21px] mr-[8px]"></span>
+                        <span class="text-[14px]">退出登录</span>
+                        </div>
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+
+        <el-dialog v-model="changePasswordDialog" width="450px" title="修改密码">
+            <div>
+                <el-form :model="saveInfo" label-width="90px" ref="formRef" :rules="formRules" class="page-form">
+                    <el-form-item :label="t('originalPassword')" prop="original_password">
+                        <el-input v-model="saveInfo.original_password" type="password" :placeholder="t('originalPasswordPlaceholder')" clearable class="input-width" />
+                    </el-form-item>
+                    <el-form-item :label="t('newPassword')" prop="password">
+                        <el-input v-model="saveInfo.password" type="password" :placeholder="t('passwordPlaceholder')" clearable class="input-width" />
+                        <div class="form-tip">{{t('passwordTip')}}</div>
+                    </el-form-item>
+                    <el-form-item :label="t('passwordCopy')" prop="password_copy">
+                        <el-input v-model="saveInfo.password_copy" type="password" :placeholder="t('passwordPlaceholder')" clearable class="input-width" />
+                    </el-form-item>
+                </el-form>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="changePasswordDialog = false">{{t('cancel')}}</el-button>
+                    <el-button type="primary" @click="submitForm(formRef)">{{t('save')}}</el-button>
+                </span>
+            </template>
+        </el-dialog>
+        <el-dialog v-model="changeSiteDialog" width="1260px" title="切换店铺" append-to-body>
+            <div class="min-h-[540px]">
+                <div class="flex flex-wrap" v-loading="site.loading">
+                    <div v-for="(item, index) in site.tableData" :key="index" @click="selectSite(item)" :class="['home-item w-[285px] box-border mb-[20px] cursor-pointer',{'mr-[20px]': index ==0 || (index + 1) % 4 != 0,'border-[1px] border-solid border-[var(--el-color-primary)]': siteInfo.site_id == item.site_id}]">
+                        <div class="flex items-center px-[24px] pt-[22px] pb-[16px] bg-[#F0F2F4] home-item-head">
+                            <img v-if="item.front_end_logo" class="w-[48px] h-[48px] mr-[15px] rounded-[50%] overflow-hidden" :src="img(item.front_end_logo)" />
+                            <img v-else class="w-[48px] h-[48px] mr-[15px] rounded-[50%] overflow-hidden" src="@/app/assets/images/site_logo.png" />
+                            <div class="flex flex-col flex-1 justify-center">
+                                <div class="flex items-center flex-wrap">
+                                    <span class="text-[16px] text-[#000] max-w-[145px] font-bold truncate mr-[10px]">{{item.site_name}}</span>
+                                    <div class="flex items-center justify-center min-w-[42px] h-[18px] bg-[#FF5500] rounded-tl-md rounded-br-md items-tab" v-if="item.app_name">
+                                        <span class="text-[12px] text-[#fff]">{{item.app_name}}</span>
+                                    </div>
+                                </div>
+                                <span class="text-[12px] mt-[3px] text-[#555]" v-if="item.status !== 1">{{item.status_name}}</span>
+                            </div>
+                        </div>
+                        <div class="px-[24px] py-[20px] text-[#6D7278]">
+                            <p class="text-[14px]">店铺编号：{{item.site_id}}</p>
+                            <p class="text-[14px] mt-[2px]">店铺套餐：{{item.group_name || '--'}}</p>
+                        </div>
+                    </div>
+                    <div v-if="!site.tableData.length && !site.loading" class="m-auto">
+                        <img src="@/app/assets/images/site_empty.png"/>
+                        <p class="text-center text-gray-400">暂无店铺</p>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-[16px] flex justify-end">
+                <el-pagination v-model:current-page="site.params.page" v-model:page-size="site.params.limit"
+                            layout="total, prev, pager, next, jumper" :total="site.total"
+                            @current-change="getHomeSiteFn" :hide-on-single-page="true"/>
+            </div>
+        </el-dialog>
+        <user-info-edit ref="userInfoEditRef" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { UserFilled } from '@element-plus/icons-vue'
+import { reactive, ref, computed } from 'vue'
+import { img } from '@/utils/common'
+import { RouteLocationRaw, useRouter } from 'vue-router'
+import { FormInstance, FormRules, ElNotification } from 'element-plus'
+import userInfoEdit from '@/app/components/user-info-edit/index.vue'
+import useUserStore from '@/stores/modules/user'
+import { setUserInfo } from '@/app/api/personal'
+import { getHomeSite } from '@/app/api/home'
+import { t } from '@/lang'
+import storage from '@/utils/storage'
+const userStore = useUserStore()
+
+const siteInfo = userStore.siteInfo
+const router = useRouter()
+
+const clickEvent = (command: string) => {
+    switch (command) {
+        case 'logout':
+            userStore.logout()
+            break
+    }
+}
+
+const userInfoEditRef = ref(null)
+const getUserInfoFn = () => {
+    userInfoEditRef.value?.open()
+}
+
+const info = computed(() => {
+    return userInfoEditRef.value?.saveInfo
+})
+
+// 修改密码 --- start
+const changePasswordDialog = ref(false)
+const formRef = ref<FormInstance>()
+// 提交信息
+const saveInfo = reactive({
+    original_password: '',
+    password: '',
+    password_copy: ''
+})
+// 表单验证规则
+const formRules = reactive<FormRules>({
+    original_password: [
+        { required: true, message: t('originalPasswordPlaceholder'), trigger: 'blur' }
+    ],
+    password: [
+        { required: true, message: t('passwordPlaceholder'), trigger: 'blur' }
+    ],
+    password_copy: [
+        { required: true, message: t('passwordPlaceholder'), trigger: 'blur' }
+    ]
+})
+const submitForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.validate((valid) => {
+        if (valid) {
+            let msg = ''
+            if (saveInfo.password && !saveInfo.original_password) msg = t('originalPasswordHint')
+            if (saveInfo.password && saveInfo.original_password && !saveInfo.password_copy) msg = t('newPasswordHint')
+            if (saveInfo.password && saveInfo.original_password && saveInfo.password_copy && saveInfo.password != saveInfo.password_copy) msg = t('doubleCipherHint')
+            if (msg) {
+                ElNotification({
+                    type: 'error',
+                    message: msg
+                })
+                return
+            }
+
+            setUserInfo(saveInfo).then((res: any) => {
+                changePasswordDialog.value = false
+            })
+        } else {
+            return false
+        }
+    })
+}
+// 修改密码 --- end
+// 切换店铺
+const changeSiteDialog = ref(false)
+const site = reactive({
+    params: {
+        page: 1,
+        limit: 12
+    },
+    loading: false,
+    tableData: [],
+    total: 0
+})
+const getHomeSiteFn = (page: number = 1) => {
+    site.params.page = page
+    site.loading = true
+    getHomeSite(site.params).then(res => {
+        site.tableData = res.data.data
+        site.total = res.data.total
+        site.loading = false
+    }).catch(() => {
+        site.loading = false
+    })
+}
+const changeSite = () => {
+    getHomeSiteFn()
+    changeSiteDialog.value = true
+}
+const selectSite = (site: any) => {
+    storage.set({ key: 'siteId', data: site.site_id })
+    storage.set({ key: 'siteInfo', data: site })
+    storage.set({ key: 'comparisonSiteIdStorage', data: site.site_id })
+    useUserStore().$patch((site) => {
+        site.siteInfo = site
+    })
+    location.href = `${location.origin}/site/`
+}
+</script>
+
+<style lang="scss" scoped>
+.el-popper .el-dropdown-menu{
+  width: 150px;
+}
+.home-item{
+  box-shadow: 0 2px 4px 0 rgba(161,167,183,0.18);
+  .items-tab span{
+    transform: scale(0.9);
+  }
+}
+.home-item:hover {
+  border-color: var(--el-color-primary);
+  .title {
+    color: var(--el-color-primary);
+  }
+  .home-item-head{
+    background-color: #A1A7B7;
+    span{
+      color: #fff !important;
+    }
+  }
+}
+</style>
diff --git a/admin/src/layout/routine/components/tabs.vue b/admin/src/layout/routine/components/tabs.vue
new file mode 100644
index 000000000..d58f79a43
--- /dev/null
+++ b/admin/src/layout/routine/components/tabs.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="tab-wrap w-full px-[16px]">
+        <el-tabs :closable="tabbarStore.tabLength > 1" :model-value="route.path" @tab-click="tabClick"
+            @tab-remove="removeTab">
+            <el-tab-pane v-for="(tab, key, index) in tabbarStore.tabs" :name="tab.path" :key="index">
+                <template #label>
+                    <el-dropdown trigger="contextmenu" placement="bottom-start">
+                        <span :class="{ 'text-primary': route.path == tab.path }" class="tab-name">{{ tab.title }}</span>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item icon="Back" :disabled="index == 0" @click="closeLeft(tab.path)">{{t('tabs.closeLeft') }}</el-dropdown-item>
+                                <el-dropdown-item icon="Right" :disabled="index == (tabbarStore.tabLength - 1)" @click="closeRight(tab.path)">{{t('tabs.closeRight') }}</el-dropdown-item>
+                                <el-dropdown-item icon="Close" :disabled="tabbarStore.tabLength == 1" @click="closeOther(tab.path)">{{t('tabs.closeOther') }}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </template>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, onMounted } from 'vue'
+import useTabbarStore from '@/stores/modules/tabbar'
+import { useRoute, useRouter } from 'vue-router'
+import { t } from '@/lang'
+
+const tabbarStore = useTabbarStore()
+const route = useRoute()
+const router = useRouter()
+
+onMounted(() => {
+    tabbarStore.addTab(route)
+})
+
+watch(route, (nval: any) => {
+    tabbarStore.addTab(nval)
+})
+
+/**
+ * 添加tab
+ * @param content
+ */
+const tabClick = (content: any) => {
+    const tabRoute = tabbarStore.tabs[content.props.name]
+    router.push({ path: tabRoute.path, query: tabRoute.query })
+}
+
+/**
+ * 移除tab
+ * @param content
+ */
+const removeTab = (content: any) => {
+    if (route.path == content) {
+        const tabs = Object.keys(tabbarStore.tabs)
+        router.push({ path: tabs[tabs.indexOf(content) - 1] })
+    }
+    tabbarStore.removeTab(content)
+}
+
+/**
+ * 关闭左侧
+ * @param path
+ */
+const closeLeft = (path: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    for (let i = tabs.indexOf(path) - 1; i >= 0; i--) {
+        delete tabbarStore.tabs[tabs[i]]
+    }
+    router.push({ path })
+}
+
+/**
+ * 关闭右侧
+ * @param path
+ */
+const closeRight = (path: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    for (let i = tabs.indexOf(path) + 1; i < tabs.length; i++) {
+        delete tabbarStore.tabs[tabs[i]]
+    }
+    router.push({ path })
+}
+
+/**
+ * 关闭其他
+ * @param path
+ */
+const closeOther = (path: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    tabs.forEach((key: string) => { key != path && delete tabbarStore.tabs[key] })
+    router.push({ path })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs) {
+    .el-tabs--border-card {
+        border: none;
+    }
+
+    .el-tabs__header {
+        margin: 0;
+    }
+
+    .el-tabs__nav-wrap {
+        margin-bottom: 0;
+
+        &::after {
+            display: none;
+        }
+    }
+
+    .el-tabs__content {
+        display: none;
+    }
+
+    .el-tabs__item {
+        display: inline-flex !important;
+        padding: 0 20px !important;
+        align-items: center;
+
+        .tab-name:focus {
+            outline: none !important;
+        }
+    }
+
+    .el-tabs__active-bar {
+        display: none;
+    }
+
+    .el-tabs__item.is-active {
+        background-color: var(--el-color-primary-light-9);
+    }
+}
+</style>
diff --git a/admin/src/layout/routine/index.vue b/admin/src/layout/routine/index.vue
new file mode 100644
index 000000000..6fc322e30
--- /dev/null
+++ b/admin/src/layout/routine/index.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="min-w-[1500px]">
+        <el-header>
+            <layout-header></layout-header>
+        </el-header>
+        <el-container>
+            <layout-aside class="h-[calc(100vh-60px)]"></layout-aside>
+            <el-main class="main-wrap h-[calc(100vh-60px)] p-0 bg-page relative">
+                <el-scrollbar>
+                    <div class="p-[10px]">
+                        <router-view v-slot="{ Component, route }" v-if="appStore.routeRefreshTag ">
+                            <keep-alive :include="tabbarStore.tabNames">
+                                <component :is="Component" :key="route.fullPath"/>
+                            </keep-alive>
+                        </router-view>
+                    </div>
+                </el-scrollbar>
+            </el-main>
+        </el-container>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import layoutHeader from './components/header/index.vue'
+import layoutAside from './components/aside/index.vue'
+import useAppStore from '@/stores/modules/app'
+import useTabbarStore from '@/stores/modules/tabbar'
+
+const appStore = useAppStore()
+const tabbarStore = useTabbarStore()
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-header){
+    --el-header-height: 60px !important;
+}
+</style>
diff --git a/admin/src/layout/routine/layout.json b/admin/src/layout/routine/layout.json
new file mode 100644
index 000000000..b20b58115
--- /dev/null
+++ b/admin/src/layout/routine/layout.json
@@ -0,0 +1,4 @@
+{
+	"layout": "routine",
+	"cover": "/static/resource/images/system/layout_routine.png"
+}
diff --git a/admin/src/router/routers.ts b/admin/src/router/routers.ts
index 948e87f51..8699d0869 100644
--- a/admin/src/router/routers.ts
+++ b/admin/src/router/routers.ts
@@ -196,13 +196,14 @@ export function findFirstValidRoute(routes: RouteRecordRaw[]): string | undefine
  * @param rules
  */
 export function findRules(routes: Route[], rules :string[] = []) : string[] {
+    let resultRules = [...rules]
     for (const route of routes) {
         if (route.auth && Array.isArray(route.auth)) {
-            rules = rules.concat(route.auth)
+            resultRules = resultRules.concat(route.auth)
         }
         if (route.children) {
-            rules = findRules(route.children, rules)
+            resultRules = findRules(route.children, resultRules)
         }
     }
-    return rules
+    return resultRules
 }
diff --git a/admin/src/stores/modules/system.ts b/admin/src/stores/modules/system.ts
index 2efacdac2..fbafce29f 100644
--- a/admin/src/stores/modules/system.ts
+++ b/admin/src/stores/modules/system.ts
@@ -52,12 +52,14 @@ const useSystemStore = defineStore('system', {
         async getWebsiteInfo() {
             await getWebConfig().then(({ data }) => {
                 this.website = data
-            }).catch()
+            }).catch(() => {
+            })
         },
         async getWebsiteLayout() {
             await getWebsiteLayout().then(({ data }) => {
                 this.layoutConfig = data
-            }).catch()
+            }).catch(() => {
+            })
         }
     }
 })
diff --git a/admin/src/stores/modules/tabbar.ts b/admin/src/stores/modules/tabbar.ts
index 743cc5420..f299a8b24 100644
--- a/admin/src/stores/modules/tabbar.ts
+++ b/admin/src/stores/modules/tabbar.ts
@@ -17,18 +17,18 @@ const useTabbarStore = defineStore('tabbar', {
         }
     },
     actions: {
-        addTab(roter: RouteLocationNormalizedLoaded) {
-            if (roter.meta && roter.meta.type != 1) return
-            if (this.tabs[roter.name]) {
-                this.tabs[roter.name].query = roter.query || {}
+        addTab(router: RouteLocationNormalizedLoaded) {
+            if (router.meta && router.meta.type != 1) return
+            if (this.tabs[router.name]) {
+                this.tabs[router.name].query = router.query || {}
                 return
             }
-            this.tabs[roter.name] = {
-                path: roter.path,
-                title: roter.meta ? roter.meta.title : '',
-                name: roter.name,
-                query: roter.query || {},
-                compomentName: roter.matched.at(-1).components.default.__name
+            this.tabs[router.name] = {
+                path: router.path,
+                title: router.meta ? router.meta.title : '',
+                name: router.name,
+                query: router.query || {},
+                componentName: router.matched.at(-1)?.components.default.__name
             }
         },
         removeTab(path: string) {
@@ -44,7 +44,7 @@ const useTabbarStore = defineStore('tabbar', {
             const name: any[] = []
             if (!useSystemStore().tab) return name
             Object.keys(state.tabs).forEach(key => {
-                name.push(state.tabs[key].compomentName)
+                name.push(state.tabs[key].componentName)
             })
             return name
         }
diff --git a/admin/src/styles/icon/iconfont.css b/admin/src/styles/icon/iconfont.css
index f718a72c0..826e60c78 100644
--- a/admin/src/styles/icon/iconfont.css
+++ b/admin/src/styles/icon/iconfont.css
@@ -1,9 +1,8 @@
 @font-face {
-  font-family: "iconfont";
-  /* Project id 3883393 */
-  src: url('//at.alicdn.com/t/c/font_3883393_0604cbkh5j03.woff2?t=1762651161569') format('woff2'),
-    url('//at.alicdn.com/t/c/font_3883393_0604cbkh5j03.woff?t=1762651161569') format('woff'),
-    url('//at.alicdn.com/t/c/font_3883393_0604cbkh5j03.ttf?t=1762651161569') format('truetype');
+  font-family: "iconfont"; /* Project id 3883393 */
+  src: url('//at.alicdn.com/t/c/font_3883393_jquqyagjvf.woff2?t=1773643077865') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3883393_jquqyagjvf.woff?t=1773643077865') format('woff'),
+       url('//at.alicdn.com/t/c/font_3883393_jquqyagjvf.ttf?t=1773643077865') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconjiang-right:before {
+  content: "\e921";
+}
+
+.iconpeisongshezhi:before {
+  content: "\e920";
+}
+
+.iconai:before {
+  content: "\e91f";
+}
+
 .icona-zhulixiangqingpc30:before {
   content: "\e914";
 }
@@ -3276,4 +3287,4 @@
 
 .iconquanping:before {
   content: "\eb11";
-}
\ No newline at end of file
+}
diff --git a/admin/src/utils/common.ts b/admin/src/utils/common.ts
index 3a14e22d4..5302c2076 100644
--- a/admin/src/utils/common.ts
+++ b/admin/src/utils/common.ts
@@ -127,13 +127,14 @@ export function isUrl(str: string): boolean {
  * @returns
  */
 export function img(path: string): string {
+    if (!path) return ''
+    
     let imgDomain = import.meta.env.VITE_IMG_DOMAIN || location.origin
 
-    if (typeof path == 'string' && path.startsWith('/')) path = path.replace(/^\//, '')
-    if (typeof imgDomain == 'string' && imgDomain.endsWith('/')) imgDomain = imgDomain.slice(0, -1)
-	if(path){
-		return isUrl(path) ? path : `${imgDomain}/${path}`
-	}
+    if (path.startsWith('/')) path = path.replace(/^\//, '')
+    if (imgDomain.endsWith('/')) imgDomain = imgDomain.slice(0, -1)
+    
+    return isUrl(path) ? path : `${imgDomain}/${path}`
 }
 
 /**
@@ -409,4 +410,29 @@ export function distance(distance: string | number): string {
     const dist = typeof distance === 'string' ? parseFloat(distance) : distance;
     if (isNaN(dist)) return distance.toString();
     return dist < 1 ? parseInt((dist * 1000).toString()) + 'm' : dist.toFixed(1) + 'km'
+}
+
+// 获取图片尺寸的函数
+export function getImageDimensions (url: string) {
+
+    return new Promise((resolve) => {
+        const imgObj = new Image()
+        imgObj.onload = () => {
+            // 成功加载
+            const size = {
+                width: imgObj.naturalWidth,
+                height: imgObj.naturalHeight
+            }
+            resolve(size)
+        }
+
+        imgObj.onerror = (err) => {
+            // 加载失败
+            resolve(null)
+        }
+
+        // 设置图片源，开始加载
+        // 注意：如果图片跨域且服务器未设置CORS，可能会触发onerror
+        imgObj.src = img(url)
+    })
 }
\ No newline at end of file
diff --git a/admin/src/utils/qqmap.ts b/admin/src/utils/qqmap.ts
index 3e8ffabd8..e1c89ac16 100644
--- a/admin/src/utils/qqmap.ts
+++ b/admin/src/utils/qqmap.ts
@@ -146,6 +146,9 @@ export const deleteGeometry = (key: string) => {
  * @param key
  */
 export const selectGeometry = (key: string) => {
+    if (!geometry[key] || !geometry[key].editor) {
+        return
+    }
     geometry[key].editor.select([key])
 }
 
diff --git a/admin/src/utils/request.ts b/admin/src/utils/request.ts
index 3d4e12154..c9603ac06 100644
--- a/admin/src/utils/request.ts
+++ b/admin/src/utils/request.ts
@@ -183,15 +183,27 @@ class Request {
     }
 
     private messageCache = new Map();
+    private readonly CACHE_EXPIRY = 5000; // 5秒内重复内容不再弹出，可自定义过期时间
+    private readonly MAX_CACHE_SIZE = 100;
 
     private showElMessage(options: MessageParams) {
         const cacheKey = options.message
+        const now = Date.now()
         const cachedMessage = this.messageCache.get(cacheKey);
 
-        if (!cachedMessage || Date.now() - cachedMessage.timestamp > 5000) { // 5秒内重复内容不再弹出，可自定义过期时间
-            this.messageCache.set(cacheKey, { timestamp: Date.now() });
+        if (!cachedMessage || now - cachedMessage.timestamp > this.CACHE_EXPIRY) {
+            this.messageCache.set(cacheKey, { timestamp: now });
             ElMessage(options)
         }
+        
+        // 定期清理过期缓存，防止内存泄漏
+        if (this.messageCache.size > this.MAX_CACHE_SIZE) {
+            for (const [key, value] of this.messageCache.entries()) {
+                if (now - value.timestamp > this.CACHE_EXPIRY) {
+                    this.messageCache.delete(key)
+                }
+            }
+        }
     }
 }
 
diff --git a/admin/src/utils/storage.ts b/admin/src/utils/storage.ts
index 8d4b3c1b9..b3c4f9949 100644
--- a/admin/src/utils/storage.ts
+++ b/admin/src/utils/storage.ts
@@ -38,10 +38,12 @@ class Storage {
      */
     public get(key: string) {
         try {
-            const json: any = window.localStorage.getItem(`${this.prefix}.${key}`)
-            return JSON.parse(json)
+            const value = window.localStorage.getItem(`${this.prefix}.${key}`)
+            if (value === null) return null
+            return JSON.parse(value)
         } catch (error) {
-            return window.localStorage.getItem(`${this.prefix}.${key}`)
+            const value = window.localStorage.getItem(`${this.prefix}.${key}`)
+            return value !== null ? value : null
         }
     }