From 920c89998a9c52a638e3ffefb1a26d991ea0762a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E7=94=B0=E7=94=B0?=
 <10422644+guo-tiantian99@user.noreply.gitee.com>
Date: Fri, 5 Sep 2025 12:27:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E5=AE=8C=E6=95=B4=E5=AE=9E=E7=8E=B0=E4=B8=8E?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=A0=87=E7=AD=BE=E9=A1=B5=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/application/myapp.ts         | 138 ++++-
 frontend/src/router/index.ts                  |   7 +
 frontend/src/types/auto-imports.d.ts          |   1 +
 frontend/src/types/components.d.ts            |   3 +
 .../myapp/components/InternalApp.vue          | 143 +++++
 .../src/views/application/myapp/indev.vue     |  13 -
 .../src/views/application/myapp/index.vue     | 574 ++++++++++++++++++
 7 files changed, 865 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/views/application/myapp/components/InternalApp.vue
 delete mode 100644 frontend/src/views/application/myapp/indev.vue
 create mode 100644 frontend/src/views/application/myapp/index.vue

diff --git a/frontend/src/api/application/myapp.ts b/frontend/src/api/application/myapp.ts
index 9baee9cc..c191a44e 100644
--- a/frontend/src/api/application/myapp.ts
+++ b/frontend/src/api/application/myapp.ts
@@ -1 +1,137 @@
-// 待开发
+import request from "@/utils/request";
+
+export const ApplicationAPI = {
+  /**
+   * 获取应用详情
+   * @param id 应用ID
+   */
+  getApplicationDetail(id: number) {
+    return request<ApiResponse<ApplicationInfo>>({
+      url: `/application/application/detail/${id}`,
+      method: "get",
+    });
+  },
+
+  /**
+   * 查询应用列表
+   * @param query 查询参数
+   */
+  getApplicationList(query: ApplicationPageQuery) {
+    return request<ApiResponse<PageResult<ApplicationInfo[]>>>({
+      url: `/application/application/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  /**
+   * 创建应用
+   * @param body 应用信息
+   */
+  createApplication(body: ApplicationForm) {
+    return request<ApiResponse>({
+      url: `/application/application/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  /**
+   * 修改应用
+   * @param id 应用ID
+   * @param body 应用信息
+   */
+  updateApplication(id: number, body: ApplicationForm) {
+    return request<ApiResponse>({
+      url: `/application/application/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  /**
+   * 删除应用
+   * @param body 应用ID数组
+   */
+  deleteApplication(body: number[]) {
+    return request<ApiResponse>({
+      url: `/application/application/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  /**
+   * 批量修改应用状态
+   * @param body 批量操作参数
+   */
+  batchAvailableApplication(body: BatchType) {
+    return request<ApiResponse>({
+      url: `/application/application/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+};
+
+export default ApplicationAPI;
+
+/**
+ * 应用分页查询参数
+ */
+export interface ApplicationPageQuery extends PageQuery {
+  /** 应用名称 */
+  name?: string;
+  /** 是否启用 */
+  status?: boolean;
+  /** 创建人 */
+  creator?: number;
+  /** 开始时间 */
+  start_time?: string;
+  /** 结束时间 */
+  end_time?: string;
+  /** 排序字段,格式:[{'field':'asc/desc'}] */
+  order_by?: string;
+}
+
+/**
+ * 应用信息
+ */
+export interface ApplicationInfo {
+  /** 应用ID */
+  id?: number;
+  /** 应用名称 */
+  name?: string;
+  /** 访问地址 */
+  access_url?: string;
+  /** 图标地址 */
+  icon_url?: string;
+  /** 是否启用 */
+  status?: boolean;
+  /** 应用描述 */
+  description?: string;
+  /** 创建时间 */
+  created_at?: string;
+  /** 更新时间 */
+  updated_at?: string;
+  /** 创建人 */
+  creator?: creatorType;
+}
+
+/**
+ * 应用表单
+ */
+export interface ApplicationForm {
+  /** 应用ID */
+  id?: number;
+  /** 应用名称 */
+  name: string;
+  /** 访问地址 */
+  access_url: string;
+  /** 图标地址 */
+  icon_url: string;
+  /** 是否启用 */
+  status: boolean;
+  /** 应用描述 */
+  description?: string;
+}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d350b2c9..063467ac 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -58,6 +58,13 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: { title: "个人中心", icon: "user", hidden: true },
         component: () => import("@/views/current/profile.vue"),
       },
+      // 应用内部打开页面
+      {
+        path: "internal-app/:appId",
+        name: "InternalApp",
+        meta: { title: "内部应用", icon: "Monitor", hidden: true, keepAlive: false },
+        component: () => import("@/views/application/myapp/components/InternalApp.vue"),
+      },
       // // 临时构建后面要删除掉
       // {
       //   path: "form-builder",
diff --git a/frontend/src/types/auto-imports.d.ts b/frontend/src/types/auto-imports.d.ts
index 96afad15..d800967e 100644
--- a/frontend/src/types/auto-imports.d.ts
+++ b/frontend/src/types/auto-imports.d.ts
@@ -587,6 +587,7 @@ declare module 'vue' {
     readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
     readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
     readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
+    readonly useTimeAgoIntl: UnwrapRef<typeof import('@vueuse/core')['useTimeAgoIntl']>
     readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
     readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
     readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
diff --git a/frontend/src/types/components.d.ts b/frontend/src/types/components.d.ts
index 9acd4246..e639ef47 100644
--- a/frontend/src/types/components.d.ts
+++ b/frontend/src/types/components.d.ts
@@ -29,6 +29,7 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -53,6 +54,7 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
+    ElLoadingSpinner: typeof import('element-plus/es')['ElLoadingSpinner']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -97,6 +99,7 @@ declare module 'vue' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     ImportModal: typeof import('./../components/Upload/ImportModal.vue')['default']
     InputTag: typeof import('./../components/InputTag/index.vue')['default']
+    InternalApp: typeof import('./../views/application/myapp/components/InternalApp.vue')['default']
     IntervalTab: typeof import('./../components/IntervalTab/index.vue')['default']
     JobLogDrawer: typeof import('./../views/monitor/job/components/JobLogDrawer.vue')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
diff --git a/frontend/src/views/application/myapp/components/InternalApp.vue b/frontend/src/views/application/myapp/components/InternalApp.vue
new file mode 100644
index 00000000..a079be30
--- /dev/null
+++ b/frontend/src/views/application/myapp/components/InternalApp.vue
@@ -0,0 +1,143 @@
+<!-- 内部应用展示页面 -->
+<template>
+  <div class="internal-app-container">
+    <div class="internal-app-content">
+      <iframe 
+        ref="iframeRef"
+        :src="appUrl" 
+        class="internal-app-iframe"
+        frameborder="0"
+        allowfullscreen
+        @load="handleIframeLoad"
+      ></iframe>
+      <div v-if="loading" class="loading-overlay">
+        <el-icon class="loading-icon">
+          <Loading />
+        </el-icon>
+        <span>加载中...</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { Loading } from '@element-plus/icons-vue';
+import { useTagsViewStore } from '@/store';
+
+defineOptions({
+  name: "InternalApp",
+  inheritAttrs: false,
+});
+
+const route = useRoute();
+const tagsViewStore = useTagsViewStore();
+const iframeRef = ref<HTMLIFrameElement>();
+const loading = ref(true);
+
+// 从路由参数获取应用信息
+const appUrl = computed(() => route.query.url as string);
+const appId = computed(() => route.query.appId as string);
+const appName = computed(() => route.query.appName as string);
+
+// iframe加载完成
+function handleIframeLoad() {
+  loading.value = false;
+}
+
+// 监听路由变化，更新iframe
+watch(() => route.query.url, (newUrl) => {
+  if (newUrl && iframeRef.value) {
+    loading.value = true;
+    iframeRef.value.src = newUrl as string;
+  }
+});
+
+// 在组件挂载时设置标签标题
+onMounted(() => {
+  if (appName.value) {
+    // 查找当前标签并更新标题
+    nextTick(() => {
+      const currentTag = tagsViewStore.visitedViews.find(tag => tag.path === route.path);
+      if (currentTag && currentTag.title !== appName.value) {
+        tagsViewStore.updateVisitedView({
+          ...currentTag,
+          title: appName.value,
+          fullPath: route.fullPath,
+          query: route.query,
+        });
+      }
+    });
+  }
+});
+
+// 监听应用名称变化，更新标签标题
+watch(() => appName.value, (newAppName) => {
+  if (newAppName) {
+    const currentTag = tagsViewStore.visitedViews.find(tag => tag.path === route.path);
+    if (currentTag) {
+      tagsViewStore.updateVisitedView({
+        ...currentTag,
+        title: newAppName,
+        fullPath: route.fullPath,
+        query: route.query,
+      });
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.internal-app-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--el-bg-color);
+}
+
+.internal-app-content {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.internal-app-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: var(--el-bg-color);
+  gap: 12px;
+  
+  .loading-icon {
+    font-size: 24px;
+    color: var(--el-color-primary);
+    animation: rotate 2s linear infinite;
+  }
+  
+  span {
+    color: var(--el-text-color-regular);
+    font-size: 14px;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/frontend/src/views/application/myapp/indev.vue b/frontend/src/views/application/myapp/indev.vue
deleted file mode 100644
index cf623ec9..00000000
--- a/frontend/src/views/application/myapp/indev.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template> 
-  <div>
-    <h1>我的应用管理开发中，暂未提供</h1>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/frontend/src/views/application/myapp/index.vue b/frontend/src/views/application/myapp/index.vue
new file mode 100644
index 00000000..fdefbc82
--- /dev/null
+++ b/frontend/src/views/application/myapp/index.vue
@@ -0,0 +1,574 @@
+<!-- 我的应用管理 -->
+<template> 
+  <div class="app-container">
+      <!-- 顶部搜索和操作区域 -->
+      <div class="search-container mb-4">
+        <el-form ref="queryFormRef" :model="queryFormData" :inline="true" label-suffix=":">
+          <el-form-item prop="name" label="应用名称">
+            <el-input v-model="queryFormData.name" placeholder="请输入应用名称" clearable style="width: 200px" />
+          </el-form-item>
+          <el-form-item prop="status" label="状态">
+            <el-select v-model="queryFormData.status" placeholder="请选择状态" clearable style="width: 120px">
+              <el-option label="启用" :value="true" />
+              <el-option label="停用" :value="false" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="creator" label="创建人">
+            <el-input v-model="queryFormData.creator" placeholder="请输入创建人" clearable style="width: 150px" />
+          </el-form-item>
+          <el-form-item class="search-buttons">
+            <el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
+            <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 应用卡片展示区域 -->
+      <el-card shadow="hover" class="app-grid-card">
+        <template #header>
+          <div class="card-header">
+            <span>应用市场</span>
+            <el-button type="primary" icon="plus" @click="handleCreateApp">
+              创建应用
+            </el-button>
+          </div>
+        </template>
+
+        <!-- 应用网格 -->
+        <div v-loading="loading" class="app-grid">
+        <div 
+          v-for="app in applicationList" 
+          :key="app.id"
+          class="app-card"
+        >
+          <div class="app-card-header">
+            <el-avatar :size="48" :src="app.icon_url" class="app-avatar">
+              <el-icon size="24"><Monitor /></el-icon>
+            </el-avatar>
+            <div class="app-info">
+              <h3 class="app-name">{{ app.name }}</h3>
+              <el-tag :type="app.status ? 'success' : 'danger'" size="small">
+                {{ app.status ? '启用' : '停用' }}
+              </el-tag>
+            </div>
+            <el-dropdown trigger="click" @command="(command) => handleAppAction(command, app)">
+              <el-button type="text" icon="MoreFilled" size="small" />
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="edit" icon="Edit">编辑</el-dropdown-item>
+                  <el-dropdown-item command="delete" icon="Delete" divided>删除</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+          
+          <div class="app-card-body">
+            <p class="app-desc">{{ app.description || '暂无描述' }}</p>
+            <div class="app-meta">
+              <span class="app-creator">{{ app.creator?.name || '未知' }}</span>
+              <span class="app-time">{{ formatTime(app.created_at) }}</span>
+            </div>
+          </div>
+          
+          <div class="app-card-footer">
+            <el-button 
+              type="primary" 
+              icon="Link" 
+              size="small"
+              @click="openAppExternal(app.access_url)"
+              :disabled="!app.status"
+            >
+              外部打开
+            </el-button>
+            <el-button 
+              type="default" 
+              icon="View" 
+              size="small"
+              @click="openAppInternal(app)"
+              :disabled="!app.status"
+            >
+              内部打开
+            </el-button>
+          </div>
+        </div>
+        </div>
+        
+        <!-- 空状态 -->
+        <div v-if="applicationList.length === 0 && !loading" class="empty-state">
+          <el-empty :image-size="120" description="暂无应用" />
+        </div>
+
+        <!-- 分页区域 -->
+        <template #footer>
+          <div class="pagination-container">
+            <el-pagination
+              v-model:current-page="queryFormData.page_no"
+              v-model:page-size="queryFormData.page_size"
+              :total="total"
+              :page-sizes="[12, 24, 48]"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            />
+          </div>
+        </template>
+      </el-card>
+
+    <!-- 应用创建/编辑弹窗 -->
+    <el-drawer
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      :size="drawerSize"
+      direction="rtl"
+      @close="handleCloseDialog"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        label-position="right"
+      >
+        <el-form-item label="应用名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入应用名称" />
+        </el-form-item>
+        
+        <el-form-item label="访问地址" prop="access_url">
+          <el-input v-model="formData.access_url" placeholder="请输入访问地址" />
+        </el-form-item>
+        
+        <el-form-item label="图标地址" prop="icon_url">
+          <el-input v-model="formData.icon_url" placeholder="请输入图标地址" />
+        </el-form-item>
+        
+        <el-form-item label="应用状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :value="true">启用</el-radio>
+            <el-radio :value="false">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        
+        <el-form-item label="应用描述" prop="description">
+          <el-input
+            v-model="formData.description"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入应用描述"
+            maxlength="200"
+            show-word-limit
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "MyApplication",
+  inheritAttrs: false,
+});
+
+import { useAppStore } from "@/store/modules/app.store";
+import { useTagsViewStore } from "@/store";
+import { useRouter } from "vue-router";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import ApplicationAPI, { type ApplicationForm, type ApplicationInfo, type ApplicationPageQuery } from "@/api/application/myapp";
+import { formatToDateTime } from "@/utils/dateUtil";
+
+const appStore = useAppStore();
+const tagsViewStore = useTagsViewStore();
+const router = useRouter();
+
+// 响应式数据
+const queryFormRef = ref();
+const formRef = ref();
+const loading = ref(false);
+const total = ref(0);
+const dialogVisible = ref(false);
+const dialogType = ref<'create' | 'edit'>('create');
+const currentApp = ref<ApplicationInfo | null>(null);
+
+// 分页查询参数
+const queryFormData = reactive<ApplicationPageQuery>({
+  page_no: 1,
+  page_size: 12,
+  name: undefined,
+  status: undefined,
+  creator: undefined,
+});
+
+// 应用列表数据
+const applicationList = ref<ApplicationInfo[]>([]);
+
+// 表单数据
+const formData = reactive<ApplicationForm>({
+  name: '',
+  access_url: '',
+  icon_url: '',
+  status: true,
+  description: '',
+});
+
+// 表单验证规则
+const formRules = reactive({
+  name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
+  access_url: [
+    { required: true, message: "请输入访问地址", trigger: "blur" },
+    { type: 'url' as const, message: "请输入正确的URL格式", trigger: "blur" }
+  ],
+  icon_url: [
+    { required: true, message: "请输入图标地址", trigger: "blur" },
+    { type: 'url' as const, message: "请输入正确的URL格式", trigger: "blur" }
+  ],
+  status: [{ required: true, message: "请选择应用状态", trigger: "change" }],
+});
+
+// 计算属性
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "500px" : "90%"));
+const dialogTitle = computed(() => dialogType.value === 'create' ? '创建应用' : '编辑应用');
+
+// 格式化时间
+const formatTime = (time: string | undefined) => {
+  if (!time) return '未知';
+  return formatToDateTime(time, 'YYYY-MM-DD HH:mm:ss');
+};
+
+// 加载应用列表
+async function loadApplicationList() {
+  loading.value = true;
+  try {
+    const response = await ApplicationAPI.getApplicationList(queryFormData);
+    applicationList.value = response.data.data.items;
+    total.value = response.data.data.total;
+  } catch (error) {
+    console.error('加载应用列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 查询
+async function handleQuery() {
+  queryFormData.page_no = 1;
+  await loadApplicationList();
+}
+
+// 重置查询
+async function handleResetQuery() {
+  queryFormRef.value?.resetFields();
+  queryFormData.page_no = 1;
+  await loadApplicationList();
+}
+
+// 分页大小改变
+async function handleSizeChange(size: number) {
+  queryFormData.page_size = size;
+  queryFormData.page_no = 1;
+  await loadApplicationList();
+}
+
+// 当前页改变
+async function handleCurrentChange(page: number) {
+  queryFormData.page_no = page;
+  await loadApplicationList();
+}
+
+// 创建应用
+function handleCreateApp() {
+  dialogType.value = 'create';
+  resetForm();
+  dialogVisible.value = true;
+}
+
+// 编辑应用
+function handleEditApp(app: ApplicationInfo) {
+  dialogType.value = 'edit';
+  currentApp.value = app;
+  Object.assign(formData, app);
+  dialogVisible.value = true;
+}
+
+// 删除应用
+async function handleDeleteApp(app: ApplicationInfo) {
+  try {
+    await ElMessageBox.confirm('确认删除该应用？', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+    
+    await ApplicationAPI.deleteApplication([app.id!]);
+    await loadApplicationList();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除应用失败:', error);
+    }
+  }
+}
+
+// 应用操作
+async function handleAppAction(command: string, app: ApplicationInfo) {
+  switch (command) {
+    case 'edit':
+      handleEditApp(app);
+      break;
+    case 'delete':
+      await handleDeleteApp(app);
+      break;
+  }
+}
+
+// 外部打开应用
+function openAppExternal(url: string | undefined) {
+  if (url) {
+    window.open(url, '_blank');
+  }
+}
+
+// 内部打开应用
+function openAppInternal(app: ApplicationInfo) {
+  if (!app.status) {
+    ElMessage.warning('应用已停用，无法打开');
+    return;
+  }
+  
+  if (!app.access_url) {
+    ElMessage.warning('应用访问地址不存在');
+    return;
+  }
+  
+  // 创建一个动态路由路径
+  const appPath = `/internal-app/${app.id}`;
+  const appName = `InternalApp${app.id}`;
+  const appTitle = app.name || '未命名应用';
+  
+  // 先导航到路由，这样可以动态设置路由的meta信息
+  router.push({
+    path: appPath,
+    query: { url: app.access_url, appId: app.id?.toString() || '', appName: appTitle }
+  }).then(() => {
+    // 导航完成后，手动添加或更新标签视图
+    nextTick(() => {
+      // 查找是否已存在该标签
+      const existingTag = tagsViewStore.visitedViews.find(tag => tag.path === appPath);
+      
+      if (existingTag) {
+        // 如果存在，更新标题
+        tagsViewStore.updateVisitedView({
+          ...existingTag,
+          title: appTitle,
+        });
+      } else {
+        // 如果不存在，添加新标签
+        tagsViewStore.addView({
+          name: appName,
+          title: appTitle,
+          path: appPath,
+          fullPath: appPath + `?url=${encodeURIComponent(app.access_url || '')}&appId=${app.id || ''}&appName=${encodeURIComponent(appTitle)}`,
+          icon: 'Monitor',
+          affix: false,
+          keepAlive: false,
+          query: { url: app.access_url, appId: app.id?.toString() || '', appName: appTitle },
+        });
+      }
+    });
+  });
+}
+
+// 重置表单
+function resetForm() {
+  Object.assign(formData, {
+    name: '',
+    access_url: '',
+    icon_url: '',
+    status: true,
+    description: '',
+  });
+  formRef.value?.resetFields();
+}
+
+// 关闭弹窗
+function handleCloseDialog() {
+  dialogVisible.value = false;
+  resetForm();
+}
+
+// 提交表单
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate();
+    
+    if (dialogType.value === 'create') {
+      await ApplicationAPI.createApplication(formData);
+    } else {
+      await ApplicationAPI.updateApplication(currentApp.value!.id!, formData);
+    }
+    
+    dialogVisible.value = false;
+    resetForm();
+    await loadApplicationList();
+  } catch (error) {
+    console.error('提交失败:', error);
+  }
+}
+
+// 初始化
+onMounted(() => {
+  loadApplicationList();
+});
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+  background-color: var(--el-bg-color-page);
+  min-height: calc(100vh - 84px);
+}
+
+.search-container {
+  background: var(--el-bg-color);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.app-grid-card {
+  height: calc(100vh - 200px);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  
+  :deep(.el-card__footer) {
+    margin-top: auto;
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+}
+
+.app-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 10px;
+  padding: 20px 0;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.app-card {
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  padding: 10px;
+  background: var(--el-bg-color);
+  transition: all 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  
+  &:hover {
+    border-color: var(--el-color-primary);
+    box-shadow: var(--el-box-shadow-light);
+  }
+}
+
+.app-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.app-avatar {
+  flex-shrink: 0;
+}
+
+.app-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.app-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin: 0 0 3px 0;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-card-body {
+  flex: 1;
+  margin-bottom: 8px;
+}
+
+.app-desc {
+  font-size: 11px;
+  color: var(--el-text-color-regular);
+  margin: 0 0 4px 0;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.app-meta {
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  color: var(--el-text-color-secondary);
+  gap: 12px;
+}
+
+.app-card-footer {
+  display: flex;
+  gap: 4px;
+  
+  .el-button {
+    font-size: 11px;
+    padding: 3px 6px;
+    flex: 1;
+    width: 40%;
+  }
+}
+
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+// 空状态样式
+.empty-state {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+</style>