diff --git a/.env b/.env
index c56e29b..afb3775 100644
--- a/.env
+++ b/.env
@@ -2,4 +2,5 @@
 VITE_APP_TITLE=楠溪屿后台管理系统
 
 # API基础URL
-VITE_API_BASE_URL=https://api.superwax.cn:4433/api
+VITE_API_BASE_URL=https://apis.codeport.online/api
+# VITE_API_BASE_URL=https://api.superwax.cn:4433/api
diff --git a/.env.production b/.env.production
index 725a2c1..be395e7 100644
--- a/.env.production
+++ b/.env.production
@@ -2,5 +2,6 @@
 VITE_APP_TITLE=楠溪屿后台管理系统
 
 # API基础URL - 生产环境
-VITE_API_BASE_URL=https://api.superwax.cn:4433/api
+VITE_API_BASE_URL=https://apis.codeport.online/api
+# VITE_API_BASE_URL=https://api.superwax.cn:4433/api
 
diff --git a/src/api/database.ts b/src/api/database.ts
index 3406c66..6aadc42 100644
--- a/src/api/database.ts
+++ b/src/api/database.ts
@@ -1,68 +1,364 @@
-import request from '@/utils/request'
-import type {
-  DatabaseType,
-  DatabaseInfo,
-  DatabaseItem,
-  CreateDatabaseRequest,
-  UpdateDatabaseRequest,
-  DatabaseConnectionInfo,
-  DatabaseListParams,
-  DatabaseListResponse
-} from '@/types/database'
+/**
+ * 数据库管理 API
+ * 通过1Panel管理数据库
+ */
+import { request } from '@/utils/request'
 
-// 获取数据库信息
-export function getDatabaseInfo(type: DatabaseType): Promise<DatabaseInfo> {
-  return request.get(`/api/database/${type}/info`)
+// ==================== 类型定义 ====================
+
+/**
+ * 应用安装状态
+ */
+export interface AppInstallStatus {
+  isExist: boolean
+  name: string
+  app: string
+  version: string
+  status: string
+  createdAt: string
+  lastBackupAt: string
+  appInstallId: number
+  containerName: string
+  installPath: string
+  httpPort: number
+  httpsPort: number
 }
 
-// 启动数据库
-export function startDatabase(type: DatabaseType): Promise<void> {
-  return request.post(`/api/database/${type}/start`)
+/**
+ * 数据库记录
+ */
+export interface DatabaseRecord {
+  id: number
+  createdAt: string
+  name: string
+  from: string
+  mysqlName: string
+  format: string
+  username: string
+  password: string
+  permission: string
+  isDelete: boolean
+  description: string
+  showPassword?: boolean  // 前端控制是否显示密码
 }
 
-// 停止数据库
-export function stopDatabase(type: DatabaseType): Promise<void> {
-  return request.post(`/api/database/${type}/stop`)
+/**
+ * 数据库列表响应
+ */
+export interface DatabaseListResponse {
+  total: number
+  items: DatabaseRecord[]
 }
 
-// 重启数据库
-export function restartDatabase(type: DatabaseType): Promise<void> {
-  return request.post(`/api/database/${type}/restart`)
+/**
+ * 创建数据库参数
+ */
+export interface CreateDatabaseParams {
+  serverId: number
+  name: string
+  username: string
+  password: string
+  format?: string // 字符集 format
+  collation?: string // 排序规则 collation (可选，后端接口没明确提到但通常MySQL需要)
+  permission?: string
+  permissionIPs?: string
+  type: string  // 数据库类型，如mysql
+  database: string  // 数据库名称，如mysql
+  from?: string // 固定 'local'
+  description?: string
 }
 
-// 获取数据库列表
-export function getDatabaseList(type: DatabaseType, params?: DatabaseListParams): Promise<DatabaseListResponse> {
-  return request.get(`/api/database/${type}/list`, { params })
+/**
+ * 删除数据库参数
+ */
+export interface DeleteDatabaseParams {
+  serverId: number
+  id: number
+  type: string  // 数据库类型，如mysql
+  database: string  // 数据库名称/应用类型
+  deleteBackup?: boolean
+  forceDelete?: boolean
 }
 
-// 创建数据库
-export function createDatabase(type: DatabaseType, data: CreateDatabaseRequest): Promise<DatabaseItem> {
-  return request.post(`/api/database/${type}`, data)
+/**
+ * 修改密码参数
+ */
+export interface ChangePasswordParams {
+  serverId: number
+  id: number
+  value: string  // 新密码 (Base64)
+  type: string   // 数据库类型
+  database: string // 数据库名称
+  from: string   // 固定 'local'
 }
 
-// 更新数据库
-export function updateDatabase(type: DatabaseType, id: number, data: UpdateDatabaseRequest): Promise<DatabaseItem> {
-  return request.put(`/api/database/${type}/${id}`, data)
+/**
+ * 更新描述参数
+ */
+export interface UpdateDescriptionParams {
+  serverId: number
+  id: number
+  description: string
 }
 
-// 删除数据库
-export function deleteDatabase(type: DatabaseType, id: number): Promise<void> {
-  return request.delete(`/api/database/${type}/${id}`)
+/**
+ * 操作应用参数
+ */
+export interface OperateAppParams {
+  serverId: number
+  operate: 'start' | 'stop' | 'restart'
+  installId: number
+  [key: string]: any
 }
 
-// 获取连接信息
-export function getDatabaseConnectionInfo(type: DatabaseType, id: number): Promise<DatabaseConnectionInfo> {
-  return request.get(`/api/database/${type}/${id}/connection`)
+// ==================== API 方法 ====================
+
+/**
+ * 检查应用安装状态（MySQL/PostgreSQL/Redis等）
+ */
+export async function checkAppInstalled(
+  serverId: number, 
+  key: string, 
+  name: string
+): Promise<AppInstallStatus> {
+  const res = await request.post<AppInstallStatus>('/platform/database/app/check', {
+    serverId,
+    key,
+    name
+  })
+  return res.data.data
 }
 
-// 导出类型
-export type {
-  DatabaseType,
-  DatabaseInfo,
-  DatabaseItem,
-  CreateDatabaseRequest,
-  UpdateDatabaseRequest,
-  DatabaseConnectionInfo,
-  DatabaseListParams,
-  DatabaseListResponse
+/**
+ * 查询数据库列表
+ */
+export async function searchDatabases(
+  serverId: number,
+  database: string,
+  page: number = 1,
+  pageSize: number = 20
+): Promise<DatabaseListResponse> {
+  const res = await request.post<DatabaseListResponse>('/platform/database/search', {
+    serverId,
+    database,
+    page,
+    pageSize
+  })
+  return res.data.data
 }
+
+/**
+ * 创建数据库
+ */
+export async function createDatabase(params: CreateDatabaseParams): Promise<void> {
+  await request.post('/platform/database/create', params)
+}
+
+/**
+ * 删除数据库
+ */
+export async function deleteDatabase(params: DeleteDatabaseParams): Promise<void> {
+  await request.post('/platform/database/delete', params)
+}
+
+/**
+ * 更新数据库描述
+ */
+export async function updateDatabaseDescription(params: UpdateDescriptionParams): Promise<void> {
+  await request.post('/platform/database/description/update', params)
+}
+
+/**
+ * 修改数据库密码
+ */
+export async function changeDatabasePassword(params: ChangePasswordParams): Promise<void> {
+  await request.post('/platform/database/password/change', params)
+}
+
+/**
+ * 操作应用（启动/停止/重启）
+ */
+export async function operateApp(params: OperateAppParams): Promise<void> {
+  await request.post('/platform/database/app/operate', params)
+}
+
+/**
+ * 获取数据库字符集排序规则选项
+ */
+export async function getFormatOptions(
+  serverId: number,
+  type: string,
+  database: string,
+  format?: string
+): Promise<string[]> {
+  const res = await request.post<string[]>('/platform/database/format/options', {
+    serverId,
+    type,
+    database,
+    format
+  })
+  return res.data.data
+}
+
+/**
+ * 应用信息
+ */
+export interface AppInfo {
+  id: number
+  name: string
+  key: string
+  shortDescZh: string
+  shortDescEn: string
+  description: string
+  icon: string
+  type: string
+  status: string
+  website: string
+  github: string
+  document: string
+  versions: string[]
+  installed: boolean
+  [key: string]: any
+}
+
+/**
+ * 应用版本详情
+ */
+export interface AppDetail {
+  id: number
+  appId: number
+  version: string
+  dockerCompose: string
+  status: string
+  enable: boolean
+  params: {
+    formFields: Array<{
+      default: any
+      envKey: string
+      label: Record<string, string>
+      labelEn: string
+      labelZh: string
+      required: boolean
+      type: string
+      random?: boolean
+      rule?: string
+    }>
+  }
+  [key: string]: any
+}
+
+/**
+ * 安装应用参数
+ */
+export interface InstallAppParams {
+  serverId: number
+  appDetailId: number
+  name: string
+  version: string
+  params: Record<string, any>
+  dockerCompose: string
+  taskID: string // 任务ID，用于查询安装日志
+  // 高级设置
+  advanced?: boolean
+  containerName?: string
+  allowPort?: boolean
+  specifyIP?: string
+  restartPolicy?: string
+  cpuQuota?: number
+  memoryLimit?: number
+  memoryUnit?: string
+  pullImage?: boolean
+  editCompose?: boolean
+  gpuConfig?: boolean
+  appID?: string
+  format?: string
+  collation?: string
+}
+
+/**
+ * 安装应用返回结果
+ */
+export interface InstallAppResult {
+  id: number
+  name: string
+  appId: number
+  appDetailId: number
+  version: string
+  status: string
+  containerName: string
+  httpPort: number
+  [key: string]: any
+}
+
+/**
+ * 任务日志响应
+ */
+export interface TaskLogResponse {
+  end: boolean
+  path: string
+  total: number
+  taskStatus: string
+  lines: string[]
+  totalLines: number
+}
+
+/**
+ * 获取应用信息（如Redis）
+ */
+export async function getAppInfo(
+  serverId: number,
+  appKey: string
+): Promise<AppInfo> {
+  const res = await request.post<AppInfo>('/platform/database/app/info', {
+    serverId,
+    appKey
+  })
+  return res.data.data
+}
+
+/**
+ * 获取应用版本详情
+ */
+export async function getAppDetail(
+  serverId: number,
+  appId: number,
+  version: string
+): Promise<AppDetail> {
+  const res = await request.post<AppDetail>('/platform/database/app/detail', {
+    serverId,
+    appId,
+    version
+  })
+  return res.data.data
+}
+
+/**
+ * 安装应用
+ */
+export async function installApp(params: InstallAppParams): Promise<InstallAppResult> {
+  const { serverId, ...restParams } = params
+  const res = await request.post<InstallAppResult>('/platform/database/app/install', {
+    serverId,
+    ...restParams
+  })
+  return res.data.data
+}
+
+/**
+ * 读取任务日志
+ */
+export async function readTaskLog(
+  serverId: number,
+  taskId: string,
+  page: number = 1,
+  pageSize: number = 500
+): Promise<TaskLogResponse> {
+  const res = await request.post<TaskLogResponse>('/platform/database/task/log', {
+    serverId,
+    taskId,
+    page,
+    pageSize
+  })
+  return res.data.data
+}
+
diff --git a/src/api/domain.ts b/src/api/domain.ts
index 1886303..3e9429b 100644
--- a/src/api/domain.ts
+++ b/src/api/domain.ts
@@ -40,6 +40,12 @@ export interface DomainInfo {
   deployStatus?: DeployStatus
   lastDeployTime?: string
   lastDeployMessage?: string
+  // 运行环境关联
+  runtimeId?: number
+  runtimeServerId?: number
+  runtimeName?: string
+  runtimeType?: string
+  runtimeDeployStatus?: DeployStatus
   // 时间
   createdAt?: string
   updatedAt?: string
@@ -135,6 +141,13 @@ export async function deployDomain(data: DomainDeployRequest): Promise<DomainDep
   return res.data.data
 }
 
+/**
+ * 删除部署（从 1Panel 删除网站）
+ */
+export async function undeployDomain(id: number) {
+  await request.post<void>(`/platform/domain/undeploy/${id}`)
+}
+
 /**
  * 检查域名 DNS 解析状态
  */
@@ -173,3 +186,48 @@ export async function syncDomainsFromCertificates(serverId: number) {
   const res = await request.post<{ syncCount: number; message: string }>(`/platform/domain/sync-from-certificates/${serverId}`)
   return res.data.data
 }
+
+/**
+ * 部署运行环境到1Panel
+ */
+export async function deployRuntime(domainId: number) {
+  const res = await request.post<DomainDeployResult>(`/platform/domain/${domainId}/deploy-runtime`)
+  return res.data.data
+}
+
+// ==================== Nginx配置相关 ====================
+
+/**
+ * Nginx配置信息
+ */
+export interface NginxConfigResult {
+  domain: string
+  path: string
+  content: string
+  name: string
+  error?: string
+}
+
+/**
+ * 获取域名Nginx配置
+ */
+export async function getNginxConfig(domainId: number): Promise<NginxConfigResult> {
+  const res = await request.get<NginxConfigResult>(`/platform/domain/${domainId}/nginx-config`)
+  return res.data.data
+}
+
+/**
+ * 保存域名Nginx配置
+ */
+export async function saveNginxConfig(domainId: number, content: string): Promise<boolean> {
+  const res = await request.put<boolean>(`/platform/domain/${domainId}/nginx-config`, { content })
+  return res.data.data
+}
+
+/**
+ * 重载Nginx
+ */
+export async function reloadNginx(domainId: number): Promise<boolean> {
+  const res = await request.post<boolean>(`/platform/domain/${domainId}/nginx-reload`)
+  return res.data.data
+}
diff --git a/src/api/file.ts b/src/api/file.ts
new file mode 100644
index 0000000..9dc3777
--- /dev/null
+++ b/src/api/file.ts
@@ -0,0 +1,148 @@
+import { request } from '@/utils/request'
+
+export interface CheckFileResult {
+  path: string
+}
+
+/**
+ * 批量检查文件是否存在
+ * @param serverId 服务器ID
+ * @param paths 文件路径列表
+ */
+export async function checkFileBatch(serverId: number, paths: string[]) {
+  const res = await request.post<string[]>('/platform/files/check', {
+    serverId,
+    paths
+  })
+  return res.data.data
+}
+
+/**
+ * 分片上传文件（注意：1Panel 不支持真正的分片合并，此方法每次只上传一个分片作为完整文件）
+ * @deprecated 使用 uploadFile 代替
+ */
+export async function uploadFileChunk(
+  serverId: number,
+  filename: string,
+  path: string,
+  chunkIndex: number,
+  chunkCount: number,
+  chunk: Blob,
+  onUploadProgress?: (progressEvent: { loaded: number; total?: number }) => void
+) {
+  const formData = new FormData()
+  formData.append('serverId', serverId.toString())
+  formData.append('filename', filename)
+  formData.append('path', path)
+  formData.append('chunkIndex', chunkIndex.toString())
+  formData.append('chunkCount', chunkCount.toString())
+  formData.append('chunk', chunk)
+
+  const res = await request.post('/platform/files/upload/chunk', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    timeout: 30 * 60 * 1000, // 30分钟超时，适合大文件分片
+    onUploadProgress
+  })
+  return res.data
+}
+
+/**
+ * 直接上传完整文件
+ * @param serverId 服务器ID
+ * @param path 目标目录路径
+ * @param file 文件对象
+ * @param onUploadProgress 上传进度回调
+ */
+export async function uploadFile(
+  serverId: number,
+  path: string,
+  file: File,
+  onUploadProgress?: (progressEvent: { loaded: number; total?: number }) => void
+) {
+  const formData = new FormData()
+  formData.append('serverId', serverId.toString())
+  formData.append('path', path)
+  formData.append('file', file)
+
+  const res = await request.post('/platform/files/upload', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    timeout: 30 * 60 * 1000, // 30分钟超时，适合大文件
+    onUploadProgress
+  })
+  return res.data
+}
+
+/**
+ * 分片上传 v2（支持真正的分片合并）
+ * @param serverId 服务器ID
+ * @param path 目标目录路径
+ * @param filename 文件名
+ * @param chunkIndex 分片索引（从0开始）
+ * @param chunkCount 分片总数
+ * @param fileSize 文件总大小
+ * @param uploadId 上传ID
+ * @param chunk 分片数据
+ * @param onUploadProgress 上传进度回调
+ */
+export async function uploadChunkV2(
+  serverId: number,
+  path: string,
+  filename: string,
+  chunkIndex: number,
+  chunkCount: number,
+  fileSize: number,
+  uploadId: string,
+  chunk: Blob,
+  onUploadProgress?: (progressEvent: { loaded: number; total?: number }) => void
+) {
+  const formData = new FormData()
+  formData.append('serverId', serverId.toString())
+  formData.append('path', path)
+  formData.append('filename', filename)
+  formData.append('chunkIndex', chunkIndex.toString())
+  formData.append('chunkCount', chunkCount.toString())
+  formData.append('fileSize', fileSize.toString())
+  formData.append('uploadId', uploadId)
+  formData.append('chunk', chunk)
+
+  const res = await request.post('/platform/files/upload/chunk/v2', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    timeout: 10 * 60 * 1000, // 10分钟超时
+    onUploadProgress
+  })
+  return res.data
+}
+
+/**
+ * 合并已上传的分片
+ * @param serverId 服务器ID
+ * @param path 目标目录路径
+ * @param filename 文件名
+ * @param chunkCount 分片总数
+ * @param fileSize 文件总大小
+ * @param uploadId 上传ID
+ */
+export async function mergeChunks(
+  serverId: number,
+  path: string,
+  filename: string,
+  chunkCount: number,
+  fileSize: number,
+  uploadId: string
+) {
+  const res = await request.post('/platform/files/upload/merge', {
+    serverId,
+    path,
+    filename,
+    chunkCount,
+    fileSize,
+    uploadId
+  })
+  return res.data
+}
diff --git a/src/api/project.ts b/src/api/project.ts
index df7cb41..d9bd9cb 100644
--- a/src/api/project.ts
+++ b/src/api/project.ts
@@ -248,3 +248,40 @@ export async function uploadFileChunk(
   return res.data.data
 }
 
+// ==================== Nginx配置相关 ====================
+
+/**
+ * Nginx配置信息
+ */
+export interface NginxConfigResult {
+  domain: string
+  path: string
+  content: string
+  name: string
+  error?: string
+}
+
+/**
+ * 获取项目Nginx配置
+ */
+export async function getNginxConfig(projectId: number): Promise<NginxConfigResult> {
+  const res = await request.get<NginxConfigResult>(`/platform/project/${projectId}/nginx-config`)
+  return res.data.data
+}
+
+/**
+ * 保存项目Nginx配置
+ */
+export async function saveNginxConfig(projectId: number, content: string): Promise<boolean> {
+  const res = await request.put<boolean>(`/platform/project/${projectId}/nginx-config`, { content })
+  return res.data.data
+}
+
+/**
+ * 重载Nginx
+ */
+export async function reloadNginx(projectId: number): Promise<boolean> {
+  const res = await request.post<boolean>(`/platform/project/${projectId}/nginx-reload`)
+  return res.data.data
+}
+
diff --git a/src/api/runtime.ts b/src/api/runtime.ts
new file mode 100644
index 0000000..b2e14bb
--- /dev/null
+++ b/src/api/runtime.ts
@@ -0,0 +1,310 @@
+import request from '@/utils/request'
+
+/**
+ * 运行时类型
+ */
+export interface RuntimeType {
+  key: string
+  label: string
+}
+
+/**
+ * 端口映射
+ */
+export interface ExposedPort {
+  hostPort: number
+  containerPort: number
+  hostIP: string
+}
+
+/**
+ * 运行时参数
+ */
+export interface RuntimeParams {
+  CODE_DIR?: string
+  CONTAINER_NAME?: string
+  CONTAINER_PACKAGE_URL?: string
+  CONTAINER_PORT_0?: string
+  CUSTOM_SCRIPT?: string
+  EXEC_SCRIPT?: string
+  HOST_IP?: string
+  HOST_IP_0?: string
+  HOST_PORT_0?: string
+  NODE_VERSION?: string
+  PACKAGE_MANAGER?: string
+  RUN_INSTALL?: string
+  [key: string]: any
+}
+
+/**
+ * 运行时记录
+ */
+export interface RuntimeRecord {
+  id: number
+  name: string
+  resource: string
+  appDetailID: number
+  appID: number
+  source: string
+  status: string
+  type: string
+  image: string
+  params: RuntimeParams
+  message: string
+  version: string
+  createdAt: string
+  codeDir: string
+  appParams: any
+  port: string
+  path: string
+  exposedPorts: ExposedPort[]
+  taskId?: string // 任务ID
+  environments: any
+  volumes: any
+  extraHosts: any
+  containerStatus: string
+  container: string
+  remark: string
+}
+
+/**
+ * 运行时列表响应
+ */
+export interface RuntimeListResponse {
+  total: number
+  items: RuntimeRecord[]
+}
+
+/**
+ * 搜索运行时列表
+ */
+export async function searchRuntimes(
+  serverId: number,
+  type: string,
+  page: number = 1,
+  pageSize: number = 20
+): Promise<RuntimeListResponse> {
+  const res = await request.post<any>('/platform/runtime/search', {
+    serverId,
+    type,
+    page,
+    pageSize
+  })
+  return res.data.data as RuntimeListResponse
+}
+
+/**
+ * 搜索正在运行的运行时列表
+ * @param serverId 服务器ID
+ * @param type 运行时类型（java/node）
+ * @param page 页码
+ * @param pageSize 每页数量
+ */
+export async function searchRunningRuntimes(
+  serverId: number,
+  type: string,
+  page: number = 1,
+  pageSize: number = 100
+): Promise<RuntimeListResponse> {
+  const res = await request.post<any>('/platform/runtime/search', {
+    serverId,
+    type,
+    page,
+    pageSize,
+    status: 'Running'
+  })
+  return res.data.data as RuntimeListResponse
+}
+
+/**
+ * 同步运行时状态
+ */
+export async function syncRuntimes(serverId: number): Promise<void> {
+  await request.post('/platform/runtime/sync', {
+    serverId
+  })
+}
+
+/**
+ * 操作运行时（启动/停止/重启）
+ */
+export async function operateRuntime(params: {
+  serverId: number
+  id: number
+  operate: 'start' | 'stop' | 'restart'
+}): Promise<void> {
+  await request.post('/platform/runtime/operate', params)
+}
+
+/**
+ * 删除运行时
+ */
+export async function deleteRuntime(params: {
+  serverId: number
+  id: number
+  forceDelete?: boolean
+  deleteFolder?: boolean
+  codeDir?: string
+}): Promise<void> {
+  await request.post('/platform/runtime/delete', params)
+}
+
+/**
+ * 运行时应用信息
+ */
+export interface RuntimeApp {
+  id: number
+  name: string
+  key: string
+  description: string
+  status: string
+  installed: boolean
+  type: string
+  versions?: string[]
+  tags?: string[]
+}
+
+/**
+ * 运行时应用列表响应
+ */
+export interface RuntimeAppListResponse {
+  total: number
+  items: RuntimeApp[]
+}
+
+/**
+ * 搜索运行时应用列表
+ */
+export async function searchRuntimeApps(
+  serverId: number,
+  type: string,
+  page: number = 1,
+  pageSize: number = 20
+): Promise<RuntimeAppListResponse> {
+  const res = await request.post<any>('/platform/runtime/apps/search', {
+    serverId,
+    type,
+    page,
+    pageSize
+  })
+  return res.data.data as RuntimeAppListResponse
+}
+
+/**
+ * 获取应用信息（含版本列表）
+ */
+export async function getRuntimeAppInfo(
+  serverId: number,
+  appKey: string
+): Promise<RuntimeApp> {
+  const res = await request.post<any>('/platform/runtime/app/info', {
+    serverId,
+    appKey
+  })
+  return res.data.data as RuntimeApp
+}
+
+/**
+ * 运行时版本详情
+ */
+export interface RuntimeVersionDetail {
+  id: number
+  appId: number
+  version: string
+  dockerCompose: string
+  status: string
+  enable: boolean
+  params: any
+}
+
+/**
+ * 获取运行时版本详情
+ */
+export async function getRuntimeDetail(
+  serverId: number,
+  appId: number,
+  version: string
+): Promise<RuntimeVersionDetail> {
+  const res = await request.post<any>('/platform/runtime/detail', {
+    serverId,
+    appId,
+    version
+  })
+  return res.data.data as RuntimeVersionDetail
+}
+
+/**
+ * 创建运行时参数
+ */
+export interface CreateRuntimeParams {
+  serverId: number
+  appDetailId: number
+  name: string
+  type: string
+  image: string
+  version: string
+  source: string
+  codeDir: string
+  params: Record<string, any>
+  exposedPorts?: ExposedPort[]
+  remark?: string
+}
+
+/**
+ * 创建运行时
+ */
+export async function createRuntime(params: CreateRuntimeParams): Promise<void> {
+  await request.post('/platform/runtime/create', params)
+}
+
+/**
+ * 获取容器日志
+ */
+export async function getContainerLog(
+  serverId: number,
+  containerName: string,
+  composePath?: string
+): Promise<{ log: string }> {
+  // 注意：这里由于后端返回的是 Map {log: "..."}，所以类型匹配 { log: string }
+  const res = await request.post<any>('/platform/runtime/container/log', {
+    serverId,
+    containerName,
+    composePath
+  })
+  return res.data.data
+}
+
+/**
+ * 更新运行时参数
+ */
+export interface UpdateRuntimeParams {
+  serverId: number
+  id: number
+  remark?: string
+  exposedPorts?: ExposedPort[]
+  params?: Record<string, any>
+  codeDir?: string
+  [key: string]: any
+}
+
+/**
+ * 更新运行时
+ */
+export async function updateRuntime(params: UpdateRuntimeParams): Promise<void> {
+  await request.post('/platform/runtime/update', params)
+}
+
+export interface NodeScript {
+  name: string
+  script: string
+}
+
+/**
+ * 获取Node脚本
+ */
+export async function getNodeScripts(serverId: number, codeDir: string): Promise<NodeScript[]> {
+  const res = await request.post<NodeScript[]>('/platform/runtime/node/scripts', { serverId, codeDir })
+  // @ts-ignore
+  return res.data.data
+}
+
diff --git a/src/api/system/dept.ts b/src/api/system/dept.ts
index 14922a0..556b8e8 100644
--- a/src/api/system/dept.ts
+++ b/src/api/system/dept.ts
@@ -1,35 +1,7 @@
 import { request } from '@/utils/request'
 
-// 部门类型定义
-export interface DeptRecord {
-  id: number
-  parentId: number
-  name: string
-  code?: string
-  leaderId?: number
-  leaderName?: string
-  phone?: string
-  email?: string
-  sort: number
-  status: number
-  remark?: string
-  createdAt?: string
-  children?: DeptRecord[]
-}
-
-export interface DeptFormData {
-  id?: number
-  parentId: number
-  name: string
-  code?: string
-  leaderId?: number
-  leaderName?: string
-  phone?: string
-  email?: string
-  sort: number
-  status: number
-  remark?: string
-}
+import type { DeptRecord, DeptFormData } from '@/types/system/dept'
+export type { DeptRecord, DeptFormData }
 
 /**
  * 获取部门树
diff --git a/src/components.d.ts b/src/components.d.ts
index d407097..a17ad3a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -33,6 +33,7 @@ declare module 'vue' {
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AFormItemRest: typeof import('ant-design-vue/es')['FormItemRest']
     AInput: typeof import('ant-design-vue/es')['Input']
+    AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
@@ -40,6 +41,9 @@ declare module 'vue' {
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
+    AList: typeof import('ant-design-vue/es')['List']
+    AListItem: typeof import('ant-design-vue/es')['ListItem']
+    AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
@@ -47,9 +51,11 @@ declare module 'vue' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     APageHeader: typeof import('ant-design-vue/es')['PageHeader']
     APagination: typeof import('ant-design-vue/es')['Pagination']
+    ApartmentOutlined: typeof import('@ant-design/icons-vue')['ApartmentOutlined']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     APopover: typeof import('ant-design-vue/es')['Popover']
     ApprovalDrawer: typeof import('./components/ApprovalDrawer/index.vue')['default']
+    AppstoreOutlined: typeof import('@ant-design/icons-vue')['AppstoreOutlined']
     AProgress: typeof import('ant-design-vue/es')['Progress']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
@@ -57,7 +63,10 @@ declare module 'vue' {
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     AResult: typeof import('ant-design-vue/es')['Result']
     ARow: typeof import('ant-design-vue/es')['Row']
+    ArrowLeftOutlined: typeof import('@ant-design/icons-vue')['ArrowLeftOutlined']
+    ArrowUpOutlined: typeof import('@ant-design/icons-vue')['ArrowUpOutlined']
     ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOptGroup: typeof import('ant-design-vue/es')['SelectOptGroup']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
@@ -76,23 +85,73 @@ declare module 'vue' {
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATree: typeof import('ant-design-vue/es')['Tree']
     ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     BudgetDetailModal: typeof import('./components/finance/budget/BudgetDetailModal.vue')['default']
     BudgetFormModal: typeof import('./components/finance/budget/BudgetFormModal.vue')['default']
+    CheckCircleOutlined: typeof import('@ant-design/icons-vue')['CheckCircleOutlined']
+    CheckOutlined: typeof import('@ant-design/icons-vue')['CheckOutlined']
+    ClockCircleOutlined: typeof import('@ant-design/icons-vue')['ClockCircleOutlined']
+    CloseCircleFilled: typeof import('@ant-design/icons-vue')['CloseCircleFilled']
+    CloseCircleOutlined: typeof import('@ant-design/icons-vue')['CloseCircleOutlined']
+    CloseOutlined: typeof import('@ant-design/icons-vue')['CloseOutlined']
+    CloudServerOutlined: typeof import('@ant-design/icons-vue')['CloudServerOutlined']
+    CloudUploadOutlined: typeof import('@ant-design/icons-vue')['CloudUploadOutlined']
+    ClusterOutlined: typeof import('@ant-design/icons-vue')['ClusterOutlined']
+    CopyOutlined: typeof import('@ant-design/icons-vue')['CopyOutlined']
+    DatabaseOutlined: typeof import('@ant-design/icons-vue')['DatabaseOutlined']
+    DeleteOutlined: typeof import('@ant-design/icons-vue')['DeleteOutlined']
+    DesktopOutlined: typeof import('@ant-design/icons-vue')['DesktopOutlined']
     DictFormModal: typeof import('./components/system/dict/DictFormModal.vue')['default']
     DictItemDrawer: typeof import('./components/system/dict/DictItemDrawer.vue')['default']
+    DislikeOutlined: typeof import('@ant-design/icons-vue')['DislikeOutlined']
+    DownloadOutlined: typeof import('@ant-design/icons-vue')['DownloadOutlined']
     DuplicateFileModal: typeof import('./components/DuplicateFileModal.vue')['default']
     DynamicMenu: typeof import('./components/DynamicMenu/index.vue')['default']
+    EditOutlined: typeof import('@ant-design/icons-vue')['EditOutlined']
+    EyeInvisibleOutlined: typeof import('@ant-design/icons-vue')['EyeInvisibleOutlined']
+    EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined']
+    FileAddOutlined: typeof import('@ant-design/icons-vue')['FileAddOutlined']
+    FileOutlined: typeof import('@ant-design/icons-vue')['FileOutlined']
+    FileTextOutlined: typeof import('@ant-design/icons-vue')['FileTextOutlined']
+    FileUploader: typeof import('./components/FileUploader.vue')['default']
     FlowEditor: typeof import('./components/FlowEditor/index.vue')['default']
+    FolderAddOutlined: typeof import('@ant-design/icons-vue')['FolderAddOutlined']
+    FolderFilled: typeof import('@ant-design/icons-vue')['FolderFilled']
+    FolderOpenOutlined: typeof import('@ant-design/icons-vue')['FolderOpenOutlined']
+    FolderOutlined: typeof import('@ant-design/icons-vue')['FolderOutlined']
+    FolderSelector: typeof import('./components/FolderSelector.vue')['default']
+    GlobalOutlined: typeof import('@ant-design/icons-vue')['GlobalOutlined']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    HistoryOutlined: typeof import('@ant-design/icons-vue')['HistoryOutlined']
     IconPicker: typeof import('./components/common/IconPicker.vue')['default']
+    LikeOutlined: typeof import('@ant-design/icons-vue')['LikeOutlined']
+    LinkOutlined: typeof import('@ant-design/icons-vue')['LinkOutlined']
+    LockOutlined: typeof import('@ant-design/icons-vue')['LockOutlined']
     MenuFormModal: typeof import('./components/system/menu/MenuFormModal.vue')['default']
+    MessageOutlined: typeof import('@ant-design/icons-vue')['MessageOutlined']
+    MoreOutlined: typeof import('@ant-design/icons-vue')['MoreOutlined']
+    PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
     ProjectUpload: typeof import('./components/ProjectUpload.vue')['default']
+    ReloadOutlined: typeof import('@ant-design/icons-vue')['ReloadOutlined']
     ResetPasswordModal: typeof import('./components/system/user/ResetPasswordModal.vue')['default']
+    RightOutlined: typeof import('@ant-design/icons-vue')['RightOutlined']
     RoleFormModal: typeof import('./components/system/role/RoleFormModal.vue')['default']
+    RollbackOutlined: typeof import('@ant-design/icons-vue')['RollbackOutlined']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SafetyCertificateOutlined: typeof import('@ant-design/icons-vue')['SafetyCertificateOutlined']
+    SaveOutlined: typeof import('@ant-design/icons-vue')['SaveOutlined']
+    SearchOutlined: typeof import('@ant-design/icons-vue')['SearchOutlined']
+    SwapOutlined: typeof import('@ant-design/icons-vue')['SwapOutlined']
+    SyncOutlined: typeof import('@ant-design/icons-vue')['SyncOutlined']
+    TagOutlined: typeof import('@ant-design/icons-vue')['TagOutlined']
+    TaskLogViewer: typeof import('./components/TaskLogViewer.vue')['default']
+    ThunderboltOutlined: typeof import('@ant-design/icons-vue')['ThunderboltOutlined']
     UploadCore: typeof import('./components/UploadCore.vue')['default']
+    UploadOutlined: typeof import('@ant-design/icons-vue')['UploadOutlined']
     UserFormModal: typeof import('./components/system/user/UserFormModal.vue')['default']
+    UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
+    WarningOutlined: typeof import('@ant-design/icons-vue')['WarningOutlined']
   }
 }
diff --git a/src/components/FileUploader.vue b/src/components/FileUploader.vue
new file mode 100644
index 0000000..d8134a3
--- /dev/null
+++ b/src/components/FileUploader.vue
@@ -0,0 +1,457 @@
+<template>
+  <a-drawer
+    v-model:open="visible"
+    title="上传文件"
+    placement="right"
+    :width="600"
+    :maskClosable="false"
+    @close="handleClose"
+  >
+    <div class="uploader-container">
+      <!-- 顶部操作栏 -->
+      <div class="action-bar">
+        <a-space>
+          <a-upload
+            :file-list="fileList"
+            :multiple="true"
+            :before-upload="beforeUpload"
+            :show-upload-list="false"
+          >
+            <a-button type="primary">
+              <template #icon><UploadOutlined /></template>
+              上传文件
+            </a-button>
+          </a-upload>
+          
+          <!-- webkitdirectory 属性用于选择文件夹，但在标准 a-upload 中可能需要自定义属性 -->
+          <a-upload
+            :file-list="fileList"
+            :before-upload="beforeUpload"
+            :show-upload-list="false"
+            directory
+          >
+            <a-button type="primary">
+              <template #icon><FolderOpenOutlined /></template>
+              上传文件夹
+            </a-button>
+          </a-upload>
+
+          <a-button @click="clearFiles" :disabled="fileList.length === 0">清空列表</a-button>
+        </a-space>
+      </div>
+
+      <!-- 拖拽区域 -->
+      <div class="upload-area">
+        <a-upload-dragger
+          :file-list="fileList"
+          :multiple="true"
+          :before-upload="beforeUpload"
+          :show-upload-list="false"
+          :customRequest="customRequest"
+          class="upload-dragger"
+        >
+          <div class="dragger-content">
+            <p class="ant-upload-drag-icon">
+              <CloudUploadOutlined />
+            </p>
+            <p class="ant-upload-text">将需要上传的文件拖拽到此处</p>
+          </div>
+        </a-upload-dragger>
+      </div>
+
+      <!-- 文件列表 -->
+      <div class="file-list-header" v-if="fileList.length > 0">
+        <span>待上传列表 ({{ fileList.length }})</span>
+      </div>
+      
+      <div class="upload-list" v-if="fileList.length > 0">
+        <a-list :data-source="fileList" size="small">
+          <template #renderItem="{ item, index }">
+            <a-list-item>
+              <template #actions>
+                 <a-button type="text" danger size="small" @click="removeFile(index)">
+                    <DeleteOutlined />
+                 </a-button>
+              </template>
+              <a-list-item-meta>
+                <template #title>
+                  <span :class="{ 'error-text': item.status === 'error', 'success-text': item.status === 'done' }">
+                    {{ item.name }}
+                  </span>
+                </template>
+                <template #description>
+                  <a-progress 
+                    v-if="item.status === 'uploading'" 
+                    :percent="item.percent" 
+                    size="small" 
+                  />
+                  <span v-else-if="item.status === 'error'" class="error-text">上传失败</span>
+                  <span v-else-if="item.status === 'done'" class="success-text">上传成功</span>
+                  <span v-else>{{ formatSize(item.size) }}</span>
+                </template>
+                <template #avatar>
+                   <FileOutlined />
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+          </template>
+        </a-list>
+      </div>
+       <div v-else class="empty-state">
+          <InboxOutlined style="font-size: 48px; color: #d9d9d9;" />
+          <p style="color: #999; margin-top: 10px;">暂无文件</p>
+       </div>
+    </div>
+
+    <template #footer>
+      <div class="footer-actions">
+        <a-button @click="handleClose">取消</a-button>
+        <a-button 
+          type="primary" 
+          :loading="uploading" 
+          @click="checkAndUpload" 
+          :disabled="fileList.length === 0 || uploading"
+        >
+          {{ uploading ? '上传中...' : '确定上传' }} ({{ fileList.length }})
+        </a-button>
+      </div>
+    </template>
+    
+    <!-- 同名文件提示 -->
+    <DuplicateFileModal
+      v-model:visible="duplicateModalVisible"
+      :duplicate-files="duplicateFiles"
+      @skip-all="handleSkipDuplicates"
+      @overwrite-all="handleOverwriteDuplicates"
+    />
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { message, Modal } from 'ant-design-vue'
+import type { UploadProps, UploadFile } from 'ant-design-vue'
+import { 
+  UploadOutlined, 
+  FolderOpenOutlined, 
+  CloudUploadOutlined, 
+  FileOutlined,
+  DeleteOutlined,
+  InboxOutlined
+} from '@ant-design/icons-vue'
+import request from '@/utils/request'
+import axios from 'axios'
+import DuplicateFileModal from './DuplicateFileModal.vue'
+import { checkFileBatch, uploadFile } from '@/api/file'
+import type { DuplicateFile } from '@/types'
+
+const props = defineProps<{
+  serverId: number
+  path: string
+}>()
+
+const visible = ref(false)
+const fileList = ref<UploadFile[]>([])
+const uploading = ref(false)
+const duplicateModalVisible = ref(false)
+const duplicateFiles = ref<DuplicateFile[]>([])
+
+// 辅助函数：更新文件进度并强制触发 Vue 响应式更新
+const updateFileProgress = (file: UploadFile, percent: number, status?: UploadFile['status']) => {
+  const index = fileList.value.findIndex(f => f.uid === file.uid)
+  if (index !== -1) {
+    const updated = { ...fileList.value[index], percent: Math.floor(percent) }
+    if (status !== undefined) {
+      updated.status = status
+    }
+    fileList.value[index] = updated
+  }
+}
+
+// 暴露打开方法给父组件
+const open = () => {
+  visible.value = true
+  fileList.value = []
+  uploading.value = false
+}
+
+// 关闭处理
+const handleClose = () => {
+  if (uploading.value) {
+    message.warning('正在上传中，请稍后')
+    return
+  }
+  visible.value = false
+}
+
+// 拦截自动上传
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+  // Add to list manually to control state better
+  fileList.value = [...fileList.value, file]
+  return false // Prevent auto upload
+}
+
+// 也就是阻止默认的XHR请求，虽然beforeUpload返回false已经阻止了，
+// 但UploadDragger有时候行为不一致，保留这个空实现更安全
+const customRequest = ({ onSuccess }: any) => {
+  onSuccess()
+}
+
+// 移除文件
+const removeFile = (index: number) => {
+  const newFileList = [...fileList.value]
+  newFileList.splice(index, 1)
+  fileList.value = newFileList
+}
+
+// 清空列表
+const clearFiles = () => {
+  fileList.value = []
+}
+
+// 格式化大小
+const formatSize = (bytes: number | undefined) => {
+  if (bytes === undefined) return '0 B'
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+// 检查文件并上传
+const checkAndUpload = async () => {
+  if (fileList.value.length === 0) return
+
+  // 1. 构建检查路径
+  const basePath = props.path.replace(/\/$/, '')
+  // 过滤掉已经上传成功的
+  const pendingFiles = fileList.value.filter(f => f.status !== 'done')
+  if (pendingFiles.length === 0) {
+      if (fileList.value.some(f => f.status === 'done')) {
+          message.success('文件已全部上传')
+          visible.value = false
+      }
+      return
+  }
+  
+  const pathsToCheck = pendingFiles.map(f => {
+      // 这里的 UploadFile 可能是 a-upload 生成的，没有 path 属性，使用 name
+      const relativePath = (f as any).webkitRelativePath || f.name
+      return `${basePath}/${relativePath}`
+  })
+
+  // 2. 调用检查接口
+  try {
+      uploading.value = true
+      const existingPaths = await checkFileBatch(props.serverId, pathsToCheck)
+      uploading.value = false
+      
+      if (existingPaths && existingPaths.length > 0) {
+          // 发现重复文件
+          const duplicates: DuplicateFile[] = []
+          const existingSet = new Set(existingPaths)
+          
+          for (let i = 0; i < pendingFiles.length; i++) {
+              const file = pendingFiles[i]
+              const relativePath = (file as any).webkitRelativePath || file.name
+              const fullPath = `${basePath}/${relativePath}`
+              
+              if (existingSet.has(fullPath)) {
+                  duplicates.push({
+                      uid: file.uid,
+                      name: file.name,
+                      path: relativePath,
+                      size: file.size,
+                      file: file.originFileObj as File
+                  })
+              }
+          }
+          
+          if (duplicates.length > 0) {
+              duplicateFiles.value = duplicates
+              duplicateModalVisible.value = true
+              return
+          }
+      }
+      
+      // 没有重复，直接上传
+      startUpload()
+      
+  } catch (error) {
+      console.error(error)
+      uploading.value = false
+      
+      // 显示确认框，让用户选择是否跳过检查直接上传
+      Modal.confirm({
+          title: '检查文件失败',
+          content: '无法检查服务器上是否存在同名文件（可能是网络问题）。是否跳过检查直接上传？\n\n注意：如果服务器上存在同名文件，将会被覆盖。',
+          okText: '直接上传',
+          cancelText: '取消',
+          onOk: () => {
+              startUpload()
+          }
+      })
+  }
+}
+
+// 跳过重复
+const handleSkipDuplicates = () => {
+  // 从 fileList 中移除重复的
+  const dupeUids = new Set(duplicateFiles.value.map(d => d.uid))
+  fileList.value = fileList.value.filter(f => !dupeUids.has(f.uid))
+  duplicateFiles.value = []
+  
+  if (fileList.value.length > 0) {
+      startUpload()
+  } else {
+      visible.value = false
+  }
+}
+
+// 覆盖重复
+const handleOverwriteDuplicates = () => {
+  // 不做处理，直接上传（因为上传接口支持 overwrite）
+  duplicateFiles.value = []
+  startUpload()
+}
+
+// 开始上传
+const startUpload = async () => {
+  if (fileList.value.length === 0) return
+  
+  uploading.value = true
+  
+  for (const file of fileList.value) {
+    if (file.status === 'done') continue // Skip already uploaded
+    
+    // 使用辅助函数更新状态
+    updateFileProgress(file, 0, 'uploading')
+    
+    try {
+      // 获取实际的 File 对象，可能在 originFileObj 中或文件本身就是 File
+      const realFile = (file.originFileObj || file) as File
+      
+      // 检查文件对象是否有效
+      if (!realFile || typeof realFile.size !== 'number') {
+        throw new Error('无效的文件对象')
+      }
+      
+      const basePath = props.path.replace(/\/$/, '')
+      const relativePath = (file as any).webkitRelativePath || file.name
+      // 1Panel 的 upload 接口 expects "path" to be the DIRECTORY where file is saved.
+      // 所以我们传 props.path (如果 relativePath 只有文件名)
+      // 如果 relativePath 包含子目录（如 'folder/file.txt'），我们需要传 props.path + '/folder'
+      
+      let targetDir = basePath
+      const lastSlashIndex = relativePath.lastIndexOf('/')
+      if (lastSlashIndex > 0) {
+         targetDir = `${basePath}/${relativePath.substring(0, lastSlashIndex)}`
+      }
+      
+      // 使用直接上传（1Panel 分片上传 API 参数不明确，暂时禁用分片上传）
+      await uploadFile(
+          props.serverId,
+          targetDir,
+          realFile,
+          (progressEvent) => {
+            if (progressEvent.total) {
+              const percent = (progressEvent.loaded / progressEvent.total) * 100
+              updateFileProgress(file, percent)
+            }
+          }
+      )
+      
+      // 上传成功
+      updateFileProgress(file, 100, 'done')
+    } catch (error: any) {
+      console.error('Upload failed', error)
+      updateFileProgress(file, 0, 'error')
+      
+      // 显示更详细的错误信息
+      const errorMsg = error?.response?.data?.message || error?.message || '未知错误'
+      message.error(`文件 ${file.name} 上传失败: ${errorMsg}`)
+    }
+  }
+  
+  uploading.value = false
+  
+  // Check if all success
+  const allSuccess = fileList.value.every(f => f.status === 'done')
+  if (allSuccess) {
+      message.success('所有文件上传成功')
+      setTimeout(() => {
+          visible.value = false
+          // Emit event to refresh parent list
+          emit('upload-success')
+      }, 1000)
+  } else {
+      message.warn('部分文件上传失败，请重试')
+  }
+}
+
+const emit = defineEmits<{
+  (e: 'upload-success'): void
+}>()
+
+defineExpose({
+  open
+})
+</script>
+
+<style scoped>
+.uploader-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.action-bar {
+  margin-bottom: 16px;
+}
+
+.upload-area {
+  margin-bottom: 24px;
+}
+
+.dragger-content {
+  padding: 30px 0;
+}
+
+.file-list-header {
+  margin-bottom: 8px;
+  font-weight: bold;
+  color: #333;
+}
+
+.upload-list {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed #d9d9d9;
+    border-radius: 4px;
+    background-color: #fafafa;
+}
+
+.footer-actions {
+  text-align: right;
+}
+
+.error-text {
+  color: #ff4d4f;
+}
+
+.success-text {
+  color: #52c41a;
+}
+</style>
diff --git a/src/components/FolderSelector.vue b/src/components/FolderSelector.vue
new file mode 100644
index 0000000..8763c5f
--- /dev/null
+++ b/src/components/FolderSelector.vue
@@ -0,0 +1,412 @@
+<template>
+  <div class="folder-selector">
+    <a-input
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      readonly
+      @click="!disabled && openModal()"
+    >
+      <template #prefix>
+        <FolderOutlined 
+          class="folder-icon" 
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1 }"
+          @click.stop="!disabled && openModal()" 
+        />
+      </template>
+    </a-input>
+
+    <!-- 文件列表弹窗 -->
+    <a-modal
+      v-model:open="modalVisible"
+      title="文件列表"
+      :width="600"
+      :maskClosable="false"
+      @ok="handleConfirm"
+      @cancel="handleCancel"
+    >
+      <div class="folder-browser">
+        <!-- 当前路径 -->
+        <div class="path-bar">
+          <a-input v-model:value="currentPath" readonly>
+            <template #prefix>
+              <HomeOutlined />
+            </template>
+          </a-input>
+        </div>
+
+        <!-- 操作栏 -->
+        <div class="action-bar">
+          <a-button type="link" @click="goBack" :disabled="currentPath === '/'">
+            返回上一级
+          </a-button>
+          <div class="right-actions">
+            <a-button type="link" @click="handleNewFolder">新建文件夹</a-button>
+            <a-button type="link" @click="handleNewFile">新建文件</a-button>
+          </div>
+        </div>
+
+        <!-- 文件/文件夹列表 -->
+        <div class="file-list">
+          <a-spin :spinning="loading">
+            <div
+              v-for="item in fileList"
+              :key="item.name"
+              class="file-item"
+              :class="{ selected: selectedPath === getFullPath(item.name) }"
+              @click="handleSelect(item)"
+              @dblclick="handleDoubleClick(item)"
+            >
+              <FolderFilled v-if="item.isDir" class="icon folder" />
+              <FileOutlined v-else class="icon file" />
+              <span class="name">{{ item.name }}</span>
+              <a-popconfirm
+                title="确定删除吗？"
+                @confirm="handleDelete(item)"
+                @click.stop
+              >
+                <a-button type="text" danger size="small" class="delete-btn">
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-popconfirm>
+            </div>
+            <div v-if="!loading && fileList.length === 0" class="empty">
+              当前目录为空
+            </div>
+          </a-spin>
+        </div>
+
+        <!-- 当前选中 -->
+        <div class="selected-path">
+          <span>当前选中:</span>
+          <a-tag v-if="selectedPath" color="blue">{{ selectedPath }}</a-tag>
+          <span v-else class="no-select">未选择</span>
+        </div>
+      </div>
+
+      <!-- 新建文件夹对话框 -->
+      <a-modal
+        v-model:open="newFolderVisible"
+        title="新建文件夹"
+        :width="400"
+        @ok="confirmNewFolder"
+      >
+        <a-input v-model:value="newFolderName" placeholder="请输入文件夹名称" />
+      </a-modal>
+
+      <a-modal
+        v-model:open="newFileVisible"
+        title="新建文件"
+        :width="400"
+        @ok="confirmNewFile"
+      >
+        <a-input v-model:value="newFileName" placeholder="请输入文件名称" />
+      </a-modal>
+      
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { message } from 'ant-design-vue'
+import {
+  FolderOutlined,
+  FolderFilled,
+  FileOutlined,
+  HomeOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons-vue'
+import request from '@/utils/request'
+
+interface FileItem {
+  name: string
+  isDir: boolean
+  size?: number
+  modTime?: string
+}
+
+const props = defineProps<{
+  modelValue: string
+  serverId: number
+  placeholder?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+// 弹窗状态
+const modalVisible = ref(false)
+const loading = ref(false)
+const currentPath = ref('/')
+const selectedPath = ref('')
+const fileList = ref<FileItem[]>([])
+
+// 新建文件夹
+const newFolderVisible = ref(false)
+const newFolderName = ref('')
+const newFileVisible = ref(false)
+const newFileName = ref('')
+
+// 打开弹窗
+function openModal() {
+  modalVisible.value = true
+  currentPath.value = props.modelValue || '/'
+  selectedPath.value = props.modelValue || ''
+  loadFiles()
+}
+
+// 加载文件列表
+async function loadFiles() {
+  if (!props.serverId) {
+    message.warning('请先选择服务器')
+    return
+  }
+
+  loading.value = true
+  try {
+    const res = await request.post<any>('/platform/files/list', {
+      serverId: props.serverId,
+      path: currentPath.value
+    })
+    
+    if (res.data.code === 200) {
+      fileList.value = (res.data.data.items || [])
+        // .filter((item: FileItem) => item.isDir) // 移除过滤，显示所有文件
+        .sort((a: FileItem, b: FileItem) => {
+          // 文件夹排在前面
+          if (a.isDir && !b.isDir) return -1;
+          if (!a.isDir && b.isDir) return 1;
+          return a.name.localeCompare(b.name);
+        })
+    } else {
+      message.error(res.data.message || '加载失败')
+    }
+  } catch (error: any) {
+    console.error('加载文件列表失败:', error)
+    message.error('加载文件列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 返回上一级
+function goBack() {
+  if (currentPath.value === '/') return
+  
+  const parts = currentPath.value.split('/').filter(Boolean)
+  parts.pop()
+  currentPath.value = '/' + parts.join('/')
+  if (!currentPath.value) currentPath.value = '/'
+  loadFiles()
+}
+
+// 获取完整路径
+function getFullPath(name: string): string {
+  if (currentPath.value === '/') {
+    return '/' + name
+  }
+  return currentPath.value + '/' + name
+}
+
+// 选择项目
+function handleSelect(item: FileItem) {
+  if (item.isDir) {
+    selectedPath.value = getFullPath(item.name)
+  }
+}
+
+// 双击进入目录
+function handleDoubleClick(item: FileItem) {
+  if (item.isDir) {
+    currentPath.value = getFullPath(item.name)
+    loadFiles()
+  }
+}
+
+// 新建文件夹
+function handleNewFolder() {
+  newFolderName.value = ''
+  newFolderVisible.value = true
+}
+
+// 确认新建文件夹
+async function confirmNewFolder() {
+  if (!newFolderName.value.trim()) {
+    message.warning('请输入文件夹名称')
+    return
+  }
+
+  try {
+    const newPath = getFullPath(newFolderName.value)
+    await request.post('/platform/files/mkdir', {
+      serverId: props.serverId,
+      path: newPath
+    })
+    message.success('创建成功')
+    newFolderVisible.value = false
+    loadFiles()
+  } catch (error: any) {
+    // 显示具体错误信息
+    const msg = error.response?.data?.message || error.message || '创建失败'
+    message.error(msg)
+  }
+}
+
+// 删除文件/文件夹
+async function handleDelete(item: FileItem) {
+  try {
+    const path = getFullPath(item.name)
+    await request.post('/platform/files/delete', {
+      serverId: props.serverId,
+      path,
+      isDir: item.isDir
+    })
+    message.success('删除成功')
+    loadFiles()
+  } catch (error: any) {
+    const msg = error.response?.data?.message || error.message || '删除失败'
+    message.error(msg)
+  }
+}
+
+// 新建文件
+function handleNewFile() {
+  newFileName.value = ''
+  newFileVisible.value = true
+}
+
+// 确认新建文件
+async function confirmNewFile() {
+  if (!newFileName.value.trim()) {
+    message.warning('请输入文件名称')
+    return
+  }
+
+  try {
+    const newPath = getFullPath(newFileName.value)
+    await request.post('/platform/files/create', {
+      serverId: props.serverId,
+      path: newPath
+    })
+    message.success('创建成功')
+    newFileVisible.value = false
+    loadFiles()
+  } catch (error: any) {
+    const msg = error.response?.data?.message || error.message || '创建失败'
+    message.error(msg)
+  }
+}
+
+// 确认选择
+function handleConfirm() {
+  if (selectedPath.value) {
+    emit('update:modelValue', selectedPath.value)
+  }
+  modalVisible.value = false
+}
+
+// 取消
+function handleCancel() {
+  modalVisible.value = false
+}
+
+// 监听modelValue变化
+watch(() => props.modelValue, (val) => {
+  if (val && !modalVisible.value) {
+    selectedPath.value = val
+  }
+})
+</script>
+
+<style scoped>
+.folder-selector :deep(.ant-input) {
+  cursor: pointer;
+}
+
+.folder-icon {
+  cursor: pointer;
+}
+
+.folder-browser {
+  min-height: 400px;
+}
+
+.path-bar {
+  margin-bottom: 12px;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.right-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.file-list {
+  min-height: 300px;
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.file-item:hover {
+  background-color: #f5f5f5;
+}
+
+.file-item.selected {
+  background-color: #e6f7ff;
+}
+
+.file-item .icon {
+  margin-right: 8px;
+  font-size: 18px;
+}
+
+.file-item .icon.folder {
+  color: #faad14;
+}
+
+.file-item .icon.file {
+  color: #1890ff;
+}
+
+.file-item .name {
+  flex: 1;
+}
+
+.empty {
+  padding: 40px;
+  text-align: center;
+  color: #999;
+}
+
+.selected-path {
+  margin-top: 12px;
+  padding: 8px;
+  background: #fafafa;
+  border-radius: 4px;
+}
+
+.selected-path .no-select {
+  color: #999;
+}
+</style>
diff --git a/src/components/TaskLogViewer.vue b/src/components/TaskLogViewer.vue
new file mode 100644
index 0000000..9f26f93
--- /dev/null
+++ b/src/components/TaskLogViewer.vue
@@ -0,0 +1,197 @@
+<template>
+  <a-modal
+    :open="open"
+    title="日志详情"
+    :footer="null"
+    width="800px"
+    @update:open="val => emit('update:open', val)"
+    @cancel="handleClose"
+  >
+    <div class="log-container">
+      <div class="log-status">
+        <span>状态：</span>
+        <a-tag :color="getStatusColor(status)">
+          {{ getStatusText(status) }}
+        </a-tag>
+        <a-spin v-if="isActive(status)" size="small" style="margin-left: 8px" />
+        <a-button v-if="containerName || composePath" type="link" size="small" @click="fetchLogs">刷新</a-button>
+      </div>
+      <div class="log-content" ref="logContentRef">
+        <pre><code>{{ logs.join('\n') }}</code></pre>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onUnmounted, nextTick } from 'vue'
+import { readTaskLog } from '@/api/database'
+import { getContainerLog } from '@/api/runtime'
+
+const props = defineProps<{
+  open: boolean
+  serverId: number | undefined
+  taskId?: string
+  containerName?: string
+  composePath?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const logs = ref<string[]>([])
+const status = ref('')
+const logContentRef = ref<HTMLElement>()
+let timer: any = null
+
+function isActive(s: string) {
+  return s === 'Executing' || s === 'Waiting'
+}
+
+function getStatusColor(s: string) {
+  switch (s) {
+    case 'Success': return 'green'
+    case 'Failed': return 'red'
+    case 'Executing': return 'blue'
+    case 'Waiting': return 'orange'
+    case 'Fetched': return 'green'
+    default: return 'default'
+  }
+}
+
+function getStatusText(s: string) {
+    switch (s) {
+    case 'Success': return '成功'
+    case 'Failed': return '失败'
+    case 'Executing': return '执行中'
+    case 'Waiting': return '等待中'
+    case 'Fetched': return '已获取'
+    default: return s
+  }
+}
+
+// 1. Remove "data: container |" prefix
+function cleanLogLine(line: string) {
+    if (!line) return ''
+    let content = line
+    // Handle "data: " prefix
+    if (content.startsWith('data:')) {
+        // Find the pipe separator
+        const pipeIdx = content.indexOf('|')
+        if (pipeIdx > -1) {
+            // "data: name | log..."
+            content = content.substring(pipeIdx + 1)
+        } else {
+            // "data: log..."
+            content = content.substring(5)
+        }
+    }
+    
+    // 2. Remove ANSI Color Codes
+    // eslint-disable-next-line no-control-regex
+    content = content.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, '')
+    
+    return content
+}
+
+async function fetchLogs() {
+  if (!props.serverId) return
+  
+  if (props.taskId) {
+      // ... (task log)
+      try {
+        const res = await readTaskLog(props.serverId, props.taskId)
+        logs.value = res.lines || []
+        status.value = res.taskStatus
+        
+        // Check if active
+        if (isActive(res.taskStatus)) {
+          if (!timer) {
+            timer = setInterval(fetchLogs, 2000)
+          }
+        } else {
+            stopPolling()
+        }
+      } catch (e) {
+        console.error(e)
+        stopPolling()
+      }
+  } else if (props.containerName || props.composePath) {
+      status.value = 'Fetching'
+      try {
+          const res = await getContainerLog(props.serverId, props.containerName || '', props.composePath)
+          logs.value = res.log ? res.log.split('\n').map(cleanLogLine) : ['无日志内容']
+          status.value = 'Fetched'
+      } catch (e: any) {
+          logs.value = ['获取日志失败: ' + (e.message || '未知错误')]
+          status.value = 'Failed'
+      }
+  }
+// ...
+  
+  // Auto scroll to bottom
+  nextTick(() => {
+    if (logContentRef.value) {
+        logContentRef.value.scrollTop = logContentRef.value.scrollHeight
+    }
+  })
+}
+
+function stopPolling() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+function handleClose() {
+  stopPolling()
+  emit('update:open', false)
+}
+
+watch(() => props.open, (val) => {
+  if (val) {
+    logs.value = []
+    status.value = ''
+    fetchLogs()
+  } else {
+    stopPolling()
+  }
+})
+
+onUnmounted(() => {
+  stopPolling()
+})
+</script>
+
+<style scoped>
+.log-container .log-status {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.log-container .log-content {
+  max-height: 500px;
+  overflow-y: auto;
+  background: #1e1e1e;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.log-container .log-content pre {
+  margin: 0;
+}
+
+.log-container .log-content code {
+  color: #d4d4d4;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 0bbea7b..488cc5c 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -418,14 +418,34 @@ function updateMenuState() {
         projectStore.switchProject(projectId)
       }
       
-      const subPath = path.replace(`/app/${projectId}`, '')
+      // 同步子项目 iframe URL
+      const subPath = path.replace(`/app/${projectId}`, '') || '/dashboard'
+      const project = projectStore.getProjectById(projectId)
+      // 只有当项目已加载且 url 有效时才更新
+      if (project?.baseUrl) {
+        const targetUrl = `${project.baseUrl}${subPath}?__embedded=true`
+        // 避免重复刷新
+        if (subProjectUrl.value !== targetUrl) {
+          iframeLoading.value = true
+          subProjectUrl.value = targetUrl
+        }
+      }
+
       const subMenuRouteMap = projectStore.getMenuRouteMap()
       
       for (const [menuKey, menuPath] of Object.entries(subMenuRouteMap)) {
         const relativePath = menuPath.replace(`/app/${projectId}`, '')
         if (subPath === relativePath || subPath.startsWith(relativePath + '/')) {
           selectedKeys.value = [menuKey]
-          // 展开逻辑略
+          // 展开父级菜单
+          const pathParts = menuKey.split('/').filter(Boolean)
+          if (pathParts.length > 1) {
+             const parentPath = `/${pathParts[0]}`
+             const openKey = `sub-${parentPath}`
+             if (!openKeys.value.includes(openKey)) {
+                 openKeys.value.push(openKey)
+             }
+          }
           break
         }
       }
diff --git a/src/types/database.ts b/src/types/database.ts
deleted file mode 100644
index 76ed176..0000000
--- a/src/types/database.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-// 数据库类型
-export type DatabaseType = 'mysql' | 'postgresql' | 'redis'
-
-// 数据库状态
-export type DatabaseStatus = 'running' | 'stopped' | 'error'
-
-// 数据库信息
-export interface DatabaseInfo {
-  type: DatabaseType
-  status: DatabaseStatus
-  version: string
-}
-
-// 数据库实例
-export interface DatabaseItem {
-  id: number
-  name: string
-  username: string
-  password: string
-  description?: string
-  createdAt: string
-  updatedAt?: string
-}
-
-// 创建数据库请求
-export interface CreateDatabaseRequest {
-  name: string
-  username: string
-  password: string
-  description?: string
-}
-
-// 更新数据库请求
-export interface UpdateDatabaseRequest {
-  name?: string
-  username?: string
-  password?: string
-  description?: string
-}
-
-// 数据库连接信息
-export interface DatabaseConnectionInfo {
-  host: string
-  port: number
-  username: string
-  password: string
-  database: string
-}
-
-// 分页请求
-export interface DatabaseListParams {
-  keyword?: string
-  page?: number
-  pageSize?: number
-}
-
-// 分页响应
-export interface DatabaseListResponse {
-  list: DatabaseItem[]
-  total: number
-  page: number
-  pageSize: number
-}
diff --git a/src/types/platform/certificates.ts b/src/types/platform/certificates.ts
new file mode 100644
index 0000000..7e2ffe4
--- /dev/null
+++ b/src/types/platform/certificates.ts
@@ -0,0 +1,23 @@
+/**
+ * 证书管理类型定义
+ */
+
+export interface Certificate {
+  id: string
+  domain: string
+  otherDomain?: string
+  cn?: string
+  issuer: string
+  status: 'valid' | 'expired' | 'pending'
+  startDate: string
+  expireDate: string
+  autoRenew: boolean
+  verifyType: 'dns'
+  dnsAccount?: string
+  dnsAccountName?: string
+  dnsAccountType?: string
+  acmeAccount: string
+  remark?: string
+  certContent?: string
+  keyContent?: string
+}
diff --git a/src/types/platform/databases.ts b/src/types/platform/databases.ts
new file mode 100644
index 0000000..79c9c17
--- /dev/null
+++ b/src/types/platform/databases.ts
@@ -0,0 +1,9 @@
+/**
+ * 数据库管理类型定义
+ */
+
+export interface DatabaseType {
+  key: string
+  label: string
+  defaultPort: number
+}
diff --git a/src/types/platform/files.ts b/src/types/platform/files.ts
new file mode 100644
index 0000000..47929e7
--- /dev/null
+++ b/src/types/platform/files.ts
@@ -0,0 +1,11 @@
+/**
+ * 文件管理类型定义
+ */
+
+export interface FileItem {
+  name: string
+  isDir: boolean
+  size: number
+  modTime: string
+  mode?: string
+}
diff --git a/src/types/platform/menus.ts b/src/types/platform/menus.ts
new file mode 100644
index 0000000..0d01a6c
--- /dev/null
+++ b/src/types/platform/menus.ts
@@ -0,0 +1,17 @@
+/**
+ * 平台菜单管理类型定义
+ */
+
+import type { MenuItem } from '@/config'
+
+export interface PlatformProject {
+  id: string
+  name: string
+  shortName: string
+  logo: string
+  color?: string
+}
+
+export interface MenuNode extends MenuItem {
+  order?: number
+}
diff --git a/src/types/platform/servers.ts b/src/types/platform/servers.ts
new file mode 100644
index 0000000..d19d18c
--- /dev/null
+++ b/src/types/platform/servers.ts
@@ -0,0 +1,36 @@
+/**
+ * 服务器管理类型定义
+ */
+
+export interface MonitorData {
+  cpu: number
+  memory: number
+  disk: number
+  networkIn: number
+  networkOut: number
+  time: string
+}
+
+export type ServerStatus = 'online' | 'offline' | 'warning' | 'maintenance'
+export type ServerType = 'cloud' | 'physical' | 'virtual'
+
+export interface ServerInfo {
+  id: number
+  name: string
+  ip: string
+  internalIp?: string
+  port?: number
+  user?: string
+  status: ServerStatus
+  type: ServerType
+  os?: string
+  cpu?: number
+  memory?: number
+  disk?: number
+  region?: string
+  expiredAt?: string
+  remark?: string
+  // 监控数据
+  monitor?: MonitorData
+  tags?: string[]
+}
diff --git a/src/types/platform/upload-file.ts b/src/types/platform/upload-file.ts
new file mode 100644
index 0000000..f96e48e
--- /dev/null
+++ b/src/types/platform/upload-file.ts
@@ -0,0 +1,14 @@
+/**
+ * 上传文件类型定义
+ */
+
+export interface UploadFile {
+  uid: string
+  name: string
+  path: string  // 相对路径
+  size: number
+  type: string
+  status: 'pending' | 'uploading' | 'done' | 'error'
+  percent: number
+  file: File
+}
diff --git a/src/types/platform/upload.ts b/src/types/platform/upload.ts
new file mode 100644
index 0000000..0a198f8
--- /dev/null
+++ b/src/types/platform/upload.ts
@@ -0,0 +1,9 @@
+/**
+ * 文件上传类型定义
+ */
+
+export interface UploadOptions {
+  path: string
+  overwrite: boolean
+  createDirs: boolean
+}
diff --git a/src/types/system/dept.ts b/src/types/system/dept.ts
new file mode 100644
index 0000000..3d000d5
--- /dev/null
+++ b/src/types/system/dept.ts
@@ -0,0 +1,33 @@
+/**
+ * 部门管理类型定义
+ */
+
+export interface DeptRecord {
+  id: number
+  parentId: number
+  name: string
+  code?: string
+  leaderId?: number
+  leaderName?: string
+  phone?: string
+  email?: string
+  sort: number
+  status: number
+  remark?: string
+  createdAt?: string
+  children?: DeptRecord[]
+}
+
+export interface DeptFormData {
+  id?: number
+  parentId: number
+  name: string
+  code?: string
+  leaderId?: number
+  leaderName?: string
+  phone?: string
+  email?: string
+  sort: number
+  status: number
+  remark?: string
+}
diff --git a/src/types/system/dict.ts b/src/types/system/dict.ts
new file mode 100644
index 0000000..2972033
--- /dev/null
+++ b/src/types/system/dict.ts
@@ -0,0 +1,12 @@
+/**
+ * 字典管理类型定义
+ */
+
+export interface DictRecord {
+  id: number
+  name: string
+  code: string
+  remark?: string
+  status: number
+  createdAt?: string
+}
diff --git a/src/utils/request.ts b/src/utils/request.ts
index c28fa31..07a953d 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -10,7 +10,7 @@ import type { ApiResponse } from '@/types/api/response'
 console.log('API Base URL:', import.meta.env.VITE_API_BASE_URL)
 const service: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
-  timeout: 30000,
+  timeout: 5 * 60 * 1000, // 5分钟超时，适合大文件上传
   headers: {
     'Content-Type': 'application/json'
   }
diff --git a/src/views/platform/certificates/index.vue b/src/views/platform/certificates/index.vue
index 4bfedba..d9d9bab 100644
--- a/src/views/platform/certificates/index.vue
+++ b/src/views/platform/certificates/index.vue
@@ -262,15 +262,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import {
-  PlusOutlined,
-  ArrowLeftOutlined,
-  CopyOutlined,
-  DownloadOutlined,
-  SyncOutlined
-} from '@ant-design/icons-vue'
 import type { TablePaginationConfig } from 'ant-design-vue'
 import {
   getCertificateList,
@@ -287,27 +279,8 @@ import {
   type WebsiteInfo
 } from '@/api/certificate'
 import { getServerList, type ServerBase } from '@/api/server'
+import type { Certificate } from '@/types/platform/certificates'
 
-// 证书类型定义
-interface Certificate {
-  id: string
-  domain: string
-  otherDomain?: string
-  cn?: string
-  issuer: string
-  status: 'valid' | 'expired' | 'pending'
-  startDate: string
-  expireDate: string
-  autoRenew: boolean
-  verifyType: 'dns'
-  dnsAccount?: string
-  dnsAccountName?: string
-  dnsAccountType?: string
-  acmeAccount: string
-  remark?: string
-  certContent?: string
-  keyContent?: string
-}
 
 // 表格列配置
 const columns = [
diff --git a/src/views/platform/databases/index.vue b/src/views/platform/databases/index.vue
new file mode 100644
index 0000000..013ad35
--- /dev/null
+++ b/src/views/platform/databases/index.vue
@@ -0,0 +1,1483 @@
+<template>
+  <div class="platform-databases-page">
+    <!-- 顶部工具栏 -->
+    <a-card :bordered="false" class="top-card">
+      <div class="toolbar-container">
+        <!-- 左侧：服务器选择 -->
+        <div class="toolbar-left">
+          <span class="label">服务器：</span>
+          <a-select
+            v-model:value="currentServerId"
+            placeholder="请选择服务器"
+            style="width: 200px"
+            @change="handleServerChange"
+            :options="serverOptions"
+            :loading="serverLoading"
+          >
+            <template #option="{ label, type }">
+              <span class="server-option">
+                <span class="server-name">{{ label }}</span>
+                <a-tag size="small" :color="type === 'source' ? 'blue' : 'green'">{{ type === 'source' ? '本机' : '远程' }}</a-tag>
+              </span>
+            </template>
+          </a-select>
+        </div>
+        
+        <!-- 右侧：数据库类型 Tabs -->
+        <div class="db-type-tabs">
+          <a-button
+            v-for="dbType in dbTypes"
+            :key="dbType.key"
+            :type="activeDbType === dbType.key ? 'primary' : 'default'"
+            :class="['db-type-btn', { active: activeDbType === dbType.key }]"
+            @click="handleDbTypeChange(dbType.key)"
+          >
+            {{ dbType.label }}
+          </a-button>
+        </div>
+      </div>
+    </a-card>
+
+
+    <a-card :bordered="false" class="main-card">
+      <!-- 未安装状态 -->
+      <template v-if="!dbStatus.isExist">
+        <div class="not-installed-container">
+          <div class="not-installed-content">
+            <div class="not-installed-icon">
+              <DatabaseOutlined class="db-large-icon" />
+              <div class="icon-badge">
+                <CloseCircleFilled class="badge-icon" />
+              </div>
+            </div>
+            <div class="not-installed-text">
+              <span class="warning-text">未检测到 {{ activeDbLabel }} ，请点击安装！</span>
+              <a-button type="primary" @click="handleInstall" :loading="installLoading">
+                <ThunderboltOutlined /> 一键安装
+              </a-button>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 已安装状态 -->
+      <template v-else>
+        <!-- 数据库状态栏 -->
+        <div class="db-status-bar">
+          <div class="status-left">
+            <a-tag color="blue">{{ activeDbLabel }}</a-tag>
+            <a-tag :color="isAppRunning ? 'green' : 'red'">
+              {{ isAppRunning ? '已启动' : '已停止' }}
+            </a-tag>
+            <a-tag color="default">版本: {{ dbStatus.version }}</a-tag>
+          </div>
+          <div class="status-right">
+            <a-button type="link" size="small" @click="handleStop" :disabled="!isAppRunning">
+              停止
+            </a-button>
+            <a-divider type="vertical" />
+            <a-button type="link" size="small" @click="handleRestart">
+              重启
+            </a-button>
+          </div>
+        </div>
+
+        <!-- 操作栏 -->
+        <div class="action-bar">
+          <div class="action-left">
+            <a-space>
+              <a-button type="primary" @click="handleCreateDatabase">
+                <PlusOutlined /> 创建数据库
+              </a-button>
+              <a-button @click="handleConnectionInfo">
+                <LinkOutlined /> 连接信息
+              </a-button>
+            </a-space>
+          </div>
+          <div class="action-right">
+            <a-input-search
+              v-model:value="searchKeyword"
+              placeholder="搜索"
+              style="width: 200px"
+              @search="handleSearch"
+              allow-clear
+            />
+            <a-button type="text" @click="handleRefresh" class="refresh-btn">
+              <ReloadOutlined />
+            </a-button>
+          </div>
+        </div>
+
+        <!-- 数据库列表表格 -->
+        <a-table
+          :columns="columns"
+          :data-source="filteredDatabases"
+          :loading="loading"
+          row-key="id"
+          :pagination="pagination"
+          @change="handleTableChange"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'name'">
+              <div class="db-name">
+                <DatabaseOutlined class="db-icon" />
+                <span>{{ record.name }}</span>
+              </div>
+            </template>
+
+            <template v-if="column.key === 'password'">
+              <div class="password-cell">
+                <span v-if="record.showPassword">{{ record.password }}</span>
+                <span v-else>••••••••</span>
+                <a-button
+                  type="text"
+                  size="small"
+                  @click="togglePassword(record)"
+                  class="toggle-password-btn"
+                >
+                  <EyeOutlined v-if="!record.showPassword" />
+                  <EyeInvisibleOutlined v-else />
+                </a-button>
+                <a-button
+                  type="text"
+                  size="small"
+                  @click="copyPassword(record.password)"
+                  class="copy-btn"
+                >
+                  <CopyOutlined />
+                </a-button>
+              </div>
+            </template>
+
+            <template v-if="column.key === 'description'">
+              <span class="description-text">{{ record.description || '-' }}</span>
+            </template>
+
+            <template v-if="column.key === 'createdAt'">
+              <span>{{ formatDateTime(record.createdAt) }}</span>
+            </template>
+
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a-button type="link" size="small" @click="handleChangePassword(record)">
+                  改密
+                </a-button>
+                <a-popconfirm
+                  title="确定要删除该数据库吗？此操作不可恢复！"
+                  @confirm="handleDelete(record)"
+                  ok-text="确定"
+                  cancel-text="取消"
+                >
+                  <a-button type="link" size="small" danger>
+                    删除
+                  </a-button>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+
+          <template #emptyText>
+            <a-empty description="暂无数据" />
+          </template>
+        </a-table>
+      </template>
+    </a-card>
+
+    <!-- 创建数据库抽屉 -->
+    <a-drawer
+      v-model:open="createModalVisible"
+      title="创建数据库"
+      placement="right"
+      :width="600"
+      :footer-style="{ textAlign: 'right' }"
+      @close="createModalVisible = false"
+    >
+      <a-form
+        ref="createFormRef"
+        :model="createForm"
+        :rules="createFormRules"
+        layout="vertical"
+      >
+        <a-form-item label="名称" name="name" required>
+          <a-input v-model:value="createForm.name" placeholder="请输入数据库名称" />
+        </a-form-item>
+        
+        <a-form-item label="字符集" name="format" required>
+          <a-select v-model:value="createForm.format" placeholder="请选择字符集" @change="handleCharsetChange">
+            <a-select-option value="utf8mb4">utf8mb4</a-select-option>
+            <a-select-option value="utf8">utf8</a-select-option>
+            <a-select-option value="gbk">gbk</a-select-option>
+            <a-select-option value="latin1">latin1</a-select-option>
+          </a-select>
+        </a-form-item>
+        
+        <a-form-item label="排序规则" name="collation">
+           <a-select v-model:value="createForm.collation" placeholder="请选择排序规则" show-search allow-clear>
+             <a-select-option v-for="option in collationOptions" :key="option" :value="option">{{ option }}</a-select-option>
+           </a-select>
+           <div style="font-size: 12px; color: #999; margin-top: 4px">为空则使用 {{ createForm.format }} 字符集的默认排序规则</div>
+        </a-form-item>
+
+        <a-form-item label="用户名" name="username" required>
+          <a-input v-model:value="createForm.username" placeholder="请输入用户名" />
+        </a-form-item>
+
+        <a-form-item label="密码" name="password" required>
+          <a-input-password v-model:value="createForm.password" placeholder="请输入密码">
+            <template #addonAfter>
+              <a-button size="small" type="text" @click="generateRandomPassword" style="cursor: pointer">随机密码</a-button>
+            </template>
+          </a-input-password>
+          <div style="font-size: 12px; color: #999; margin-top: 4px">暂不支持注入字符 & ; $ ' ` ( ) " > < |</div>
+        </a-form-item>
+
+        <a-form-item label="权限" name="permission">
+          <a-select v-model:value="createForm.permission" disabled>
+            <a-select-option value="%">所有人(%)</a-select-option>
+          </a-select>
+        </a-form-item>
+        
+        <a-form-item label="类型">
+          <a-tag color="blue">{{ activeDbType }} [{{ activeDbType }}]</a-tag>
+        </a-form-item>
+
+        <a-form-item label="描述" name="description">
+          <a-textarea
+            v-model:value="createForm.description"
+            placeholder="描述"
+            :rows="3"
+          />
+        </a-form-item>
+      </a-form>
+      
+      <template #footer>
+        <a-space>
+          <a-button @click="createModalVisible = false">取消</a-button>
+          <a-button type="primary" :loading="createLoading" @click="handleCreateSubmit">确认</a-button>
+        </a-space>
+      </template>
+    </a-drawer>
+
+    <!-- 修改密码抽屉 -->
+    <a-drawer
+      v-model:open="passwordModalVisible"
+      title="修改密码"
+      placement="right"
+      :width="600"
+      :footer-style="{ textAlign: 'right' }"
+      @close="passwordModalVisible = false"
+    >
+      <a-form
+        ref="passwordFormRef"
+        :model="passwordForm"
+        :rules="passwordFormRules"
+        layout="vertical"
+      >
+        <a-form-item label="数据库">
+          <a-input :value="currentDatabase?.name" disabled />
+        </a-form-item>
+        <a-form-item label="新密码" name="password">
+          <a-input-password v-model:value="passwordForm.password" placeholder="请输入新密码">
+             <template #addonAfter>
+              <a-button size="small" type="text" @click="generateRandomPasswordForChange" style="cursor: pointer">随机密码</a-button>
+            </template>
+          </a-input-password>
+          <div style="font-size: 12px; color: #999; margin-top: 4px">暂不支持注入字符 & ; $ ' ` ( ) " > < |</div>
+        </a-form-item>
+        <a-form-item label="确认密码" name="confirmPassword">
+          <a-input-password v-model:value="passwordForm.confirmPassword" placeholder="请再次输入新密码" />
+        </a-form-item>
+      </a-form>
+      
+      <template #footer>
+        <a-space>
+          <a-button @click="passwordModalVisible = false">取消</a-button>
+          <a-button type="primary" :loading="passwordLoading" @click="handlePasswordSubmit">确认</a-button>
+        </a-space>
+      </template>
+    </a-drawer>
+
+    <!-- 连接信息弹窗 -->
+    <a-modal
+      v-model:open="connectionModalVisible"
+      title="连接信息"
+      :footer="null"
+      width="560px"
+    >
+      <a-descriptions :column="1" bordered size="small" style="margin-top: 16px">
+        <a-descriptions-item label="主机地址">
+          <div class="connection-value">
+            <span>{{ connectionInfo.host }}</span>
+            <a-button type="text" size="small" @click="copyText(connectionInfo.host)">
+              <CopyOutlined />
+            </a-button>
+          </div>
+        </a-descriptions-item>
+        <a-descriptions-item label="端口">
+          <div class="connection-value">
+            <span>{{ connectionInfo.port }}</span>
+            <a-button type="text" size="small" @click="copyText(connectionInfo.port)">
+              <CopyOutlined />
+            </a-button>
+          </div>
+        </a-descriptions-item>
+        <a-descriptions-item label="数据库类型">
+          <span>{{ activeDbLabel }}</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="连接命令">
+          <div class="connection-value">
+            <code class="connection-command">{{ connectionInfo.command }}</code>
+            <a-button type="text" size="small" @click="copyText(connectionInfo.command)">
+              <CopyOutlined />
+            </a-button>
+          </div>
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-modal>
+
+    <!-- Redis安装抽屉 -->
+    <a-drawer
+      v-model:open="installDrawerVisible"
+      :title="'安装 ' + activeDbLabel"
+      placement="right"
+      :width="600"
+      :footer-style="{ textAlign: 'right' }"
+      @close="installDrawerVisible = false"
+    >
+      <a-spin :spinning="installDetailLoading">
+        <a-form
+          ref="installFormRef"
+          :model="installForm"
+          :rules="installFormRules"
+          layout="vertical"
+        >
+          <a-form-item label="名称" name="name" required>
+            <a-input v-model:value="installForm.name" placeholder="请输入应用名称" />
+          </a-form-item>
+
+          <a-form-item label="版本" name="version" required>
+            <a-select 
+              v-model:value="installForm.version" 
+              placeholder="请选择版本"
+              :options="versionOptions"
+              @change="handleVersionChange"
+            />
+          </a-form-item>
+
+          <a-form-item label="数据库密码" name="password">
+            <a-input-password v-model:value="installForm.password" placeholder="请输入数据库密码">
+              <template #addonAfter>
+                <a-button size="small" type="text" @click="generateInstallPassword" style="cursor: pointer">随机密码</a-button>
+              </template>
+            </a-input-password>
+          </a-form-item>
+
+          <a-form-item label="端口" name="port" required>
+            <a-input-number v-model:value="installForm.port" :min="1" :max="65535" style="width: 100%" />
+          </a-form-item>
+
+          <a-collapse v-model:activeKey="advancedPanelKey" ghost>
+            <a-collapse-panel key="advanced" header="高级设置">
+              <a-form-item label="容器名称" name="containerName">
+                <a-input v-model:value="installForm.containerName" placeholder="可以为空，为空自动生成" />
+              </a-form-item>
+
+              <a-form-item name="allowPort">
+                <a-checkbox v-model:checked="installForm.allowPort">端口外部访问</a-checkbox>
+                <div style="font-size: 12px; color: #999">允许端口外部访问会放开防火墙端口</div>
+              </a-form-item>
+
+              <a-form-item label="绑定主机 IP" name="specifyIP">
+                <a-input v-model:value="installForm.specifyIP" placeholder="设置端口绑定的主机地址/网卡（如果你不清楚这个的作用，请不要填写）" />
+              </a-form-item>
+
+              <a-form-item label="重启规则" name="restartPolicy" required>
+                <a-select v-model:value="installForm.restartPolicy">
+                  <a-select-option value="always">一直重启</a-select-option>
+                  <a-select-option value="on-failure">故障时重启</a-select-option>
+                  <a-select-option value="unless-stopped">停止前重启</a-select-option>
+                  <a-select-option value="no">不重启</a-select-option>
+                </a-select>
+              </a-form-item>
+
+              <a-form-item label="CPU 限制" name="cpuQuota">
+                <a-input-number v-model:value="installForm.cpuQuota" :min="0" :max="getCpuMax()" style="width: 180px" />
+                <span style="margin-left: 8px">核心数</span>
+                <div style="font-size: 12px; color: #999; margin-top: 4px">限制为 0 则关闭限制，最大可用为 {{ getCpuMax() }} 核</div>
+              </a-form-item>
+
+              <a-form-item label="内存限制" name="memoryLimit">
+                <a-input-number v-model:value="installForm.memoryLimit" :min="0" style="width: 180px" />
+                <a-select v-model:value="installForm.memoryUnit" style="width: 80px; margin-left: 8px">
+                  <a-select-option value="MB">MB</a-select-option>
+                  <a-select-option value="GB">GB</a-select-option>
+                </a-select>
+                <div style="font-size: 12px; color: #999; margin-top: 4px">限制为 0 则关闭限制，最大可用为 {{ getMemoryMax() }}</div>
+              </a-form-item>
+
+              <a-form-item name="pullImage">
+                <a-checkbox v-model:checked="installForm.pullImage">拉取镜像</a-checkbox>
+                <div style="font-size: 12px; color: #999">在应用启动之前执行 docker pull 来拉取镜像</div>
+              </a-form-item>
+
+              <a-form-item name="editCompose">
+                <a-checkbox v-model:checked="installForm.editCompose">编辑 compose 文件</a-checkbox>
+                <div style="font-size: 12px; color: #999">编辑 compose 文件可能导致软件安装失败</div>
+              </a-form-item>
+
+              <a-form-item v-if="installForm.editCompose" label="Docker Compose" name="dockerCompose">
+                <a-textarea 
+                  v-model:value="installForm.dockerCompose" 
+                  :rows="10" 
+                  style="font-family: monospace"
+                />
+              </a-form-item>
+            </a-collapse-panel>
+          </a-collapse>
+        </a-form>
+      </a-spin>
+
+      <template #footer>
+        <a-space>
+          <a-button @click="installDrawerVisible = false">取消</a-button>
+          <a-button type="primary" :loading="installLoading" @click="handleInstallSubmit">确认</a-button>
+        </a-space>
+      </template>
+    </a-drawer>
+
+    <!-- 安装日志弹窗 -->
+    <TaskLogViewer
+      v-model:open="installLogVisible"
+      :server-id="currentServerId"
+      :task-id="installTaskId"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import type { TablePaginationConfig } from 'ant-design-vue'
+import { getServerList, type ServerBase } from '@/api/server'
+import {
+  checkAppInstalled,
+  searchDatabases,
+  createDatabase,
+  deleteDatabase,
+  changeDatabasePassword,
+  operateApp,
+  getFormatOptions,
+  getAppInfo,
+  getAppDetail,
+  installApp,
+  type DatabaseRecord,
+  type AppInstallStatus,
+  type CreateDatabaseParams,
+  type AppInfo,
+  type AppDetail,
+} from '@/api/database'
+import type { DatabaseType } from '@/types/platform/databases'
+
+
+// 数据库类型列表
+const dbTypes: DatabaseType[] = [
+  { key: 'mysql', label: 'MySQL', defaultPort: 3306 },
+  { key: 'postgresql', label: 'PostgreSQL', defaultPort: 5432 },
+  { key: 'redis', label: 'Redis', defaultPort: 6379 }
+]
+
+// 服务器相关
+const serverLoading = ref(false)
+const servers = ref<ServerBase[]>([])
+const currentServerId = ref<number>()
+const serverOptions = computed(() => {
+  return servers.value.map(s => ({
+    label: s.name,
+    value: s.id,
+    type: s.type
+  }))
+})
+
+// 当前选中的数据库类型
+const activeDbType = ref('mysql')
+const activeDbLabel = computed(() => {
+  return dbTypes.find(t => t.key === activeDbType.value)?.label || 'MySQL'
+})
+
+// 数据库状态
+const dbStatus = reactive<Partial<AppInstallStatus>>({
+  isExist: false,
+  version: '',
+  status: ''
+})
+const isAppRunning = computed(() => dbStatus.status === 'Running' || dbStatus.status === 'active')
+
+// 安装相关
+const installLoading = ref(false)
+const installDrawerVisible = ref(false)
+const installDetailLoading = ref(false)
+const installFormRef = ref()
+const advancedPanelKey = ref<string[]>([])
+
+// 安装日志相关
+// 安装日志相关
+const installLogVisible = ref(false)
+const installTaskId = ref('')
+
+// 应用信息
+const appInfo = ref<AppInfo | null>(null)
+const appDetail = ref<AppDetail | null>(null)
+const versionOptions = computed(() => {
+  if (!appInfo.value?.versions) return []
+  return appInfo.value.versions.map(v => ({ label: v, value: v }))
+})
+
+// 安装表单
+const installForm = reactive({
+  name: 'redis',
+  version: '',
+  password: '',
+  port: 6379,
+  // 高级设置
+  containerName: '',
+  allowPort: true,
+  specifyIP: '',
+  restartPolicy: 'always',
+  cpuQuota: 0,
+  memoryLimit: 0,
+  memoryUnit: 'M',
+  pullImage: true,
+  editCompose: false,
+  dockerCompose: ''
+})
+
+const installFormRules = {
+  name: [{ required: true, message: '请输入应用名称' }],
+  version: [{ required: true, message: '请选择版本' }],
+  port: [{ required: true, message: '请输入端口' }],
+  restartPolicy: [{ required: true, message: '请选择重启规则' }]
+}
+
+// 表格相关
+const loading = ref(false)
+const searchKeyword = ref('')
+const databases = ref<DatabaseRecord[]>([])
+
+const pagination = reactive<TablePaginationConfig>({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  showTotal: (total: number) => `共 ${total} 条`,
+  showSizeChanger: true,
+  pageSizeOptions: ['10', '20', '50', '100']
+})
+
+const columns = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 180,
+    sorter: true
+  },
+  {
+    title: '用户名',
+    dataIndex: 'username',
+    key: 'username',
+    width: 150
+  },
+  {
+    title: '密码',
+    dataIndex: 'password',
+    key: 'password',
+    width: 180
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    key: 'description',
+    ellipsis: true
+  },
+  {
+    title: '时间',
+    dataIndex: 'createdAt',
+    key: 'createdAt',
+    width: 180,
+    sorter: true
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 160,
+    fixed: 'right' as const
+  }
+]
+
+// 过滤后的数据库列表
+const filteredDatabases = computed(() => {
+  // 后端已经支持搜索，这里主要是为了快速过滤当前页，或者如果后端不支持全字段搜索
+  if (!searchKeyword.value) return databases.value
+  const keyword = searchKeyword.value.toLowerCase()
+  // 如果是前端过滤模式：
+  return databases.value.filter(db => 
+    db.name.toLowerCase().includes(keyword) ||
+    db.username.toLowerCase().includes(keyword) ||
+    (db.description && db.description.toLowerCase().includes(keyword))
+  )
+})
+
+// 创建数据库相关
+const createModalVisible = ref(false)
+const createLoading = ref(false)
+const createFormRef = ref()
+const collationOptions = ref<string[]>([])
+const createForm = reactive({
+  name: '',
+  username: '',
+  password: '',
+  description: '',
+  format: 'utf8mb4',
+  collation: undefined as string | undefined, // 显示定义类型以避免TS错误
+  permission: '%',
+  permissionIPs: ''
+})
+const createFormRules = {
+  name: [{ required: true, message: '请输入数据库名称' }],
+  username: [{ required: true, message: '请输入用户名' }],
+  password: [{ required: true, message: '请输入密码' }],
+  format: [{ required: true, message: '请选择字符集' }]
+}
+
+// 字符集改变时获取排序规则
+async function handleCharsetChange() {
+  createForm.collation = undefined
+  await loadCollationOptions()
+}
+
+// 加载排序规则
+async function loadCollationOptions() {
+  if (!currentServerId.value) return
+  try {
+    // 传入 format (如 utf8mb4) 以获取对应的 collation
+    const options = await getFormatOptions(
+      currentServerId.value, 
+      activeDbType.value, 
+      activeDbType.value,
+      createForm.format
+    )
+    collationOptions.value = options
+    
+    // 如果需要过滤：
+    if (createForm.format) {
+       // 这里如果后端返回所有的，可以根据 format 过滤，比如 utf8mb4 开头的
+       // collationOptions.value = options.filter(o => o.startsWith(createForm.format))
+       // 暂时直接显示所有或者假设后端已处理
+    }
+  } catch (error) {
+    console.error('获取排序规则失败', error)
+  }
+}
+
+// 生成随机密码
+function generateRandomPassword() {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#%^&*'
+  let password = ''
+  // 避免特殊字符导致问题，简化字符集
+  const simpleChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  for (let i = 0; i < 16; i++) {
+    password += simpleChars.charAt(Math.floor(Math.random() * simpleChars.length))
+  }
+  createForm.password = password
+}
+
+// 编辑数据库相关
+const currentDatabase = ref<DatabaseRecord | null>(null)
+
+// 修改密码相关
+const passwordModalVisible = ref(false)
+const passwordLoading = ref(false)
+const passwordFormRef = ref()
+const passwordForm = reactive({
+  password: '',
+  confirmPassword: ''
+})
+const passwordFormRules = {
+  password: [{ required: true, message: '请输入新密码' }],
+  confirmPassword: [
+    { required: true, message: '请再次输入新密码' },
+    {
+      validator: (_rule: any, value: string) => {
+        if (value !== passwordForm.password) {
+          return Promise.reject('两次输入的密码不一致')
+        }
+        return Promise.resolve()
+      }
+    }
+  ]
+}
+
+// 连接信息相关
+const connectionModalVisible = ref(false)
+const connectionInfo = computed(() => {
+  const dbType = dbTypes.find(t => t.key === activeDbType.value)
+  const server = servers.value.find(s => s.id === currentServerId.value)
+  const host = server?.ip || '127.0.0.1'
+  const port = dbStatus.httpPort || dbType?.defaultPort || 3306
+  
+  let command = ''
+  switch (activeDbType.value) {
+    case 'mysql':
+      command = `mysql -h ${host} -P ${port} -u root -p`
+      break
+    case 'postgresql':
+      command = `psql -h ${host} -p ${port} -U postgres`
+      break
+    case 'redis':
+      command = `redis-cli -h ${host} -p ${port}`
+      break
+  }
+  return { host, port: String(port), command }
+})
+
+
+// 生命周期
+onMounted(async () => {
+  await fetchServers()
+})
+
+// 获取服务器列表
+async function fetchServers() {
+  serverLoading.value = true
+  try {
+    servers.value = await getServerList()
+    if (servers.value.length > 0) {
+      currentServerId.value = servers.value[0].id
+      await refreshData()
+    }
+  } catch (error) {
+    console.error('获取服务器列表失败', error)
+  } finally {
+    serverLoading.value = false
+  }
+}
+
+// 切换服务器
+function handleServerChange() {
+  refreshData()
+}
+
+// 刷新所有数据
+async function refreshData() {
+  if (!currentServerId.value) return
+  
+  // 1. 检查应用状态
+  await checkAppStatus()
+  
+  // 2. 如果已安装，获取数据库列表
+  if (dbStatus.isExist) {
+    await loadDatabases()
+  } else {
+    databases.value = []
+    pagination.total = 0
+  }
+}
+
+// 检查应用状态
+async function checkAppStatus() {
+  if (!currentServerId.value) return
+  
+  try {
+    // 这里的 key 和 name 对于 1Panel 来说通常是一样的，比如 mysql, postgresql
+    const status = await checkAppInstalled(currentServerId.value, activeDbType.value, activeDbType.value)
+    Object.assign(dbStatus, status)
+  } catch (error) {
+    console.error('检查应用状态失败', error)
+    dbStatus.isExist = false
+  }
+}
+
+// 加载数据库列表
+async function loadDatabases() {
+  if (!currentServerId.value) return
+  
+  loading.value = true
+  try {
+    const res = await searchDatabases(
+      currentServerId.value, 
+      activeDbType.value,
+      pagination.current,
+      pagination.pageSize
+    )
+    databases.value = res.items.map(item => ({
+      ...item,
+      showPassword: false // 默认不显示密码
+    }))
+    pagination.total = res.total
+  } catch (error) {
+    console.error('加载数据库列表失败:', error)
+    message.error('加载数据库列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 切换数据库类型
+function handleDbTypeChange(type: string) {
+  activeDbType.value = type
+  refreshData()
+}
+
+// 获取CPU最大值
+function getCpuMax() {
+  return navigator.hardwareConcurrency || 4
+}
+
+// 获取内存最大值
+function getMemoryMax() {
+  // 这里只是一个估计值，实际应该由后端返回
+  return '1704.46MB'
+}
+
+// 生成安装密码
+function generateInstallPassword() {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let password = activeDbType.value + '_'
+  for (let i = 0; i < 6; i++) {
+    password += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  installForm.password = password
+}
+
+// 版本变更时获取详情
+async function handleVersionChange(version: string) {
+  if (!currentServerId.value || !appInfo.value?.id) return
+  
+  installDetailLoading.value = true
+  try {
+    appDetail.value = await getAppDetail(currentServerId.value, appInfo.value.id, version)
+    // 更新 dockerCompose
+    if (appDetail.value?.dockerCompose) {
+      installForm.dockerCompose = appDetail.value.dockerCompose
+    }
+    // 获取表单字段的默认值
+    if (appDetail.value?.params?.formFields) {
+      for (const field of appDetail.value.params.formFields) {
+        // 密码字段 - 支持 Redis/MySQL/PostgreSQL
+        if ((field.envKey === 'PANEL_REDIS_ROOT_PASSWORD' || 
+             field.envKey === 'PANEL_DB_ROOT_PASSWORD') && field.random) {
+          generateInstallPassword()
+        }
+        // 端口字段
+        if (field.envKey === 'PANEL_APP_PORT_HTTP') {
+          installForm.port = field.default || dbTypes.find(t => t.key === activeDbType.value)?.defaultPort || 3306
+        }
+      }
+    }
+  } catch (error) {
+    console.error('获取应用版本详情失败', error)
+  } finally {
+    installDetailLoading.value = false
+  }
+}
+
+// 一键安装数据库
+async function handleInstall() {
+  if (!currentServerId.value) {
+    message.error('请先选择服务器')
+    return
+  }
+  
+  installLoading.value = true
+  try {
+    // 获取应用信息
+    appInfo.value = await getAppInfo(currentServerId.value, activeDbType.value)
+    
+    if (!appInfo.value) {
+      message.error('获取应用信息失败')
+      return
+    }
+    
+    // 重置表单
+    Object.assign(installForm, {
+      name: activeDbType.value,
+      version: appInfo.value.versions?.[0] || '',
+      password: '',
+      port: dbTypes.find(t => t.key === activeDbType.value)?.defaultPort || 6379,
+      containerName: '',
+      allowPort: true,
+      specifyIP: '',
+      restartPolicy: 'always',
+      cpuQuota: 0,
+      memoryLimit: 0,
+      memoryUnit: 'M',
+      pullImage: true,
+      editCompose: false,
+      dockerCompose: ''
+    })
+    
+    // 获取默认版本的详情
+    if (installForm.version) {
+      await handleVersionChange(installForm.version)
+    }
+    
+    installDrawerVisible.value = true
+  } catch (error: any) {
+    message.error('获取应用信息失败: ' + (error.message || '未知错误'))
+  } finally {
+    installLoading.value = false
+  }
+}
+
+// 提交安装
+async function handleInstallSubmit() {
+  if (!currentServerId.value || !appDetail.value || !appInfo.value) return
+  
+  try {
+    await installFormRef.value?.validate()
+  } catch {
+    return
+  }
+  
+  installLoading.value = true
+  try {
+    // 生成任务ID
+    const taskId = crypto.randomUUID()
+    
+    // 构造安装参数 - 按照1Panel实际接口格式
+    const installParams: Record<string, any> = {
+      format: '',
+      collation: ''
+    }
+    
+    // 根据数据库类型设置参数
+    if (activeDbType.value === 'redis') {
+      // Redis 特定参数
+      installParams['PANEL_REDIS_ROOT_PASSWORD'] = installForm.password
+      installParams['PANEL_APP_PORT_HTTP'] = installForm.port
+    } else if (activeDbType.value === 'mysql') {
+      // MySQL 特定参数
+      installParams['PANEL_DB_ROOT_PASSWORD'] = installForm.password
+      installParams['PANEL_APP_PORT_HTTP'] = installForm.port
+    } else if (activeDbType.value === 'postgresql') {
+      // PostgreSQL 特定参数
+      installParams['PANEL_DB_ROOT_PASSWORD'] = installForm.password
+      installParams['PANEL_APP_PORT_HTTP'] = installForm.port
+    }
+    
+    const result = await installApp({
+      serverId: currentServerId.value,
+      appDetailId: appDetail.value.id,
+      name: installForm.name,
+      version: installForm.version,
+      params: installParams,
+      dockerCompose: installForm.dockerCompose,
+      taskID: taskId,
+      advanced: advancedPanelKey.value.includes('advanced'),
+      containerName: installForm.containerName || undefined,
+      allowPort: installForm.allowPort,
+      specifyIP: installForm.specifyIP || undefined,
+      restartPolicy: installForm.restartPolicy,
+      cpuQuota: installForm.cpuQuota,
+      memoryLimit: installForm.memoryLimit,
+      memoryUnit: installForm.memoryUnit,
+      pullImage: installForm.pullImage,
+      editCompose: installForm.editCompose,
+      gpuConfig: false,
+      appID: '',
+      format: 'utf8mb4',
+      collation: ''
+    })
+    
+    message.success(activeDbLabel.value + ' 安装任务已提交')
+    installDrawerVisible.value = false
+    
+    // 开始轮询安装日志
+    // 开始轮询安装日志
+    if (result) {
+      installTaskId.value = taskId
+      installLogVisible.value = true
+    }
+    
+    // 延迟刷新状态
+    setTimeout(() => {
+      refreshData()
+    }, 5000)
+  } catch (error: any) {
+    message.error('安装失败: ' + (error.message || '未知错误'))
+  } finally {
+    installLoading.value = false
+  }
+}
+
+// 停止数据库
+async function handleStop() {
+  if (!currentServerId.value || !dbStatus.appInstallId) return
+  
+  try {
+    await operateApp({
+      serverId: currentServerId.value,
+      installId: dbStatus.appInstallId,
+      operate: 'stop'
+    })
+    message.success('已发送停止命令')
+    // 稍候刷新状态
+    setTimeout(refreshData, 2000)
+  } catch (error: any) {
+    message.error(error.message || '停止失败')
+  }
+}
+
+// 重启数据库
+async function handleRestart() {
+  if (!currentServerId.value || !dbStatus.appInstallId) return
+
+  try {
+    await operateApp({
+      serverId: currentServerId.value,
+      installId: dbStatus.appInstallId,
+      operate: 'restart'
+    })
+    message.success('已发送重启命令')
+    // 稍候刷新状态
+    setTimeout(refreshData, 3000)
+  } catch (error: any) {
+    message.error(error.message || '重启失败')
+  }
+}
+
+
+// 创建数据库
+async function handleCreateDatabase() {
+  Object.assign(createForm, {
+    name: '',
+    username: '',
+    password: '',
+    description: '',
+    format: 'utf8mb4',
+    collation: undefined,
+    permission: '%',
+    permissionIPs: ''
+  })
+  createModalVisible.value = true
+  // 预加载排序规则
+  await loadCollationOptions()
+}
+
+// 提交创建数据库
+async function handleCreateSubmit() {
+  if (!currentServerId.value) return
+  
+  try {
+    await createFormRef.value.validate()
+  } catch {
+    return
+  }
+
+  createLoading.value = true
+  try {
+    // 构造参数，过滤掉空字符串
+    const params: CreateDatabaseParams = {
+      serverId: currentServerId.value,
+      type: activeDbType.value,
+      database: activeDbType.value,
+      name: createForm.name,
+      username: createForm.username,
+      password: btoa(createForm.password),
+      format: createForm.format,
+      permission: createForm.permission,
+      from: 'local'
+    }
+    
+    // 可选参数处理
+    if (createForm.description) {
+      params.description = createForm.description
+    }
+    if (createForm.collation) {
+      params.collation = createForm.collation
+    }
+    if (createForm.permissionIPs) {
+      params.permissionIPs = createForm.permissionIPs
+    }
+
+    await createDatabase(params)
+    
+    message.success('数据库创建成功')
+    createModalVisible.value = false
+    await loadDatabases()
+  } catch (error: any) {
+    message.error(error.message || '创建失败')
+  } finally {
+    createLoading.value = false
+  }
+}
+
+// 连接信息
+function handleConnectionInfo() {
+  connectionModalVisible.value = true
+}
+
+// 搜索
+function handleSearch() {
+  pagination.current = 1
+  loadDatabases() // 重新调用接口搜索
+}
+
+// 刷新
+function handleRefresh() {
+  refreshData()
+}
+
+// 表格变化
+function handleTableChange(pag: TablePaginationConfig) {
+  pagination.current = pag.current || 1
+  pagination.pageSize = pag.pageSize || 20
+  loadDatabases()
+}
+
+// 切换密码显示
+function togglePassword(record: any) {
+  record.showPassword = !record.showPassword
+}
+
+// 复制密码
+function copyPassword(password: string) {
+  copyText(password)
+}
+
+// 复制文本
+function copyText(text: string) {
+  navigator.clipboard.writeText(text).then(() => {
+    message.success('已复制到剪贴板')
+  }).catch(() => {
+    message.error('复制失败')
+  })
+}
+
+
+// 修改密码
+function handleChangePassword(record: any) {
+  currentDatabase.value = record
+  Object.assign(passwordForm, {
+    password: '',
+    confirmPassword: ''
+  })
+  passwordModalVisible.value = true
+}
+
+// 生成修改密码的随机密码
+function generateRandomPasswordForChange() {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let password = ''
+  for (let i = 0; i < 16; i++) {
+    password += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  passwordForm.password = password
+  passwordForm.confirmPassword = password
+}
+
+// 提交修改密码
+async function handlePasswordSubmit() {
+  if (!currentServerId.value || !currentDatabase.value) return
+
+  try {
+    await passwordFormRef.value.validate()
+  } catch {
+    return
+  }
+
+  passwordLoading.value = true
+  try {
+    await changeDatabasePassword({
+      serverId: currentServerId.value,
+      id: currentDatabase.value.id,
+      value: btoa(passwordForm.password),
+      type: activeDbType.value,
+      database: activeDbType.value,
+      from: 'local'
+    })
+    
+    message.success('密码修改成功')
+    passwordModalVisible.value = false
+    await loadDatabases()
+  } catch (error: any) {
+    message.error(error.message || '修改失败')
+  } finally {
+    passwordLoading.value = false
+  }
+}
+
+// 删除
+async function handleDelete(record: any) {
+  if (!currentServerId.value) return
+  
+  try {
+    await deleteDatabase({
+      serverId: currentServerId.value,
+      id: record.id,
+      type: activeDbType.value, // 数据库类型
+      database: activeDbType.value, // 1Panel 需要的 database 参数通常是指应用类型(如 mysql)，而非具体数据库名称
+      deleteBackup: true, 
+      forceDelete: true
+    })
+    
+    message.success('删除成功')
+    await loadDatabases()
+  } catch (error: any) {
+    message.error(error.message || '删除失败')
+  }
+}
+
+
+// 格式化日期时间
+function formatDateTime(dateStr: string): string {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+</script>
+
+<style scoped>
+.platform-databases-page {
+  min-height: 100%;
+  padding: 0;
+}
+
+.top-card {
+  margin-bottom: 16px;
+  :deep(.ant-card-body) {
+    padding: 16px;
+  }
+}
+
+.toolbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .label {
+    font-weight: 500;
+  }
+}
+
+.server-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.db-type-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.db-type-btn {
+  min-width: 100px;
+}
+
+.db-type-btn.active {
+  font-weight: 500;
+}
+
+.main-card {
+  border-radius: 4px;
+}
+
+/* 未安装状态样式 */
+.not-installed-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  padding: 60px 20px;
+}
+
+.not-installed-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.not-installed-icon {
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.db-large-icon {
+  font-size: 80px;
+  color: #d9d9d9;
+}
+
+.icon-badge {
+  position: absolute;
+  bottom: -4px;
+  right: -8px;
+  background: #fff;
+  border-radius: 50%;
+  padding: 2px;
+}
+
+.badge-icon {
+  font-size: 28px;
+  color: #ff4d4f;
+}
+
+.not-installed-text {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.warning-text {
+  color: #ff7875;
+  font-size: 14px;
+}
+
+.db-status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.status-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.status-right {
+  display: flex;
+  align-items: center;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.action-left {
+  display: flex;
+  gap: 8px;
+}
+
+.action-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.refresh-btn {
+  padding: 4px 8px;
+}
+
+.db-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.db-icon {
+  color: #1890ff;
+  font-size: 16px;
+}
+
+.password-cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toggle-password-btn,
+.copy-btn {
+  padding: 2px 4px;
+  color: #8c8c8c;
+}
+
+.toggle-password-btn:hover,
+.copy-btn:hover {
+  color: #1890ff;
+}
+
+.description-text {
+  color: #8c8c8c;
+}
+
+.connection-value {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.connection-command {
+  background: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 13px;
+  flex: 1;
+  margin-right: 8px;
+}
+
+:deep(.ant-table-wrapper) {
+  .ant-table-pagination {
+    margin: 16px 0 0;
+  }
+}
+
+:deep(.ant-descriptions-item-label) {
+  width: 100px;
+  background: #fafafa;
+}
+
+.install-log-container {
+  .log-status {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  .log-content {
+    max-height: 400px;
+    overflow-y: auto;
+    background: #1e1e1e;
+    border-radius: 8px;
+    padding: 16px;
+    
+    pre {
+      margin: 0;
+      
+      code {
+        color: #d4d4d4;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/views/platform/domains/index.vue b/src/views/platform/domains/index.vue
index 0214d5a..1884da1 100644
--- a/src/views/platform/domains/index.vue
+++ b/src/views/platform/domains/index.vue
@@ -172,6 +172,15 @@
               <a-button type="link" size="small" @click="handleCheckDns(record as DomainInfo)">
                 <ReloadOutlined /> 检测
               </a-button>
+              
+              <a-popconfirm
+                v-if="record.deployStatus === 'deployed'"
+                title="确定要在1Panel中删除此网站吗？"
+                @confirm="handleDeleteWebsite(record as DomainInfo)"
+              >
+                <a-button type="link" size="small" danger>删除网站</a-button>
+              </a-popconfirm>
+
               <a-popconfirm title="确定删除此域名配置？" @confirm="handleDelete(record as DomainInfo)">
                 <a-button type="link" size="small" danger>删除</a-button>
               </a-popconfirm>
@@ -200,21 +209,75 @@
         </a-form-item>
 
         <a-form-item label="关联项目" name="projectId">
-          <a-select v-model:value="formData.projectId" placeholder="选择关联项目（选填）" allow-clear>
-            <a-select-option v-for="project in projectList" :key="project.id" :value="project.id">
-              {{ project.name }}
-            </a-select-option>
+          <a-select 
+            v-model:value="formData.projectId" 
+            placeholder="选择关联项目（选填）" 
+            allow-clear
+            @change="handleProjectChange"
+          >
+            <a-select-opt-group label="精通运维项目">
+              <a-select-option v-for="project in projectList" :key="'p_' + project.id" :value="'project_' + project.id">
+                {{ project.name }}
+              </a-select-option>
+            </a-select-opt-group>
+            <a-select-opt-group label="运行环境">
+              <a-select-option v-for="runtime in runtimeList" :key="'r_' + runtime.id" :value="'runtime_' + runtime.id + '_' + runtime.serverId">
+                {{ runtime.name }} ({{ runtime.serverName }})
+              </a-select-option>
+            </a-select-opt-group>
           </a-select>
         </a-form-item>
 
+        <!-- 运行环境服务器选择（当选择运行环境时显示） -->
+        <a-form-item v-if="formData.runtimeId" label="运行环境服务器">
+          <a-input :value="getSelectedRuntimeServer()" disabled />
+        </a-form-item>
+
         <a-form-item label="目标服务器" name="serverId">
-          <a-select v-model:value="formData.serverId" placeholder="请选择服务器">
+          <a-select v-model:value="formData.serverId" placeholder="请选择服务器" @change="handleServerChange">
             <a-select-option v-for="server in serverList" :key="server.id" :value="server.id">
               {{ server.name }} ({{ server.ip }})
             </a-select-option>
           </a-select>
         </a-form-item>
 
+        <!-- 运行环境配置 -->
+        <a-divider orientation="left">运行环境配置</a-divider>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="类型" name="runtimeType">
+              <a-select 
+                v-model:value="formData.runtimeType" 
+                placeholder="选择类型" 
+                allow-clear
+                :disabled="!formData.serverId"
+                @change="handleRuntimeTypeChange"
+              >
+                <a-select-option v-for="type in runtimeTypeList" :key="type.value" :value="type.value">
+                  {{ type.label }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="运行环境" name="selectedRuntimeId">
+              <a-select 
+                v-model:value="formData.selectedRuntimeId" 
+                placeholder="选择运行环境"
+                allow-clear
+                :loading="loadingRuntimes"
+                :disabled="!formData.runtimeType"
+                @change="handleRuntimeSelect"
+              >
+                <a-select-option v-for="runtime in runningRuntimeList" :key="runtime.id" :value="runtime.id">
+                  {{ runtime.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
         <a-divider orientation="left">代理配置</a-divider>
 
         <a-form-item label="反向代理" name="proxyPass">
@@ -268,8 +331,24 @@
       <template #footer>
         <div class="drawer-footer">
           <a-button @click="drawerVisible = false">取消</a-button>
+          <a-button 
+            v-if="currentDomain && formData.selectedRuntimeId" 
+            :loading="deployingRuntime" 
+            style="margin-left: 8px"
+            @click="handleDeployRuntime"
+          >
+            部署运行环境
+          </a-button>
+          <a-button 
+            v-if="currentDomain" 
+            :loading="deploying" 
+            style="margin-left: 8px"
+            @click="handleDeploy"
+          >
+            部署反向代理
+          </a-button>
           <a-button type="primary" :loading="formLoading" @click="handleFormSubmit">
-            {{ currentDomain ? '保存' : '添加' }}
+            {{ currentDomain ? '保存' : '保存' }}
           </a-button>
         </div>
       </template>
@@ -279,84 +358,96 @@
     <a-drawer
       v-model:open="nginxDrawerVisible"
       title="Nginx 配置"
-      width="700"
+      width="800"
       placement="right"
+      @after-open-change="handleNginxDrawerOpen"
     >
-      <template v-if="currentDomain">
-        <a-descriptions :column="2" size="small" bordered style="margin-bottom: 16px">
-          <a-descriptions-item label="域名" :span="2">{{ currentDomain.domain }}</a-descriptions-item>
-          <a-descriptions-item label="配置路径" :span="2">
-            <code>{{ currentDomain.nginxConfigPath || '/etc/nginx/sites-available/' + currentDomain.domain }}</code>
-          </a-descriptions-item>
-        </a-descriptions>
+      <a-spin :spinning="nginxLoading">
+        <div v-if="nginxConfig" class="nginx-config-drawer">
+          <a-descriptions :column="1" size="small" bordered style="margin-bottom: 16px">
+            <a-descriptions-item label="域名">{{ nginxConfig.domain }}</a-descriptions-item>
+            <a-descriptions-item label="配置路径">
+              <code>{{ nginxConfig.path }}</code>
+            </a-descriptions-item>
+          </a-descriptions>
 
-        <div class="nginx-config-box">
-          <div class="config-header">
-            <span>nginx.conf</span>
-            <a-space>
-              <a-button type="link" size="small" @click="copyNginxConfig">
-                <CopyOutlined /> 复制
-              </a-button>
-              <a-button type="link" size="small" @click="downloadNginxConfig">
-                <DownloadOutlined /> 下载
-              </a-button>
-            </a-space>
+          <div class="nginx-config-box">
+            <div class="config-header">
+              <span>nginx.conf</span>
+              <a-space>
+                <a-button type="link" size="small" @click="copyNginxConfig">
+                  <CopyOutlined /> 复制
+                </a-button>
+                <a-button type="link" size="small" @click="downloadNginxConfig">
+                  <DownloadOutlined /> 下载
+                </a-button>
+              </a-space>
+            </div>
+            <a-textarea
+              v-model:value="nginxConfig.content"
+              :rows="20"
+              class="config-textarea"
+              placeholder="Nginx配置内容"
+            />
           </div>
-          <pre class="config-content">{{ generateNginxConfig(currentDomain) }}</pre>
+
+          <a-divider />
+
+          <a-space>
+            <a-button type="primary" :loading="nginxSaving" @click="handlePushConfig">
+              <CloudUploadOutlined /> 推送到服务器
+            </a-button>
+          </a-space>
         </div>
-
-        <a-divider />
-
-        <a-space>
-          <a-button type="primary" @click="handlePushConfig">
-            <CloudUploadOutlined /> 推送到服务器
-          </a-button>
-          <a-button @click="handleReloadNginx">
-            <ReloadOutlined /> 重载 Nginx
-          </a-button>
-        </a-space>
-      </template>
+        <a-empty v-else-if="nginxError" :description="nginxError" />
+      </a-spin>
     </a-drawer>
+
+    <!-- 服务器选择弹窗（用于证书同步） -->
+    <a-modal
+      v-model:open="syncServerModalVisible"
+      title="选择服务器"
+      :width="480"
+      :confirm-loading="syncing"
+      @ok="confirmSyncFromCert"
+    >
+      <div style="padding: 16px 0">
+        <p style="margin-bottom: 16px; color: #666">请选择要从证书同步域名的目标服务器：</p>
+        <a-select
+          v-model:value="syncSelectedServerId"
+          placeholder="请选择服务器"
+          style="width: 100%"
+          size="large"
+          :options="serverSelectOptions"
+        />
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
 import { message } from 'ant-design-vue'
-import {
-  PlusOutlined,
-  SearchOutlined,
-  LinkOutlined,
-  TagOutlined,
-  GlobalOutlined,
-  SafetyCertificateOutlined,
-  ClockCircleOutlined,
-  AppstoreOutlined,
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  SyncOutlined,
-  FileTextOutlined,
-  ReloadOutlined,
-  CopyOutlined,
-  DownloadOutlined,
-  CloudUploadOutlined
-} from '@ant-design/icons-vue'
 import type { DomainStatus, DnsStatus, SslStatus } from '@/types/platform'
 import {
   getDomainList,
-  getAllDomains,
   createDomain,
   updateDomain,
   deleteDomain,
   checkDomainDns,
-  getDomainStats,
   syncDomainsFromCertificates,
-  type DomainInfo
+  deployDomain,
+  undeployDomain,
+  deployRuntime,
+  getNginxConfig,
+  saveNginxConfig,
+  type DomainInfo,
+  type NginxConfigResult
 } from '@/api/domain'
 import { getServerList } from '@/api/server'
 import { getAllProjects } from '@/api/project'
 import { getCertificateList, type CertificateInfo } from '@/api/certificate'
+import { searchRunningRuntimes, type RuntimeRecord } from '@/api/runtime'
+import { getDictItemsByCode } from '@/api/system/dict'
 
 const router = useRouter()
 const route = useRoute()
@@ -365,6 +456,8 @@ const loading = ref(false)
 const drawerVisible = ref(false)
 const nginxDrawerVisible = ref(false)
 const formLoading = ref(false)
+const deploying = ref(false)
+const deployingRuntime = ref(false)
 const formRef = ref()
 
 const filterStatus = ref<DomainStatus | undefined>()
@@ -378,16 +471,26 @@ const currentDomain = ref<DomainInfo | null>(null)
 const projectList = ref<{ id: number; name: string }[]>([])
 const serverList = ref<{ id: number; name: string; ip: string }[]>([])
 const certificateList = ref<CertificateInfo[]>([])
+const runtimeList = ref<{ id: number; name: string; serverId: number; serverName: string }[]>([])
+// 类型和运行环境相关
+const runtimeTypeList = ref<{ label: string; value: string }[]>([])
+const runningRuntimeList = ref<RuntimeRecord[]>([])
+const loadingRuntimes = ref(false)
 
 const formData = reactive<{
   domain: string
-  projectId?: number
+  projectId?: number | string // Allow string for UI selection state
   serverId?: number
   proxyPass: string
   port: number
   enableHttps: boolean
   certificateId?: number
   description: string
+  runtimeId?: number
+  runtimeServerId?: number
+  // 新增：类型和运行环境
+  runtimeType?: string
+  selectedRuntimeId?: number
 }>({
   domain: '',
   projectId: undefined,
@@ -396,7 +499,11 @@ const formData = reactive<{
   port: 80,
   enableHttps: false,
   certificateId: undefined,
-  description: ''
+  description: '',
+  runtimeId: undefined,
+  runtimeServerId: undefined,
+  runtimeType: undefined,
+  selectedRuntimeId: undefined
 })
 
 const formRules = {
@@ -476,7 +583,15 @@ onMounted(async () => {
   if (route.query.serverId) {
     filterServer.value = route.query.serverId as string
   }
-  await Promise.all([loadDomains(), loadProjects(), loadServers()])
+  await Promise.all([
+    loadDomains(), 
+    loadProjects(), 
+    loadServers(), 
+    loadRuntimeTypes(),
+    loadDicts()
+  ])
+  // 加载运行环境需要依赖服务器列表
+  await loadRuntimes()
 })
 
 async function loadDomains() {
@@ -495,7 +610,9 @@ async function loadDomains() {
       ...d,
       id: String(d.id),
       projectId: d.projectId ? String(d.projectId) : undefined,
-      serverId: d.serverId ? String(d.serverId) : undefined
+      serverId: d.serverId ? String(d.serverId) : undefined,
+      runtimeId: d.runtimeId ? String(d.runtimeId) : undefined,
+      runtimeServerId: d.runtimeServerId ? String(d.runtimeServerId) : undefined
     }))
   } catch (error) {
     message.error('加载域名列表失败')
@@ -522,6 +639,150 @@ async function loadServers() {
   }
 }
 
+async function loadRuntimes() {
+  try {
+    // 加载所有服务器的运行环境
+    const allRuntimes: { id: number; name: string; serverId: number; serverName: string }[] = []
+    // 定义需要搜索的运行环境类型
+    const runtimeTypes = ['node', 'java', 'go', 'python', 'php', 'other']
+    
+    for (const server of serverList.value) {
+      // 并行请求所有类型的运行环境
+      try {
+        const promises = runtimeTypes.map(type => 
+          searchRunningRuntimes(server.id, type, 1, 100)
+            .then(res => ({ type, res }))
+            .catch(e => {
+              console.error(`加载服务器 ${server.name} 的 ${type} 运行环境失败`, e)
+              return null
+            })
+        )
+        
+        const results = await Promise.all(promises)
+        
+        results.forEach(result => {
+          if (result && result.res && result.res.items) {
+            result.res.items.forEach((r: any) => {
+              allRuntimes.push({
+                id: r.id,
+                name: r.name,
+                serverId: server.id,
+                serverName: server.name
+              })
+            })
+          }
+        })
+      } catch (e) {
+        console.error(`加载服务器 ${server.name} 的运行环境失败`, e)
+      }
+    }
+    runtimeList.value = allRuntimes
+  } catch (error) {
+    console.error('加载运行环境列表失败', error)
+  }
+}
+
+// 加载运行环境类型字典
+async function loadRuntimeTypes() {
+  try {
+    const res = await getDictItemsByCode('runSysteam')
+    // @ts-ignore
+    const items = res.data?.data || []
+    runtimeTypeList.value = items.map((item: any) => ({
+      label: item.label,
+      value: item.value
+    }))
+  } catch (error) {
+    console.error('加载运行环境类型字典失败', error)
+    // 默认值
+    runtimeTypeList.value = [
+      { label: 'Java', value: 'java' },
+      { label: 'Node', value: 'node' }
+    ]
+  }
+}
+
+// 根据类型和服务器加载正在运行的运行环境
+async function loadRunningRuntimesByType() {
+  if (!formData.runtimeType || !formData.serverId) {
+    runningRuntimeList.value = []
+    return
+  }
+  
+  loadingRuntimes.value = true
+  try {
+    const res = await searchRunningRuntimes(
+      formData.serverId,
+      formData.runtimeType,
+      1,
+      100
+    )
+    runningRuntimeList.value = res.items || []
+  } catch (error) {
+    console.error('加载运行环境列表失败', error)
+    runningRuntimeList.value = []
+  } finally {
+    loadingRuntimes.value = false
+  }
+}
+
+// 类型改变时重新加载运行环境
+async function handleRuntimeTypeChange() {
+  formData.selectedRuntimeId = undefined
+  await loadRunningRuntimesByType()
+}
+
+// 选择运行环境时更新端口
+async function handleRuntimeSelect(runtimeId: number) {
+  const runtime = runningRuntimeList.value.find(r => r.id === runtimeId)
+  if (runtime) {
+    console.log('Selected Runtime:', runtime)
+    // 自动填充反向代理地址
+    let port = 0
+    
+    // 1. 尝试从 exposedPorts 获取
+    if (runtime.exposedPorts && runtime.exposedPorts.length > 0) {
+      port = runtime.exposedPorts[0].containerPort || runtime.exposedPorts[0].hostPort
+    }
+    
+    // 2. 尝试从 port 字段获取
+    if (!port && runtime.port) {
+      port = parseInt(String(runtime.port), 10)
+    }
+    
+    // 3. 尝试从 params 获取 (常见于 1Panel)
+    if (!port && runtime.params) {
+      // 尝试常见的大写键名
+      for (const key of ['PORT', 'CONTAINER_PORT', 'TargetPort', 'targetPort']) {
+        if (runtime.params[key]) {
+           port = parseInt(String(runtime.params[key]), 10)
+           break;
+        }
+      }
+    }
+    
+    if (port && !isNaN(port)) {
+      formData.proxyPass = `http://127.0.0.1:${port}`
+      message.success(`已自动获取运行环境端口: ${port}`)
+    } else {
+       message.warning('未能自动获取运行环境端口，请手动填写反向代理地址')
+    }
+
+    // 更新 runtimeId 和 runtimeServerId
+    formData.runtimeId = runtime.id
+    formData.runtimeServerId = formData.serverId
+  }
+}
+
+// 服务器改变时重置类型和运行环境
+async function handleServerChange() {
+  formData.runtimeType = undefined
+  formData.selectedRuntimeId = undefined
+  formData.runtimeId = undefined
+  formData.runtimeServerId = undefined
+  runningRuntimeList.value = []
+}
+
 async function handleSearch() {
   await loadDomains()
 }
@@ -533,36 +794,92 @@ function handleReset() {
   filterKeyword.value = ''
 }
 
+function handleProjectChange(value: string) {
+  if (!value) {
+    formData.runtimeId = undefined
+    formData.runtimeServerId = undefined
+    return
+  }
+
+  if (value.toString().startsWith('project_')) {
+    formData.runtimeId = undefined
+    formData.runtimeServerId = undefined
+  } else if (value.toString().startsWith('runtime_')) {
+    const parts = value.split('_')
+    const id = Number(parts[1])
+    const serverId = Number(parts[2])
+    
+    formData.runtimeId = id
+    formData.runtimeServerId = serverId
+    
+    // 自动选择对应的服务器
+    if (serverId) {
+      formData.serverId = serverId
+    }
+  }
+}
+
+function getSelectedRuntimeServer() {
+  if (formData.runtimeServerId) {
+    const server = serverList.value.find(s => s.id === formData.runtimeServerId)
+    return server ? `${server.name} (${server.ip})` : '未知服务器'
+  }
+  return ''
+}
+
 function handleAdd() {
   currentDomain.value = null
   Object.assign(formData, {
     domain: '',
-    projectId: '',
-    serverId: '',
+    projectId: undefined,
+    serverId: undefined,
     proxyPass: '',
     port: 80,
     enableHttps: false,
     forceHttps: false,
-    certificateId: '',
-    description: ''
+    certificateId: undefined,
+    description: '',
+    runtimeId: undefined,
+    runtimeServerId: undefined,
+    runtimeType: undefined,
+    selectedRuntimeId: undefined
   })
+  runningRuntimeList.value = []
   drawerVisible.value = true
 }
 
 // 同步状态
 const syncing = ref(false)
+const syncServerModalVisible = ref(false)
+const syncSelectedServerId = ref<number | undefined>(undefined)
 
-// 从证书同步域名
-async function handleSyncFromCert() {
-  if (!filterServer.value) {
-    message.warning('请先在筛选栏选择服务器')
+// 服务器选择下拉列表选项
+const serverSelectOptions = computed(() => {
+  return serverList.value.map(s => ({
+    label: `${s.name} (${s.ip})`,
+    value: s.id
+  }))
+})
+
+// 打开服务器选择弹窗
+function handleSyncFromCert() {
+  // 如果筛选栏已选中服务器，默认选中该服务器
+  syncSelectedServerId.value = filterServer.value ? Number(filterServer.value) : undefined
+  syncServerModalVisible.value = true
+}
+
+// 确认从证书同步域名
+async function confirmSyncFromCert() {
+  if (!syncSelectedServerId.value) {
+    message.warning('请选择服务器')
     return
   }
   
   syncing.value = true
   try {
-    const res = await syncDomainsFromCertificates(Number(filterServer.value))
+    const res = await syncDomainsFromCertificates(syncSelectedServerId.value)
     message.success(res.message)
+    syncServerModalVisible.value = false
     await loadDomains()
   } catch (error) {
     message.error('同步失败')
@@ -582,9 +899,8 @@ function goToCertificates() {
 async function handleEdit(record: DomainInfo) {
   currentDomain.value = record
   
-  // 重置表单并赋值，确保类型为 Number
+  // 重置表单并赋值
   formData.domain = record.domain
-  formData.projectId = record.projectId ? Number(record.projectId) : undefined
   formData.serverId = record.serverId ? Number(record.serverId) : undefined
   formData.proxyPass = record.proxyPass || ''
   formData.port = record.port || 80
@@ -592,6 +908,26 @@ async function handleEdit(record: DomainInfo) {
   formData.certificateId = record.certificateId ? Number(record.certificateId) : undefined
   formData.description = record.description || ''
   
+  // 处理关联项目/运行环境回显
+  if (record.runtimeId) {
+    formData.runtimeId = Number(record.runtimeId)
+    formData.runtimeServerId = record.runtimeServerId ? Number(record.runtimeServerId) : undefined
+    formData.projectId = `runtime_${record.runtimeId}_${record.runtimeServerId}`
+  } else if (record.projectId) {
+    formData.projectId = `project_${record.projectId}`
+    formData.runtimeId = undefined
+    formData.runtimeServerId = undefined
+  } else {
+    formData.projectId = undefined
+    formData.runtimeId = undefined
+    formData.runtimeServerId = undefined
+  }
+  
+  // 回显类型和运行环境
+  formData.runtimeType = record.runtimeType || undefined
+  formData.selectedRuntimeId = record.runtimeId ? Number(record.runtimeId) : undefined
+  runningRuntimeList.value = []
+  
   drawerVisible.value = true
   
   // 如果有服务器ID，加载对应的证书列表
@@ -601,6 +937,130 @@ async function handleEdit(record: DomainInfo) {
     } catch (e) {
       console.error('加载证书失败', e)
     }
+    
+    // 如果有运行环境类型，加载对应的运行环境列表
+    if (formData.runtimeType) {
+      await loadRunningRuntimesByType()
+    }
+  }
+}
+
+async function handleDeploy() {
+  if (!currentDomain.value) return
+  
+  try {
+    await formRef.value.validate()
+  } catch {
+    return
+  }
+  
+  deploying.value = true
+  try {
+    // 1. 先保存当前表单数据
+    // 解析关联项目/运行环境 ID
+    let realProjectId: number | undefined = undefined
+    let realRuntimeId: number | undefined = undefined
+    let realRuntimeServerId: number | undefined = undefined
+    
+    if (formData.projectId) {
+        const val = String(formData.projectId)
+        if (val.startsWith('project_')) {
+            realProjectId = Number(val.split('_')[1])
+        } else if (val.startsWith('runtime_')) {
+            const parts = val.split('_')
+            realRuntimeId = Number(parts[1])
+            realRuntimeServerId = Number(parts[2])
+        } else if (!isNaN(Number(val))) {
+             realProjectId = Number(val)
+        }
+    }
+
+    const project = realProjectId ? projectList.value.find(p => p.id === realProjectId) : undefined
+    const server = serverList.value.find(s => s.id === Number(formData.serverId))
+    const runtime = realRuntimeId ? runtimeList.value.find(r => r.id === realRuntimeId) : undefined
+    
+    // 优先使用新选择的运行环境数据
+    let finalRuntimeId = formData.selectedRuntimeId || realRuntimeId
+    let finalRuntimeServerId = formData.selectedRuntimeId ? formData.serverId : realRuntimeServerId
+    let finalRuntimeName = formData.selectedRuntimeId 
+      ? runningRuntimeList.value.find(r => r.id === formData.selectedRuntimeId)?.name 
+      : runtime?.name
+
+    const domainData: any = {
+      id: currentDomain.value.id,
+      domain: formData.domain,
+      projectId: realProjectId,
+      projectName: project?.name,
+      serverId: formData.serverId ? Number(formData.serverId) : undefined,
+      serverName: server?.name,
+      serverIp: server?.ip,
+      proxyPass: formData.proxyPass,
+      port: formData.port,
+      enableHttps: formData.enableHttps,
+      certificateId: formData.certificateId || undefined,
+      description: formData.description,
+      runtimeId: finalRuntimeId,
+      runtimeServerId: finalRuntimeServerId,
+      runtimeName: finalRuntimeName,
+      runtimeType: formData.runtimeType
+    }
+    
+    await updateDomain(Number(currentDomain.value.id), domainData)
+    
+    // 2. 调用部署接口
+    const res = await deployDomain({
+      domainId: Number(currentDomain.value.id),
+      enableHttps: formData.enableHttps,
+      createIfNotExist: true
+    })
+    
+    if (res.success) {
+      message.success(res.message || '部署成功')
+      await loadDomains()
+    } else {
+      message.error(res.message || '部署失败')
+    }
+  } catch (error: any) {
+    message.error(error.message || '部署失败')
+  } finally {
+    deploying.value = false
+  }
+}
+
+// 部署运行环境
+async function handleDeployRuntime() {
+  if (!currentDomain.value) {
+    message.warning('请先保存域名配置')
+    return
+  }
+  
+  // 先保存表单数据
+  try {
+    await formRef.value.validate()
+  } catch {
+    message.warning('请先完善表单数据')
+    return
+  }
+  
+  deployingRuntime.value = true
+  try {
+    // 先保存域名配置
+    await handleFormSubmit()
+    
+    // 调用部署运行环境接口
+    const result = await deployRuntime(Number(currentDomain.value.id))
+    
+    if (result.success) {
+      message.success(result.message || '运行环境部署成功')
+      await loadDomains()
+      drawerVisible.value = false
+    } else {
+      message.error(result.message || '部署失败')
+    }
+  } catch (error: any) {
+    message.error(error.message || '部署运行环境失败')
+  } finally {
+    deployingRuntime.value = false
   }
 }
 
@@ -613,12 +1073,39 @@ async function handleFormSubmit() {
 
   formLoading.value = true
   try {
-    const project = projectList.value.find(p => p.id === Number(formData.projectId))
-    const server = serverList.value.find(s => s.id === Number(formData.serverId))
+    // 解析关联项目/运行环境 ID
+    let realProjectId: number | undefined = undefined
+    let realRuntimeId: number | undefined = undefined
+    let realRuntimeServerId: number | undefined = undefined
+    
+    if (formData.projectId) {
+        const val = String(formData.projectId)
+        if (val.startsWith('project_')) {
+            realProjectId = Number(val.split('_')[1])
+        } else if (val.startsWith('runtime_')) {
+            const parts = val.split('_')
+            realRuntimeId = Number(parts[1])
+            realRuntimeServerId = Number(parts[2])
+        } else if (!isNaN(Number(val))) {
+             // 兼容旧数据或直接数字
+             realProjectId = Number(val)
+        }
+    }
 
-    const domainData = {
+    const project = realProjectId ? projectList.value.find(p => p.id === realProjectId) : undefined
+    const server = serverList.value.find(s => s.id === Number(formData.serverId))
+    const runtime = realRuntimeId ? runtimeList.value.find(r => r.id === realRuntimeId) : undefined
+    
+    // 优先使用新选择的运行环境数据
+    let finalRuntimeId = formData.selectedRuntimeId || realRuntimeId
+    let finalRuntimeServerId = formData.selectedRuntimeId ? formData.serverId : realRuntimeServerId
+    let finalRuntimeName = formData.selectedRuntimeId 
+      ? runningRuntimeList.value.find(r => r.id === formData.selectedRuntimeId)?.name 
+      : runtime?.name
+
+    const domainData: any = {
       domain: formData.domain,
-      projectId: formData.projectId ? Number(formData.projectId) : undefined,
+      projectId: realProjectId,
       projectName: project?.name,
       serverId: formData.serverId ? Number(formData.serverId) : undefined,
       serverName: server?.name,
@@ -627,7 +1114,11 @@ async function handleFormSubmit() {
       port: formData.port,
       enableHttps: formData.enableHttps,
       certificateId: formData.certificateId || undefined,
-      description: formData.description
+      description: formData.description,
+      runtimeId: finalRuntimeId,
+      runtimeServerId: finalRuntimeServerId,
+      runtimeName: finalRuntimeName,
+      runtimeType: formData.runtimeType
     }
 
     if (currentDomain.value) {
@@ -655,6 +1146,16 @@ async function handleFormSubmit() {
   }
 }
 
+async function handleDeleteWebsite(record: DomainInfo) {
+  try {
+    await undeployDomain(Number(record.id))
+    message.success('网站已从1Panel删除')
+    await loadDomains()
+  } catch (e: any) {
+    message.error('删除网站失败：' + (e.message || '未知错误'))
+  }
+}
+
 async function handleDelete(record: DomainInfo) {
   try {
     await deleteDomain(Number(record.id))
@@ -667,9 +1168,81 @@ async function handleDelete(record: DomainInfo) {
 
 function handleViewNginx(record: DomainInfo) {
   currentDomain.value = record
+  nginxConfig.value = null
+  nginxError.value = ''
   nginxDrawerVisible.value = true
 }
 
+// Nginx配置状态
+const nginxConfig = ref<NginxConfigResult | null>(null)
+const nginxLoading = ref(false)
+const nginxSaving = ref(false)
+const nginxError = ref('')
+
+// 抽屉打开时加载配置
+async function handleNginxDrawerOpen(open: boolean) {
+  if (open && currentDomain.value) {
+    await loadNginxConfig()
+  }
+}
+
+async function loadNginxConfig() {
+  if (!currentDomain.value) return
+  
+  nginxLoading.value = true
+  nginxError.value = ''
+  
+  try {
+    const config = await getNginxConfig(Number(currentDomain.value.id))
+    if (config.error) {
+      nginxError.value = config.error
+      nginxConfig.value = null
+    } else {
+      nginxConfig.value = config
+    }
+  } catch (error: any) {
+    nginxError.value = error.message || '获取配置失败'
+    nginxConfig.value = null
+  } finally {
+    nginxLoading.value = false
+  }
+}
+
+function copyNginxConfig() {
+  if (!nginxConfig.value?.content) return
+  navigator.clipboard.writeText(nginxConfig.value.content)
+  message.success('已复制到剪贴板')
+}
+
+function downloadNginxConfig() {
+  if (!nginxConfig.value?.content || !currentDomain.value) return
+  const blob = new Blob([nginxConfig.value.content], { type: 'text/plain' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${currentDomain.value.domain}.conf`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+async function handlePushConfig() {
+  if (!currentDomain.value || !nginxConfig.value?.content) return
+  
+  nginxSaving.value = true
+  try {
+    const success = await saveNginxConfig(Number(currentDomain.value.id), nginxConfig.value.content)
+    if (success) {
+      message.success('Nginx配置已保存')
+    } else {
+      message.error('保存失败')
+    }
+  } catch (error: any) {
+    message.error('保存失败：' + (error.message || '未知错误'))
+  } finally {
+    nginxSaving.value = false
+  }
+}
+
 async function handleCheckDns(record: DomainInfo) {
   message.loading(`正在检测 ${record.domain} 的 DNS...`, 2)
   try {
@@ -688,140 +1261,60 @@ async function handleCheckDns(record: DomainInfo) {
   }
 }
 
+// ==================== 字典数据 ====================
+const domainStatusDict = ref<any[]>([])
+const dnsStatusDict = ref<any[]>([])
+const sslStatusDict = ref<any[]>([])
 
-
-function generateNginxConfig(domain: DomainInfo): string {
-  let config = `server {\n`
-  
-  if (domain.enableHttps) {
-    // HTTP 重定向
-    config += `    listen 80;\n`
-    config += `    server_name ${domain.domain};\n`
-    config += `    return 301 https://$server_name$request_uri;\n`
-    config += `}\n\n`
-    config += `server {\n`
-    config += `    listen 443 ssl http2;\n`
-    config += `    server_name ${domain.domain};\n\n`
-    config += `    ssl_certificate /etc/nginx/ssl/${domain.domain}.pem;\n`
-    config += `    ssl_certificate_key /etc/nginx/ssl/${domain.domain}.key;\n`
-    config += `    ssl_protocols TLSv1.2 TLSv1.3;\n`
-    config += `    ssl_ciphers HIGH:!aNULL:!MD5;\n\n`
-  } else {
-    config += `    listen ${domain.port || 80};\n`
-    config += `    server_name ${domain.domain};\n\n`
-  }
-
-  if (domain.proxyPass) {
-    config += `    location / {\n`
-    config += `        proxy_pass ${domain.proxyPass};\n`
-    config += `        proxy_set_header Host $host;\n`
-    config += `        proxy_set_header X-Real-IP $remote_addr;\n`
-    config += `        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n`
-    config += `        proxy_set_header X-Forwarded-Proto $scheme;\n`
-    config += `    }\n`
-  } else {
-    config += `    root /var/www/${domain.domain};\n`
-    config += `    index index.html index.htm;\n\n`
-    config += `    location / {\n`
-    config += `        try_files $uri $uri/ /index.html;\n`
-    config += `    }\n`
-  }
-
-  config += `}\n`
-  return config
-}
-
-function copyNginxConfig() {
-  if (currentDomain.value) {
-    navigator.clipboard.writeText(generateNginxConfig(currentDomain.value))
-    message.success('配置已复制到剪贴板')
+async function loadDicts() {
+  try {
+    const [domainRes, dnsRes, sslRes] = await Promise.all([
+      getDictItemsByCode('domain_status'),
+      getDictItemsByCode('dns_status'),
+      getDictItemsByCode('ssl_status')
+    ])
+    domainStatusDict.value = domainRes.data.data || []
+    dnsStatusDict.value = dnsRes.data.data || []
+    sslStatusDict.value = sslRes.data.data || []
+  } catch (error) {
+    console.error('加载字典数据失败:', error)
   }
 }
 
-function downloadNginxConfig() {
-  if (currentDomain.value) {
-    const config = generateNginxConfig(currentDomain.value)
-    const blob = new Blob([config], { type: 'text/plain' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `${currentDomain.value.domain}.conf`
-    a.click()
-    URL.revokeObjectURL(url)
-    message.success('配置文件已下载')
-  }
+// 通用获取状态颜色（从remark字段取值）
+function getDictColor(dict: any[], value: string, defaultColor: string = 'default'): string {
+  const item = dict.find(item => item.value === value)
+  return item?.remark || defaultColor
 }
 
-function handlePushConfig() {
-  message.loading('正在推送配置到服务器...', 2)
-  setTimeout(() => {
-    message.success('配置推送成功')
-  }, 2000)
-}
-
-function handleReloadNginx() {
-  message.loading('正在重载 Nginx...', 2)
-  setTimeout(() => {
-    message.success('Nginx 重载成功')
-  }, 2000)
+// 通用获取状态文本
+function getDictLabel(dict: any[], value: string, defaultText: string = '-'): string {
+  const item = dict.find(item => item.value === value)
+  return item?.label || defaultText
 }
 
 function getStatusColor(status: DomainStatus): string {
-  const colors: Record<DomainStatus, string> = {
-    active: 'green',
-    pending: 'orange',
-    expired: 'red',
-    error: 'red'
-  }
-  return colors[status]
+  return getDictColor(domainStatusDict.value, status)
 }
 
 function getStatusText(status: DomainStatus): string {
-  const texts: Record<DomainStatus, string> = {
-    active: '正常',
-    pending: '待配置',
-    expired: '已过期',
-    error: '异常'
-  }
-  return texts[status]
+  return getDictLabel(domainStatusDict.value, status)
 }
 
 function getDnsStatusColor(status: DnsStatus): string {
-  const colors: Record<DnsStatus, string> = {
-    resolved: 'green',
-    unresolved: 'red',
-    checking: 'blue'
-  }
-  return colors[status]
+  return getDictColor(dnsStatusDict.value, status)
 }
 
 function getDnsStatusText(status: DnsStatus): string {
-  const texts: Record<DnsStatus, string> = {
-    resolved: '已解析',
-    unresolved: '未解析',
-    checking: '检测中'
-  }
-  return texts[status]
+  return getDictLabel(dnsStatusDict.value, status)
 }
 
 function getSslStatusColor(status: SslStatus): string {
-  const colors: Record<SslStatus, string> = {
-    valid: 'green',
-    expiring: 'orange',
-    expired: 'red',
-    none: 'default'
-  }
-  return colors[status]
+  return getDictColor(sslStatusDict.value, status)
 }
 
 function getSslStatusText(status: SslStatus): string {
-  const texts: Record<SslStatus, string> = {
-    valid: '正常',
-    expiring: '即将过期',
-    expired: '已过期',
-    none: '未配置'
-  }
-  return texts[status]
+  return getDictLabel(sslStatusDict.value, status)
 }
 </script>
 
diff --git a/src/views/platform/environments/index.vue b/src/views/platform/environments/index.vue
index fcd16ab..fcfb253 100644
--- a/src/views/platform/environments/index.vue
+++ b/src/views/platform/environments/index.vue
@@ -361,22 +361,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import {
-  PlusOutlined,
-  MoreOutlined,
-  EditOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-  TagOutlined,
-  CloudServerOutlined,
-  SwapOutlined,
-  DownloadOutlined,
-  UploadOutlined,
-  EyeOutlined,
-  LockOutlined
-} from '@ant-design/icons-vue'
 import type { EnvironmentInfo, EnvironmentType, EnvironmentVariable } from '@/types/platform'
 import { mockEnvironments, mockServers } from '@/mock/platform'
 import { mockProjects } from '@/mock/projects'
diff --git a/src/views/platform/files/index.vue b/src/views/platform/files/index.vue
new file mode 100644
index 0000000..8ed76a5
--- /dev/null
+++ b/src/views/platform/files/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="file-manager-page">
+    <a-page-header title="文件管理" sub-title="管理服务器文件">
+      <template #extra>
+        <a-select
+          v-model:value="currentServerId"
+          placeholder="请选择服务器"
+          style="width: 200px"
+          @change="handleServerChange"
+        >
+          <a-select-option v-for="server in serverList" :key="server.id" :value="server.id">
+            {{ server.name }} ({{ server.ip }})
+          </a-select-option>
+        </a-select>
+      </template>
+    </a-page-header>
+
+    <a-card :bordered="false">
+      <!-- 操作栏 -->
+      <div class="action-bar">
+        <div class="left-actions">
+           <!-- 路径导航 -->
+           <a-input-group compact style="display: flex; width: 400px">
+             <a-button @click="goUp" :disabled="currentPath === '/'"><ArrowUpOutlined /></a-button>
+             <a-input v-model:value="currentPath" @pressEnter="loadFiles" style="flex: 1" />
+             <a-button type="primary" @click="loadFiles"><ReloadOutlined /></a-button>
+           </a-input-group>
+        </div>
+        <div class="right-actions">
+          <a-space>
+             <a-button @click="handleNewFolder"><FolderAddOutlined /> 新建文件夹</a-button>
+             <a-button @click="handleNewFile"><FileAddOutlined /> 新建文件</a-button>
+             <FileUploader 
+                v-if="currentServerId"
+                :server-id="currentServerId" 
+                :path="currentPath" 
+                @success="loadFiles"
+             >
+                <a-button type="primary"><CloudUploadOutlined /> 上传文件</a-button>
+             </FileUploader>
+          </a-space>
+        </div>
+      </div>
+
+      <!-- 文件列表 -->
+      <a-table
+        :columns="columns"
+        :data-source="fileList"
+        :loading="loading"
+        row-key="name"
+        :pagination="false"
+        :scroll="{ y: 600 }"
+        size="middle"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'name'">
+             <div class="file-name" @click="handleItemClick(record as FileItem)" style="cursor: pointer; display: flex; align-items: center;">
+                <FolderFilled v-if="record.isDir" style="color: #faad14; font-size: 18px; margin-right: 8px;" />
+                <FileOutlined v-else style="color: #1890ff; font-size: 18px; margin-right: 8px;" />
+                <span :style="{ fontWeight: record.isDir ? '500' : 'normal' }">{{ record.name }}</span>
+             </div>
+          </template>
+          <template v-if="column.key === 'size'">
+             <span v-if="!record.isDir">{{ formatSize(record.size) }}</span>
+             <span v-else>-</span>
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button type="link" size="small" @click="handleDownload(record as FileItem)" v-if="!record.isDir">下载</a-button>
+              <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record as FileItem)">
+                <a-button type="link" danger size="small">删除</a-button>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新建文件夹弹窗 -->
+    <a-modal v-model:open="newFolderVisible" title="新建文件夹" @ok="confirmNewFolder">
+      <a-input v-model:value="newFolderName" placeholder="请输入文件夹名称" ref="newFolderInput" />
+    </a-modal>
+
+    <!-- 新建文件弹窗 -->
+    <a-modal v-model:open="newFileVisible" title="新建文件" @ok="confirmNewFile">
+       <a-input v-model:value="newFileName" placeholder="请输入文件名称" />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import request from '@/utils/request'
+import { getServerList } from '@/api/server'
+import FileUploader from '@/components/FileUploader.vue'
+import type { FileItem } from '@/types/platform/files'
+
+const loading = ref(false)
+const serverList = ref<any[]>([])
+const currentServerId = ref<number | undefined>(undefined)
+const currentPath = ref('/')
+const fileList = ref<FileItem[]>([])
+
+const newFolderVisible = ref(false)
+const newFolderName = ref('')
+const newFileVisible = ref(false)
+const newFileName = ref('')
+
+const columns = [
+  { title: '名称', key: 'name', sorter: (a: FileItem, b: FileItem) => a.name.localeCompare(b.name) },
+  { title: '大小', key: 'size', width: 120, align: 'right' as const },
+  { title: '修改时间', dataIndex: 'modTime', key: 'modTime', width: 200 },
+  { title: '权限', dataIndex: 'mode', key: 'mode', width: 100 },
+  { title: '操作', key: 'action', width: 150, align: 'center' as const }
+]
+
+onMounted(async () => {
+  await loadServers()
+})
+
+async function loadServers() {
+  try {
+    const res = await getServerList()
+    serverList.value = res || []
+    if (serverList.value.length > 0) {
+      currentServerId.value = serverList.value[0].id
+      loadFiles()
+    }
+  } catch (error) {
+    console.error('加载服务器列表失败', error)
+  }
+}
+
+function handleServerChange() {
+  currentPath.value = '/'
+  loadFiles()
+}
+
+async function loadFiles() {
+  if (!currentServerId.value) return
+  loading.value = true
+  try {
+    const res = await request.post<any>('/platform/files/list', {
+      serverId: currentServerId.value,
+      path: currentPath.value
+    })
+    
+    // 兼容不同的后端返回结构
+    const data = res.data.data
+    const items = Array.isArray(data) ? data : (data.items || [])
+    
+    fileList.value = items.sort((a: FileItem, b: FileItem) => {
+       if (a.isDir && !b.isDir) return -1
+       if (!a.isDir && b.isDir) return 1
+       return a.name.localeCompare(b.name)
+    })
+  } catch (error) {
+    console.error('加载文件列表失败', error)
+    fileList.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleItemClick(item: FileItem) {
+  if (item.isDir) {
+    currentPath.value = getFullPath(item.name)
+    loadFiles()
+  }
+}
+
+function goUp() {
+  if (currentPath.value === '/') return
+  const parts = currentPath.value.split('/').filter(Boolean)
+  parts.pop()
+  currentPath.value = '/' + parts.join('/')
+  loadFiles()
+}
+
+function getFullPath(name: string) {
+  return currentPath.value === '/' ? `/${name}` : `${currentPath.value}/${name}`
+}
+
+function formatSize(bytes: number) {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+// 新建文件夹
+function handleNewFolder() {
+  newFolderName.value = ''
+  newFolderVisible.value = true
+}
+
+async function confirmNewFolder() {
+  if (!newFolderName.value) return
+  try {
+    await request.post('/platform/files/mkdir', {
+      serverId: currentServerId.value,
+      path: getFullPath(newFolderName.value)
+    })
+    message.success('创建成功')
+    newFolderVisible.value = false
+    loadFiles()
+  } catch (error: any) {
+    message.error(error.response?.data?.message || '创建失败')
+  }
+}
+
+// 新建文件
+function handleNewFile() {
+  newFileName.value = ''
+  newFileVisible.value = true
+}
+
+async function confirmNewFile() {
+  if (!newFileName.value) return
+  try {
+    await request.post('/platform/files/create', {
+      serverId: currentServerId.value,
+      path: getFullPath(newFileName.value)
+    })
+    message.success('创建成功')
+    newFileVisible.value = false
+    loadFiles()
+  } catch (error: any) {
+    message.error(error.response?.data?.message || '创建失败')
+  }
+}
+
+// 删除
+async function handleDelete(item: FileItem) {
+  try {
+    await request.post('/platform/files/delete', {
+      serverId: currentServerId.value,
+      path: getFullPath(item.name),
+      isDir: item.isDir
+    })
+    message.success('删除成功')
+    loadFiles()
+  } catch (error: any) {
+    message.error(error.response?.data?.message || '删除失败')
+  }
+}
+
+// 下载
+function handleDownload(item: FileItem) {
+    // 简易下载实现，实际上可能需要一个 dedicated download API that handles streams or signed URLs
+    // Assuming backend has a simple download endpoint or we reuse 1Panel approach
+    // 这里暂时不做完整实现，或者提示用户
+    message.info('下载功能开发中')
+}
+</script>
+
+<style scoped>
+.file-manager-page {
+    padding: 24px;
+}
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/views/platform/log-center/index.vue b/src/views/platform/log-center/index.vue
index 0e7c491..bd10103 100644
--- a/src/views/platform/log-center/index.vue
+++ b/src/views/platform/log-center/index.vue
@@ -242,17 +242,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
 import { message } from 'ant-design-vue'
 import type { Dayjs } from 'dayjs'
-import {
-  SearchOutlined,
-  DownloadOutlined,
-  EyeOutlined,
-  TagOutlined,
-  CloudServerOutlined
-} from '@ant-design/icons-vue'
 import type { LogRecord, LogType, LogLevel } from '@/types/platform'
 import { mockLogs } from '@/mock/platform'
 import { mockProjects } from '@/mock/projects'
diff --git a/src/views/platform/menus/index.vue b/src/views/platform/menus/index.vue
index 6e0c122..bad641b 100644
--- a/src/views/platform/menus/index.vue
+++ b/src/views/platform/menus/index.vue
@@ -148,26 +148,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, watch } from 'vue'
-import { useRoute } from 'vue-router'
 import { message } from 'ant-design-vue'
-import { PlusOutlined } from '@ant-design/icons-vue'
-import type { MenuItem } from '@/config'
+import type { PlatformProject, MenuNode } from '@/types/platform/menus'
 
 const route = useRoute()
 
-interface PlatformProject {
-  id: string
-  name: string
-  shortName: string
-  logo: string
-  color?: string
-}
-
-interface MenuNode extends MenuItem {
-  order?: number
-}
-
 const selectedProjectId = ref<string>('')
 const selectedMenuKeys = ref<string[]>([])
 const isEditing = ref(false)
diff --git a/src/views/platform/projects/index.vue b/src/views/platform/projects/index.vue
index 93c8cea..068cfd6 100644
--- a/src/views/platform/projects/index.vue
+++ b/src/views/platform/projects/index.vue
@@ -56,7 +56,13 @@
               show-zero
               :number-style="{ backgroundColor: record.color || '#1890ff' }"
             >
-              <a-button type="link" size="small" @click="goToMenus(record as any)">
+              <a-button 
+                type="link" 
+                size="small" 
+                @click="goToMenus(record as any)"
+                :disabled="(record as any).systemType === 'portal'"
+                :title="(record as any).systemType === 'portal' ? '门户类项目无菜单' : ''"
+              >
                 查看菜单
               </a-button>
             </a-badge>
@@ -71,8 +77,7 @@
                 v-if="getDeployStatus((record as any).id).deployed"
                 type="default" 
                 size="small"
-                style="color: #52c41a; border-color: #52c41a;"
-                @click="handleDeploy(record as any)"
+                style="color: #52c41a; border-color: #52c41a; cursor: default;"
               >
                 <CheckCircleOutlined /> 已部署
               </a-button>
@@ -462,20 +467,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { message, Modal } from 'ant-design-vue'
-import { 
-  PlusOutlined, 
-  HistoryOutlined, 
-  SaveOutlined, 
-  RollbackOutlined,
-  DeleteOutlined,
-  UploadOutlined,
-  FileOutlined,
-  CloudUploadOutlined,
-  CheckCircleOutlined
-} from '@ant-design/icons-vue'
 import type { PlatformProject, ProjectMenuItem, ProjectVersion } from '@/mock/projects'
 import { useProjectStore } from '@/stores'
 import ProjectUpload from '@/components/ProjectUpload.vue'
@@ -491,9 +483,13 @@ import {
   getServerAcmeAccounts,
   getServerDnsAccounts,
   checkDeployStatus,
+  getNginxConfig,
+  saveNginxConfig,
+  reloadNginx,
   type AcmeAccount,
   type DnsAccount,
-  type DeployResult
+  type DeployResult,
+  type NginxConfigResult
 } from '@/api/project'
 import { getServerList } from '@/api/server'
 import { getDomainList } from '@/api/domain'
@@ -672,30 +668,6 @@ const versionList = computed(() => {
   return [...(versionProject.value.versions || [])].reverse()
 })
 
-// 证书信息表格列
-const certColumns = [
-  { title: '主域名', dataIndex: 'domain', key: 'domain' },
-  { title: '其他域名', dataIndex: 'otherDomain', key: 'otherDomain' },
-  { title: '签发组织', dataIndex: 'issuer', key: 'issuer' },
-  { title: '类型', dataIndex: 'type', key: 'type' },
-  { title: 'Acme 账号', dataIndex: 'acmeAccount', key: 'acmeAccount' },
-  { title: '过期时间', dataIndex: 'expireTime', key: 'expireTime' },
-  { title: '备注', dataIndex: 'remark', key: 'remark' }
-]
-
-// 证书mock数据
-const certData = [
-  {
-    domain: 'key.nanxiislet.com',
-    otherDomain: '',
-    issuer: "Let's Encrypt",
-    type: 'DNS账号',
-    acmeAccount: 'acme@1paneldev.com',
-    expireTime: '2026-03-18',
-    remark: ''
-  }
-]
-
 const formData = reactive({
   id: '', // 对应后端 ID (Update用)
   code: '', // 对应后端 Code (项目标识)
@@ -753,21 +725,6 @@ function formatTime(isoString: string): string {
   })
 }
 
-/**
- * 计算菜单项总数
- */
-function countMenuItems(menus: ProjectMenuItem[]): number {
-  if (!menus) return 0
-  let count = 0
-  for (const menu of menus) {
-    if (menu.children) {
-      count += menu.children.length
-    } else {
-      count += 1
-    }
-  }
-  return count
-}
 
 /**
  * 打开版本管理抽屉
@@ -839,17 +796,28 @@ function handleDeleteVersion(version: ProjectVersion) {
 /**
  * 进入项目
  */
-function handleEnterProject(record: PlatformProject) {
-  if (!record.enabled) {
+function handleEnterProject(record: any) {
+  if (record.status !== 'active') {
     message.warning('项目已禁用，无法进入')
     return
   }
-  if (!record.baseUrl) {
+  
+  // 1. 集成到框架内的后台：切换项目上下文并跳转
+  if (record.integrateToFramework) {
+    projectStore.switchProject(record.id)
+    message.success(`已切换到项目：${record.name}`)
+    // 跳转到业务项目路由
+    router.push(`/app/${record.id}/dashboard`)
+    return
+  }
+  
+  // 2. 未集成：打开新页面
+  const url = record.url || record.baseUrl
+  if (!url) {
     message.warning('项目未配置访问地址，无法进入')
     return
   }
-  projectStore.switchProject(record.id)
-  router.push(`/app/${record.id}/dashboard`)
+  window.open(url, '_blank')
 }
 
 function handleAdd() {
@@ -1077,45 +1045,6 @@ function getServerName(serverId?: string): string {
   return server ? `${server.name} (${server.ip})` : ''
 }
 
-/**
- * 加载 1Panel 账户数据
- */
-async function loadPanelAccounts() {
-  try {
-    // 从项目绑定的服务器获取账户数据
-    const serverId = (deployProject.value as any)?.serverId
-    if (!serverId) {
-      console.warn('项目未绑定服务器')
-      return
-    }
-    
-    // 通过后端接口获取 Acme 账户列表
-    try {
-      const acmeResult = await getServerAcmeAccounts(Number(serverId))
-      acmeAccounts.value = acmeResult?.items || []
-    } catch (e) {
-      console.error('获取 Acme 账户失败:', e)
-    }
-    
-    // 通过后端接口获取 DNS 账户列表
-    try {
-      const dnsResult = await getServerDnsAccounts(Number(serverId))
-      dnsAccounts.value = dnsResult?.items || []
-    } catch (e) {
-      console.error('获取 DNS 账户失败:', e)
-    }
-    
-    // 设置默认值
-    if (acmeAccounts.value.length > 0) {
-      deployAcmeAccountId.value = acmeAccounts.value[0].id
-    }
-    if (dnsAccounts.value.length > 0) {
-      deployDnsAccountId.value = dnsAccounts.value[0].id
-    }
-  } catch (error) {
-    console.error('加载 1Panel 账户失败:', error)
-  }
-}
 
 /**
  * 打开部署弹窗
@@ -1126,10 +1055,6 @@ async function handleDeploy(record: PlatformProject) {
   deployResult.value = null
   deploySteps.value = []
   deployCurrentStep.value = 0
-  
-  // 加载账户数据 - 已移除，改用后端自动匹配已绑定证书
-  // await loadPanelAccounts()
-  
   deployModalVisible.value = true
 }
 
diff --git a/src/views/platform/runtimes/index.vue b/src/views/platform/runtimes/index.vue
new file mode 100644
index 0000000..6d36987
--- /dev/null
+++ b/src/views/platform/runtimes/index.vue
@@ -0,0 +1,1110 @@
+<template>
+  <div class="runtime-container">
+    <!-- 顶部：服务器选择和运行时类型标签 -->
+    <div class="header-row">
+      <div class="server-select">
+        <span class="label">服务器：</span>
+        <a-select
+          v-model:value="currentServerId"
+          placeholder="请选择服务器"
+          style="width: 200px"
+          :loading="serverLoading"
+          @change="handleServerChange"
+        >
+          <a-select-option v-for="s in serverOptions" :key="s.value" :value="s.value">
+            {{ s.label }}
+          </a-select-option>
+        </a-select>
+      </div>
+      <div class="runtime-tabs">
+        <a-radio-group v-model:value="activeRuntimeType" button-style="solid" @change="handleTypeChange">
+          <a-radio-button v-for="rt in runtimeTypes" :key="rt.key" :value="rt.key">
+            {{ rt.label }}
+          </a-radio-button>
+        </a-radio-group>
+      </div>
+    </div>
+
+    <!-- 操作栏 -->
+    <div class="action-bar">
+      <a-button type="primary" @click="handleCreate">
+        <PlusOutlined /> 创建运行环境
+      </a-button>
+      <div class="right-actions">
+        <a-button @click="handleRefresh" :loading="loading">
+          <ReloadOutlined /> 刷新
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 运行时列表表格 -->
+    <a-table
+      :columns="columns"
+      :data-source="runtimes"
+      :loading="loading"
+      :pagination="pagination"
+      row-key="id"
+      @change="handleTableChange"
+    >
+      <!-- 名称列 -->
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
+          <span>{{ record.name }}</span>
+        </template>
+
+        <!-- 项目目录列 -->
+        <template v-if="column.key === 'codeDir'">
+          <a-tooltip :title="record.codeDir">
+            <FolderOutlined style="margin-right: 4px" />
+            <span class="code-dir">{{ record.codeDir || '-' }}</span>
+          </a-tooltip>
+        </template>
+
+        <!-- 外部映射端口列 -->
+        <template v-if="column.key === 'exposedPorts'">
+          <template v-if="record.exposedPorts && record.exposedPorts.length > 0">
+            <div v-for="(port, index) in record.exposedPorts" :key="index" class="port-item">
+              <a-tag color="blue">
+                {{ port.hostIP }}:{{ port.hostPort }} → {{ port.containerPort }}
+              </a-tag>
+            </div>
+          </template>
+          <span v-else>-</span>
+        </template>
+
+        <!-- 状态列 -->
+        <template v-if="column.key === 'status'">
+          <a-tag :color="getStatusColor(record.status)">
+            {{ getStatusText(record.status) }}
+          </a-tag>
+        </template>
+
+        <!-- 日志列 -->
+        <template v-if="column.key === 'logs'">
+          <a-button type="link" size="small" @click="handleViewLogs(record as any)">
+            查看日志
+          </a-button>
+        </template>
+
+        <!-- 备注列 -->
+        <template v-if="column.key === 'remark'">
+          {{ record.remark || '-' }}
+        </template>
+
+        <!-- 时间列 -->
+        <template v-if="column.key === 'createdAt'">
+          {{ formatTime(record.createdAt) }}
+        </template>
+
+        <!-- 操作列 -->
+        <template v-if="column.key === 'action'">
+          <a-space :size="4">
+            <template v-if="record.status === 'Running'">
+              <a-button type="link" size="small" @click="handleOperate(record as any, 'stop')">停止</a-button>
+              <a-button type="link" size="small" @click="handleOperate(record as any, 'restart')">重启</a-button>
+            </template>
+            <template v-else>
+              <a-button type="link" size="small" @click="handleOperate(record as any, 'start')">启动</a-button>
+            </template>
+            <a-button type="link" size="small" @click="handleEdit(record as any)">编辑</a-button>
+            <a-button type="link" size="small" @click="handleUploadFile(record as any)">上传</a-button>
+            <a-button type="link" size="small" danger @click="showDeleteConfirm(record as any)">删除</a-button>
+          </a-space>
+        </template>
+      </template>
+    </a-table>
+
+    <!-- 创建运行环境抽屉 -->
+    <a-drawer
+      v-model:open="createDrawerVisible"
+      :title="isEditMode ? '编辑运行环境' : '创建运行环境'"
+      :width="600"
+      :maskClosable="false"
+      @close="handleCreateClose"
+    >
+      <a-spin :spinning="createLoading">
+        <a-form
+          ref="createFormRef"
+          :model="createForm"
+          :rules="createRules"
+          layout="vertical"
+        >
+          <a-form-item label="名称" name="name" required>
+            <a-input v-model:value="createForm.name" placeholder="请输入名称" :disabled="isEditMode" />
+          </a-form-item>
+
+          <a-form-item label="应用" required>
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-form-item-rest>
+                  <a-select
+                    v-model:value="createForm.appKey"
+                    placeholder="选择应用"
+                    :loading="appLoading"
+                    :disabled="isEditMode"
+                    @change="handleAppChange"
+                  >
+                    <a-select-option v-for="app in appList" :key="app.key" :value="app.key">
+                      {{ app.name }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item-rest>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item-rest>
+                  <a-select
+                    v-model:value="createForm.version"
+                    placeholder="选择版本"
+                    :loading="versionLoading"
+                    :disabled="isEditMode"
+                    @change="handleVersionChange"
+                  >
+                    <a-select-option v-for="v in versionList" :key="v" :value="v">
+                      {{ v }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item-rest>
+              </a-col>
+            </a-row>
+          </a-form-item>
+
+          <a-form-item label="项目目录" name="codeDir" required>
+            <FolderSelector 
+              v-model="createForm.codeDir" 
+              :serverId="currentServerId!" 
+              placeholder="/" 
+              :disabled="isEditMode"
+            />
+            <div class="form-help">目录中要包含 jar 包，子目录中包含也可</div>
+          </a-form-item>
+
+          <a-form-item label="启动命令" name="execScript" required>
+            <!-- Node Logic -->
+            <template v-if="createForm.appKey === 'node' || createForm.appKey === 'Node.js' || activeRuntimeType === 'node'">
+                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
+                   <!-- Only show label if cleaner layout, but a-form-item has label -->
+                   <!-- Use slot custom label? No, just inside -->
+                   <div style="flex: 1"></div>
+                   <div style="display: flex; align-items: center; gap: 8px;">
+                      <span>自定义启动命令</span>
+                      <a-switch v-model:checked="createForm.isCustomCommand" />
+                   </div>
+                </div>
+                <a-input v-if="createForm.isCustomCommand" v-model:value="createForm.execScript" placeholder="请填写完整启动命令" />
+                <a-select v-else v-model:value="createForm.execScript" placeholder="请选择启动命令">
+                   <a-select-option v-for="s in createForm.scripts" :key="s.name" :value="s.name">
+                       <div style="display: flex; align-items: center;">
+                         <span style="min-width: 120px; display: inline-block;">{{ s.name }}</span>
+                         <span style="color: #999">【 {{ s.script }} 】</span>
+                       </div>
+                   </a-select-option>
+                </a-select>
+                <div class="form-help" style="margin-top: 4px;">启动命令列表是从源码目录下的 package.json 文件中解析而来</div>
+            </template>
+            <!-- Common/Java Logic -->
+            <template v-else>
+              <a-input v-model:value="createForm.execScript" placeholder="请填写完整启动命令" />
+              <div class="form-help">请填写完整启动命令，例如：java -jar halo.jar -Xmx1024M -Xms256M</div>
+            </template>
+          </a-form-item>
+
+          <a-form-item 
+            label="容器名称" 
+            name="containerName" 
+            required
+          >
+            <a-input v-model:value="createForm.containerName" placeholder="请输入容器名称" />
+          </a-form-item>
+
+          <a-form-item label="备注" name="remark">
+            <a-textarea v-model:value="createForm.remark" :rows="2" placeholder="备注信息" />
+          </a-form-item>
+
+          <template v-if="createForm.appKey === 'node' || createForm.appKey === 'Node.js' || activeRuntimeType === 'node'">
+             <a-form-item label="包管理器" name="packageManager">
+                 <a-select v-model:value="createForm.packageManager">
+                    <a-select-option value="npm">npm</a-select-option>
+                    <a-select-option value="yarn">yarn</a-select-option>
+                    <a-select-option value="pnpm">pnpm</a-select-option>
+                 </a-select>
+             </a-form-item>
+             <a-form-item label="镜像源" name="registry">
+                  <a-select v-model:value="createForm.registry">
+                      <a-select-option value="default">默认 [https://registry.npmjs.org/]</a-select-option>
+                      <a-select-option value="taobao">淘宝 [https://registry.npmmirror.com/]</a-select-option>
+                  </a-select>
+             </a-form-item>
+          </template>
+
+          <!-- 端口/环境变量/挂载/主机映射 -->
+          <!-- 端口设置 -->
+          <a-form-item label="端口设置">
+            <div class="ports-header" style="margin-bottom: 8px;">
+              <a-button size="small" @click="addPort">
+                <PlusOutlined /> 添加端口
+              </a-button>
+            </div>
+            <div v-for="(port, index) in createForm.exposedPorts" :key="index" class="port-row">
+              <a-input-group compact>
+                <a-input 
+                  v-model:value="port.hostPort" 
+                  style="width: 120px" 
+                  placeholder="主机端口" 
+                  addon-before="主机"
+                />
+                <span class="port-arrow" style="padding: 0 8px; line-height: 32px; color: #999;">→</span>
+                <a-input 
+                  v-model:value="port.containerPort" 
+                  style="width: 120px" 
+                  placeholder="容器端口" 
+                  addon-before="容器"
+                />
+                <a-button type="text" danger @click="removePort(index)">
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-input-group>
+            </div>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+
+      <template #footer>
+        <a-space>
+          <a-button @click="handleCreateClose">取消</a-button>
+          <a-button type="primary" :loading="submitLoading" @click="handleCreateSubmit">确认</a-button>
+        </a-space>
+      </template>
+    </a-drawer>
+
+
+    
+    <FileUploader 
+      ref="fileUploaderRef" 
+      :server-id="uploadServerId" 
+      :path="uploadPath"
+    />
+    
+    <TaskLogViewer 
+      v-model:open="logDrawerVisible" 
+      :server-id="currentServerId" 
+      :task-id="currentLogTaskId"
+      :container-name="currentLogContainerName"
+      :compose-path="currentLogComposePath"
+    />
+
+    <!-- 删除确认弹窗 -->
+    <a-modal
+      v-model:open="deleteModalVisible"
+      title="删除运行环境"
+      :confirm-loading="deleteLoading"
+      @ok="handleDeleteConfirm"
+      @cancel="deleteModalVisible = false"
+    >
+      <p>确定要删除运行环境 <strong>{{ deleteRecord?.name }}</strong> 吗？</p>
+      <a-checkbox v-model:checked="deleteWithFolder">
+        同时删除关联的项目目录：{{ deleteRecord?.codeDir }}
+      </a-checkbox>
+      <p v-if="deleteWithFolder" style="color: #ff4d4f; margin-top: 8px;">
+        <WarningOutlined /> 警告：删除目录操作不可恢复！
+      </p>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import type { FormInstance } from 'ant-design-vue'
+import type { TablePaginationConfig } from 'ant-design-vue'
+import { getServerList, type ServerBase } from '@/api/server'
+import {
+  searchRuntimes,
+  syncRuntimes,
+  operateRuntime,
+  deleteRuntime,
+  searchRuntimeApps,
+  getRuntimeAppInfo,
+  getRuntimeDetail,
+  createRuntime,
+  updateRuntime,
+  getNodeScripts,
+  type NodeScript,
+  type RuntimeRecord,
+  type RuntimeType,
+  type RuntimeApp,
+  type UpdateRuntimeParams
+} from '@/api/runtime'
+import FolderSelector from '@/components/FolderSelector.vue'
+import FileUploader from '@/components/FileUploader.vue'
+import TaskLogViewer from '@/components/TaskLogViewer.vue'
+
+// 运行时类型列表
+const runtimeTypes: RuntimeType[] = [
+  // { key: 'php', label: 'PHP' },
+  { key: 'java', label: 'Java' },
+  { key: 'node', label: 'Node.js' },
+  // { key: 'go', label: 'Go' },
+  // { key: 'python', label: 'Python' },
+  // { key: 'dotnet', label: '.NET' }
+]
+
+// 服务器相关
+const serverLoading = ref(false)
+const servers = ref<ServerBase[]>([])
+const currentServerId = ref<number>()
+const serverOptions = computed(() => {
+  return servers.value.map(s => ({
+    label: s.name,
+    value: s.id
+  }))
+})
+
+// 当前选中的运行时类型
+const activeRuntimeType = ref('node')
+
+// 表格相关
+const loading = ref(false)
+const runtimes = ref<RuntimeRecord[]>([])
+
+const pagination = reactive<TablePaginationConfig>({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条`
+})
+
+// 表格列定义
+const columns = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150
+  },
+  {
+    title: '项目目录',
+    dataIndex: 'codeDir',
+    key: 'codeDir',
+    width: 150,
+    ellipsis: true
+  },
+  {
+    title: '版本',
+    dataIndex: 'version',
+    key: 'version',
+    width: 100
+  },
+  {
+    title: '外部映射端口',
+    key: 'exposedPorts',
+    width: 200
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 100
+  },
+  {
+    title: '日志',
+    key: 'logs',
+    width: 80
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    width: 120,
+    ellipsis: true
+  },
+  {
+    title: '时间',
+    dataIndex: 'createdAt',
+    key: 'createdAt',
+    width: 180
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 200,
+    fixed: 'right' as const
+  }
+]
+
+// 获取服务器列表
+async function loadServers() {
+  serverLoading.value = true
+  try {
+    const res = await getServerList()
+    servers.value = res
+    if (res.length > 0 && !currentServerId.value) {
+      currentServerId.value = res[0].id
+      await loadRuntimes()
+    }
+  } catch (error) {
+    console.error('获取服务器列表失败:', error)
+  } finally {
+    serverLoading.value = false
+  }
+}
+
+// 加载运行时列表
+async function loadRuntimes() {
+  if (!currentServerId.value) return
+
+  loading.value = true
+  try {
+    const res = await searchRuntimes(
+      currentServerId.value,
+      activeRuntimeType.value,
+      pagination.current,
+      pagination.pageSize
+    )
+    runtimes.value = res.items
+    pagination.total = res.total
+  } catch (error: any) {
+    console.error('加载运行时列表失败:', error)
+    message.error('加载失败: ' + (error.message || '未知错误'))
+  } finally {
+    loading.value = false
+  }
+}
+
+// 服务器切换
+function handleServerChange() {
+  pagination.current = 1
+  loadRuntimes()
+}
+
+// 运行时类型切换
+function handleTypeChange() {
+  pagination.current = 1
+  loadRuntimes()
+}
+
+// 表格分页变化
+function handleTableChange(pag: TablePaginationConfig) {
+  pagination.current = pag.current || 1
+  pagination.pageSize = pag.pageSize || 20
+  loadRuntimes()
+}
+
+// 刷新
+async function handleRefresh() {
+  if (!currentServerId.value) return
+
+  loading.value = true
+  try {
+    // 先同步状态
+    await syncRuntimes(currentServerId.value)
+    // 再加载列表
+    await loadRuntimes()
+    message.success('刷新成功')
+  } catch (error: any) {
+    message.error('刷新失败: ' + (error.message || '未知错误'))
+  } finally {
+    loading.value = false
+  }
+}
+
+// 任务日志相关
+// 任务日志相关
+const logDrawerVisible = ref(false)
+const currentLogTaskId = ref('')
+const currentLogContainerName = ref('')
+const currentLogComposePath = ref('')
+
+function handleViewLogs(record: RuntimeRecord) {
+  // Reset all
+  currentLogTaskId.value = ''
+  currentLogContainerName.value = ''
+  currentLogComposePath.value = ''
+
+  if (record.taskId) {
+     currentLogTaskId.value = record.taskId
+     logDrawerVisible.value = true
+  } else {
+     // 尝试获取容器日志
+     // 1. 尝试构建 composePath
+     if (record.path) {
+         // record.path 通常是目录 (e.g. /opt/1panel/runtime/...)
+         // 1Panel 接口需要 docker-compose.yml 的完整路径
+         // 如果 path 已经包含 yml 则不加，否则加
+         if (record.path.endsWith('.yml') || record.path.endsWith('.yaml')) {
+             currentLogComposePath.value = record.path
+         } else {
+             // 确保 path 结尾没有 /
+             const basePath = record.path.endsWith('/') ? record.path.slice(0, -1) : record.path
+             currentLogComposePath.value = basePath + '/docker-compose.yml'
+         }
+     }
+     
+     // 2. 尝试获取 containerName (Resource)
+     if (record.resource) {
+        currentLogContainerName.value = record.resource
+     }
+     
+     if (currentLogComposePath.value || currentLogContainerName.value) {
+        logDrawerVisible.value = true
+     } else {
+        message.info('无法获取该运行环境的日志信息 (无Path或Resource)')
+     }
+  }
+}
+
+// 创建运行环境
+const createDrawerVisible = ref(false)
+const createLoading = ref(false)
+const submitLoading = ref(false)
+const appLoading = ref(false)
+const versionLoading = ref(false)
+const createFormRef = ref<FormInstance>()
+
+// 应用列表和版本列表
+const appList = ref<RuntimeApp[]>([])
+const versionList = ref<string[]>([])
+const currentApp = ref<RuntimeApp | null>(null)
+const versionDetail = ref<any>(null)
+
+// 创建表单
+const createForm = reactive({
+  name: '',
+  appKey: '',
+  version: '',
+  codeDir: '/',
+  execScript: '',
+  containerName: '',
+  remark: '',
+  exposedPorts: [] as Array<{ hostIP: string; hostPort: string; containerPort: string }>,
+  environments: [] as Array<{ key: string; value: string }>,
+  volumes: [] as Array<{ hostPath: string; containerPath: string }>,
+  extraHosts: [] as Array<{ host: string; ip: string }>,
+  packageManager: 'npm',
+  registry: 'default',
+  isCustomCommand: false,
+  scripts: [] as NodeScript[]
+})
+
+// 表单验证规则
+// 表单验证规则
+const createRules = computed(() => {
+  const rules: any = {
+    name: [{ required: true, message: '请输入名称' }],
+    codeDir: [{ required: true, message: '请输入项目目录' }],
+    execScript: [{ required: true, message: '请输入启动命令' }],
+    containerName: [{ required: true, message: '请输入容器名称' }]
+  }
+  
+  return rules
+})
+
+// Fetch Node Scripts
+async function fetchNodeScripts(dir: string) {
+    if (!currentServerId.value) return
+    if (!dir || dir === '/') return
+    
+    try {
+        const scripts = await getNodeScripts(currentServerId.value, dir)
+        createForm.scripts = scripts
+    } catch (e) {
+        console.error('Fetch scripts failed', e)
+        createForm.scripts = []
+    }
+}
+
+watch(() => createForm.codeDir, (newVal) => {
+    if (createForm.appKey === 'node' || createForm.appKey === 'Node.js' || activeRuntimeType.value === 'node') {
+        fetchNodeScripts(newVal)
+    }
+})
+
+watch(() => createForm.appKey, (newVal) => {
+    if ((newVal === 'node' || newVal === 'Node.js') && createForm.codeDir) {
+        fetchNodeScripts(createForm.codeDir)
+    }
+})
+
+// 打开创建抽屉
+function handleCreate() {
+  isEditMode.value = false
+  createDrawerVisible.value = true
+  resetCreateForm()
+  loadAppList()
+}
+
+// 关闭创建抽屉
+function handleCreateClose() {
+  createDrawerVisible.value = false
+  resetCreateForm()
+}
+
+// 重置表单
+function resetCreateForm() {
+  createForm.name = ''
+  createForm.appKey = ''
+  createForm.version = ''
+  createForm.codeDir = '/'
+  createForm.execScript = ''
+  createForm.containerName = ''
+  createForm.remark = ''
+  createForm.exposedPorts = []
+  createForm.environments = []
+  createForm.volumes = []
+  createForm.extraHosts = []
+  appList.value = []
+  versionList.value = []
+  currentApp.value = null
+  versionDetail.value = null
+}
+
+// 加载应用列表
+async function loadAppList() {
+  if (!currentServerId.value) return
+  
+  appLoading.value = true
+  try {
+    const data = await searchRuntimeApps(currentServerId.value, activeRuntimeType.value)
+    appList.value = data.items || []
+    // 如果只有一个应用，自动选中
+    if (appList.value.length === 1) {
+      createForm.appKey = appList.value[0].key
+      handleAppChange(appList.value[0].key)
+    }
+  } catch (error: any) {
+    message.error('加载应用列表失败: ' + (error.message || '未知错误'))
+  } finally {
+    appLoading.value = false
+  }
+}
+
+// 应用选择变化
+async function handleAppChange(appKey: string) {
+  if (!currentServerId.value || !appKey) return
+  
+  createForm.version = ''
+  versionList.value = []
+  versionDetail.value = null
+  
+  versionLoading.value = true
+  try {
+    // 获取应用信息（包含版本列表）
+    const appInfo = await getRuntimeAppInfo(currentServerId.value, appKey)
+    currentApp.value = appInfo
+    versionList.value = appInfo.versions || []
+    // 默认选中第一个版本
+    if (versionList.value.length > 0) {
+      createForm.version = versionList.value[0]
+      await handleVersionChange(versionList.value[0])
+    }
+  } catch (error: any) {
+    message.error('获取应用信息失败: ' + (error.message || '未知错误'))
+  } finally {
+    versionLoading.value = false
+  }
+}
+
+// 版本选择变化
+async function handleVersionChange(version: string) {
+  if (!currentServerId.value || !currentApp.value || !version) return
+  
+  versionLoading.value = true
+  try {
+    const detail = await getRuntimeDetail(currentServerId.value, currentApp.value.id, version)
+    versionDetail.value = detail
+  } catch (error: any) {
+    console.error('获取版本详情失败:', error)
+  } finally {
+    versionLoading.value = false
+  }
+}
+
+// 提交创建/编辑
+async function handleCreateSubmit() {
+  if (!isEditMode.value) {
+      if (!currentServerId.value || !currentApp.value || !versionDetail.value) {
+        message.warning('请选择应用和版本')
+        return
+      }
+  }
+  
+  try {
+    await createFormRef.value?.validate()
+  } catch {
+    return
+  }
+  
+  submitLoading.value = true
+  try {
+    // 构建参数
+    // 构建参数
+    const params: Record<string, any> = {
+      EXEC_SCRIPT: createForm.execScript,
+      CODE_DIR: createForm.codeDir,
+      CONTAINER_NAME: createForm.containerName
+    }
+    
+    // Node.js Specific Params
+    if (createForm.appKey === 'node' || createForm.appKey === 'Node.js' || activeRuntimeType.value === 'node') {
+        params.PACKAGE_MANAGER = createForm.packageManager
+        params.REGISTRY = createForm.registry
+        params.CUSTOM_SCRIPT = createForm.isCustomCommand ? '1' : '0'
+    }
+    
+    // 环境变量 (Add to params)
+    createForm.environments.filter(e => e.key).forEach(e => {
+      params[e.key] = e.value
+    })
+    
+    // 端口映射
+    const exposedPorts = createForm.exposedPorts
+      .filter(p => p.hostPort && p.containerPort)
+      .map(p => ({
+        hostIP: p.hostIP || '0.0.0.0',
+        hostPort: parseInt(p.hostPort),
+        containerPort: parseInt(p.containerPort)
+      }))
+    
+    if (isEditMode.value) {
+        // Merge original params with new params to preserve all required fields
+        const { originalParams, ...restExtraParams } = extraEditParams.value
+        const mergedParams = {
+            ...originalParams,
+            ...params
+        }
+        
+        await updateRuntime({
+            serverId: editServerId.value,
+            id: editRuntimeId.value,
+            remark: createForm.remark,
+            exposedPorts: exposedPorts,
+            params: mergedParams,
+            codeDir: createForm.codeDir,
+            ...restExtraParams,
+            name: createForm.name,
+            rebuild: true
+        })
+        message.success('更新成功')
+    } else {
+        // 创建
+        await createRuntime({
+          serverId: currentServerId.value,
+          appDetailId: versionDetail.value.id,
+          name: createForm.name,
+          type: activeRuntimeType.value,
+          image: '',
+          version: createForm.version,
+          source: 'appstore',
+          codeDir: createForm.codeDir,
+          params,
+          exposedPorts,
+          remark: createForm.remark
+        })
+        message.success('创建成功')
+    }
+    
+    createDrawerVisible.value = false
+    await loadRuntimes()
+  } catch (error: any) {
+    message.error((isEditMode.value ? '更新' : '创建') + '失败: ' + (error.message || '未知错误'))
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+// 端口操作
+function addPort() {
+  createForm.exposedPorts.push({ hostIP: '0.0.0.0', hostPort: '', containerPort: '' })
+}
+function removePort(index: number) {
+  createForm.exposedPorts.splice(index, 1)
+}
+
+
+
+// 编辑相关
+const isEditMode = ref(false)
+const editRuntimeId = ref(0) // ID for update
+const editServerId = ref(0)
+const extraEditParams = ref<Record<string, any>>({})
+
+async function handleEdit(record: RuntimeRecord) {
+  isEditMode.value = true
+  editRuntimeId.value = record.id
+  editServerId.value = currentServerId.value!
+  
+  extraEditParams.value = {
+      appDetailID: record.appDetailID,
+      appID: record.appID,
+      type: record.type,
+      image: record.image,
+      resource: record.resource,
+      source: record.source,
+      port: record.port,
+      version: record.version,
+      environments: record.environments || [],
+      extraHosts: record.extraHosts || [],
+      volumes: record.volumes || [],
+      originalParams: record.params || {}
+  }
+  
+  resetCreateForm()
+  
+  createForm.name = record.name
+  createForm.appKey = record.type
+  createForm.version = record.version
+  createForm.codeDir = record.codeDir || '/'
+  createForm.remark = record.remark || ''
+  createForm.containerName = record.resource
+  
+  if (record.params) {
+      createForm.execScript = record.params.EXEC_SCRIPT || ''
+      if (record.params.CONTAINER_NAME) {
+          createForm.containerName = record.params.CONTAINER_NAME
+      }
+      
+      // Node.js params
+      if (record.type === 'Node.js' || record.type === 'node') {
+          createForm.packageManager = record.params.PACKAGE_MANAGER || 'npm'
+          createForm.registry = record.params.REGISTRY || 'default'
+          const cs = record.params.CUSTOM_SCRIPT
+          createForm.isCustomCommand = String(cs) === '1'
+      }
+  }
+  
+  if (record.exposedPorts) {
+      createForm.exposedPorts = record.exposedPorts.map(p => ({
+          hostIP: p.hostIP || '0.0.0.0',
+          hostPort: String(p.hostPort),
+          containerPort: String(p.containerPort)
+      }))
+  }
+  
+  // Load App list for reference
+  loadAppList().then(() => {
+      // Set current app and version detail?
+      // might need to fetch manually if relying on `currentApp` for submit validaton
+      // But typically update doesn't re-validate app selection if fields are disabled.
+  })
+  
+  createDrawerVisible.value = true
+}
+
+
+
+// 操作运行时（启动/停止/重启）
+async function handleOperate(record: RuntimeRecord, operate: 'start' | 'stop' | 'restart') {
+  if (!currentServerId.value) return
+
+  const operateText = operate === 'start' ? '启动' : operate === 'stop' ? '停止' : '重启'
+
+  try {
+    await operateRuntime({
+      serverId: currentServerId.value,
+      id: record.id,
+      operate
+    })
+    message.success(`${operateText}命令已发送`)
+    // 延迟刷新
+    setTimeout(() => {
+      loadRuntimes()
+    }, 2000)
+  } catch (error: any) {
+    message.error(`${operateText}失败: ` + (error.message || '未知错误'))
+  }
+}
+
+// 删除相关
+const deleteModalVisible = ref(false)
+const deleteLoading = ref(false)
+const deleteRecord = ref<RuntimeRecord | null>(null)
+const deleteWithFolder = ref(false)
+
+function showDeleteConfirm(record: RuntimeRecord) {
+  deleteRecord.value = record
+  deleteWithFolder.value = false
+  deleteModalVisible.value = true
+}
+
+async function handleDeleteConfirm() {
+  if (!currentServerId.value || !deleteRecord.value) return
+
+  deleteLoading.value = true
+  try {
+    await deleteRuntime({
+      serverId: currentServerId.value,
+      id: deleteRecord.value.id,
+      forceDelete: true,
+      deleteFolder: deleteWithFolder.value,
+      codeDir: deleteWithFolder.value ? deleteRecord.value.codeDir : undefined
+    })
+    message.success('删除成功')
+    deleteModalVisible.value = false
+    await loadRuntimes()
+  } catch (error: any) {
+    message.error('删除失败: ' + (error.message || '未知错误'))
+  } finally {
+    deleteLoading.value = false
+  }
+}
+
+// 保留旧函数用于兼容
+async function handleDelete(record: RuntimeRecord) {
+  showDeleteConfirm(record)
+}
+
+// 获取状态颜色
+const fileUploaderRef = ref()
+const uploadServerId = ref<number>(0)
+const uploadPath = ref('')
+
+function handleUploadFile(record: RuntimeRecord) {
+  if (!currentServerId.value) return
+  uploadServerId.value = currentServerId.value
+  uploadPath.value = record.codeDir
+  fileUploaderRef.value?.open()
+}
+
+function getStatusColor(status: string): string {
+  switch (status) {
+    case 'Running':
+      return 'green'
+    case 'Stopped':
+      return 'red'
+    case 'Starting':
+    case 'Stopping':
+    case 'Restarting':
+      return 'orange'
+    case 'Error':
+      return 'error'
+    default:
+      return 'default'
+  }
+}
+
+// 获取状态文本
+function getStatusText(status: string): string {
+  switch (status) {
+    case 'Running':
+      return '运行中'
+    case 'Stopped':
+      return '已停止'
+    case 'Starting':
+      return '启动中'
+    case 'Stopping':
+      return '停止中'
+    case 'Restarting':
+      return '重启中'
+    case 'Error':
+      return '错误'
+    default:
+      return status || '未知'
+  }
+}
+
+// 格式化时间
+function formatTime(time: string): string {
+  if (!time) return '-'
+  return time.replace('T', ' ').replace(/\.\d+\+.*$/, '')
+}
+
+// 初始化
+onMounted(() => {
+  loadServers()
+})
+</script>
+
+<style scoped>
+.runtime-container {
+  padding: 20px;
+  background: #fff;
+  min-height: calc(100vh - 120px);
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.server-select {
+  display: flex;
+  align-items: center;
+}
+
+.server-select .label {
+  margin-right: 8px;
+  color: #666;
+}
+
+.runtime-tabs :deep(.ant-radio-button-wrapper) {
+  min-width: 80px;
+  text-align: center;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.right-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.code-dir {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.port-item {
+  margin-bottom: 4px;
+}
+
+.port-item:last-child {
+  margin-bottom: 0;
+}
+
+:deep(.ant-table-wrapper) .ant-table-pagination {
+  margin: 16px 0 0;
+}
+
+:deep(.ant-btn-link) {
+  padding: 0 4px;
+}
+
+/* 创建抽屉样式 */
+.form-help {
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+
+.port-row,
+.env-row,
+.volume-row,
+.host-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.port-arrow,
+.vol-arrow,
+.host-ip,
+.env-eq {
+  color: #999;
+  font-size: 14px;
+}
+</style>
+
diff --git a/src/views/platform/servers/index.vue b/src/views/platform/servers/index.vue
index 641b9ba..4731349 100644
--- a/src/views/platform/servers/index.vue
+++ b/src/views/platform/servers/index.vue
@@ -8,17 +8,16 @@
         <a-form layout="inline">
           <a-form-item label="状态">
             <a-select v-model:value="filterStatus" placeholder="全部" style="width: 120px" allow-clear>
-              <a-select-option value="online">在线</a-select-option>
-              <a-select-option value="offline">离线</a-select-option>
-              <a-select-option value="warning">告警</a-select-option>
-              <a-select-option value="maintenance">维护中</a-select-option>
+              <a-select-option v-for="item in serverStatusDict" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item label="类型">
             <a-select v-model:value="filterType" placeholder="全部" style="width: 120px" allow-clear>
-              <a-select-option value="cloud">云服务器</a-select-option>
-              <a-select-option value="physical">物理机</a-select-option>
-              <a-select-option value="virtual">虚拟机</a-select-option>
+              <a-select-option v-for="item in serverTypeDict" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item label="关键字">
@@ -195,9 +194,9 @@
 
         <a-form-item label="服务器类型" name="type">
           <a-select v-model:value="formData.type" placeholder="请选择">
-            <a-select-option value="cloud">云服务器</a-select-option>
-            <a-select-option value="physical">物理机</a-select-option>
-            <a-select-option value="virtual">虚拟机</a-select-option>
+            <a-select-option v-for="item in serverTypeDict" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
           </a-select>
         </a-form-item>
 
@@ -225,10 +224,9 @@
 
         <a-form-item label="标签" name="tags">
           <a-select v-model:value="formData.tags" mode="tags" placeholder="输入标签后回车">
-            <a-select-option value="生产">生产</a-select-option>
-            <a-select-option value="测试">测试</a-select-option>
-            <a-select-option value="开发">开发</a-select-option>
-            <a-select-option value="备份">备份</a-select-option>
+            <a-select-option v-for="item in serverTagDict" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
           </a-select>
         </a-form-item>
 
@@ -347,21 +345,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
-import {
-  PlusOutlined,
-  SearchOutlined,
-  EyeOutlined,
-  LinkOutlined,
-  CloudServerOutlined,
-  DesktopOutlined,
-  ClusterOutlined,
-  ReloadOutlined,
-  FileTextOutlined,
-  GlobalOutlined
-} from '@ant-design/icons-vue'
 import {
   getServerList,
   getServerStatus,
@@ -369,11 +353,10 @@ import {
   updateServer,
   deleteServer,
   refreshServerStatus,
-  type ServerBase,
-  type ServerInfo,
-  type ServerStatus,
-  type ServerType
 } from '@/api/server'
+import type { MonitorData, ServerStatus, ServerType, ServerInfo } from '@/types/platform/servers'
+
+import { getDictItemsByCode } from '@/api/system/dict'
 
 const router = useRouter()
 
@@ -387,8 +370,13 @@ const filterStatus = ref<ServerStatus | undefined>()
 const filterType = ref<ServerType | undefined>()
 const filterKeyword = ref('')
 
+// Dictionaries
+const serverStatusDict = ref<any[]>([])
+const serverTypeDict = ref<any[]>([])
+const serverTagDict = ref<any[]>([])
+
 // 服务器列表，包含基础信息和实时状态
-interface ServerDisplayInfo extends Partial<ServerInfo> {
+interface ServerDisplayInfo extends Omit<Partial<ServerInfo>, 'cpu' | 'memory' | 'disk'> {
   id: number
   name: string
   ip: string
@@ -410,6 +398,7 @@ interface ServerDisplayInfo extends Partial<ServerInfo> {
   disk: { total: number; used: number; usage: number }
   // 状态加载标记
   statusLoading?: boolean
+  monitor?: MonitorData
 }
 
 const servers = ref<ServerDisplayInfo[]>([])
@@ -458,9 +447,25 @@ const stats = computed(() => {
 })
 
 onMounted(() => {
+  loadDictionaries()
   loadServers()
 })
 
+async function loadDictionaries() {
+  try {
+    const [statusRes, typeRes, tagRes] = await Promise.all([
+      getDictItemsByCode('server_status'),
+      getDictItemsByCode('server_type'),
+      getDictItemsByCode('server_tag')
+    ])
+    serverStatusDict.value = statusRes.data.data || []
+    serverTypeDict.value = typeRes.data.data || []
+    serverTagDict.value = tagRes.data.data || []
+  } catch (error) {
+    console.error('加载字典失败:', error)
+  }
+}
+
 /**
  * 加载服务器列表
  */
@@ -690,33 +695,27 @@ function goToDomains(record: ServerDisplayInfo) {
   router.push({ path: '/platform/domains', query: { serverId: String(record.id) } })
 }
 
+// 字典辅助函数
+function getDictColor(dict: any[], value: string, defaultColor: string = 'default'): string {
+  const item = dict.find(item => item.value === value)
+  return item?.remark || defaultColor
+}
+
+function getDictLabel(dict: any[], value: string, defaultText: string = '-'): string {
+  const item = dict.find(item => item.value === value)
+  return item?.label || defaultText
+}
+
 function getStatusColor(status: ServerStatus): string {
-  const colors: Record<ServerStatus, string> = {
-    online: 'green',
-    offline: 'default',
-    warning: 'orange',
-    maintenance: 'blue'
-  }
-  return colors[status]
+  return getDictColor(serverStatusDict.value, status)
 }
 
 function getStatusText(status: ServerStatus): string {
-  const texts: Record<ServerStatus, string> = {
-    online: '在线',
-    offline: '离线',
-    warning: '告警',
-    maintenance: '维护中'
-  }
-  return texts[status]
+  return getDictLabel(serverStatusDict.value, status)
 }
 
 function getTypeText(type: ServerType): string {
-  const texts: Record<ServerType, string> = {
-    cloud: '云服务器',
-    physical: '物理机',
-    virtual: '虚拟机'
-  }
-  return texts[type]
+  return getDictLabel(serverTypeDict.value, type)
 }
 
 function getUsageColor(usage: number): string {
@@ -726,16 +725,7 @@ function getUsageColor(usage: number): string {
 }
 
 function getTagColor(tag: string): string {
-  const colors: Record<string, string> = {
-    '生产': 'red',
-    '测试': 'blue',
-    '开发': 'green',
-    '备份': 'purple',
-    '主节点': 'gold',
-    '从节点': 'cyan',
-    '离线': 'default'
-  }
-  return colors[tag] || 'default'
+  return getDictColor(serverTagDict.value, tag)
 }
 </script>
 
diff --git a/src/views/platform/upload/index.vue b/src/views/platform/upload/index.vue
index e223472..0bde906 100644
--- a/src/views/platform/upload/index.vue
+++ b/src/views/platform/upload/index.vue
@@ -105,18 +105,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
 import { message, Modal } from 'ant-design-vue'
-import {
-  ArrowLeftOutlined,
-  CloseOutlined,
-  UploadOutlined,
-  FolderOpenOutlined,
-  CloudUploadOutlined,
-  FileOutlined,
-  CheckOutlined
-} from '@ant-design/icons-vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -128,17 +117,7 @@ const folderInputRef = ref<HTMLInputElement | null>(null)
 // 拖拽状态
 const isDragover = ref(false)
 
-// 文件列表
-interface UploadFile {
-  uid: string
-  name: string
-  path: string  // 相对路径
-  size: number
-  type: string
-  status: 'pending' | 'uploading' | 'done' | 'error'
-  percent: number
-  file: File
-}
+import type { UploadFile } from '@/types/platform/upload-file'
 
 const fileList = ref<UploadFile[]>([])
 
diff --git a/src/views/system/approval/index.vue b/src/views/system/approval/index.vue
index ea88ab9..525e0a2 100644
--- a/src/views/system/approval/index.vue
+++ b/src/views/system/approval/index.vue
@@ -203,21 +203,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import type { FormInstance } from 'ant-design-vue'
-import {
-  PlusOutlined,
-  ApartmentOutlined,
-  CheckCircleOutlined,
-  FileTextOutlined,
-  ClockCircleOutlined,
-  LikeOutlined,
-  DislikeOutlined,
-  RightOutlined,
-  EditOutlined,
-  DeleteOutlined
-} from '@ant-design/icons-vue'
 import type { ApprovalTemplate, ApprovalScenario, ApprovalNode } from '@/types'
 import { ApprovalScenarioMap } from '@/types'
 import {
diff --git a/src/views/system/approval/instances.vue b/src/views/system/approval/instances.vue
index f407c0e..1e0385e 100644
--- a/src/views/system/approval/instances.vue
+++ b/src/views/system/approval/instances.vue
@@ -191,16 +191,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import type { Dayjs } from 'dayjs'
-import {
-  SearchOutlined,
-  ReloadOutlined,
-  EyeOutlined,
-  ClockCircleOutlined,
-  MessageOutlined
-} from '@ant-design/icons-vue'
 import type { ApprovalInstance, ApprovalScenario, ApprovalInstanceStatus } from '@/types'
 import { ApprovalScenarioMap, ApprovalInstanceStatusMap, ApprovalInstanceStatusBadgeMap } from '@/types'
 import { getApprovalInstancePage } from '@/api/system/approval'
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 07a466c..99698e4 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -123,16 +123,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import type { FormInstance } from 'ant-design-vue'
-import {
-  PlusOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  ApartmentOutlined
-} from '@ant-design/icons-vue'
-import { getDeptTree, createDept, updateDept, deleteDept, type DeptRecord, type DeptFormData } from '@/api/system/dept'
+import { getDeptTree, createDept, updateDept, deleteDept } from '@/api/system/dept'
+import type { DeptRecord, DeptFormData } from '@/types/system/dept'
 
 const loading = ref(false)
 const submitting = ref(false)
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 9857b04..6abab81 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -79,22 +79,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { PlusOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
 import DictFormModal from '@/components/system/dict/DictFormModal.vue'
 import DictItemDrawer from '@/components/system/dict/DictItemDrawer.vue'
 import { getDictPage, deleteDict } from '@/api/system/dict'
-
-// 类型定义
-interface DictRecord {
-  id: number
-  name: string
-  code: string
-  remark?: string
-  status: number
-  createdAt?: string
-}
+import type { DictRecord } from '@/types/system/dict'
 
 // 搜索表单
 const searchForm = reactive({
diff --git a/src/views/system/menus/index.vue b/src/views/system/menus/index.vue
index 23e3730..8e23bcd 100644
--- a/src/views/system/menus/index.vue
+++ b/src/views/system/menus/index.vue
@@ -72,9 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { PlusOutlined } from '@ant-design/icons-vue'
 import type { MenuRecord, MenuFormData } from '@/types/system/menu'
 import { getMenuList, deleteMenu } from '@/api/system/menu'
 import { getAllProjects, type ProjectInfo } from '@/api/project'
diff --git a/src/views/system/roles/index.vue b/src/views/system/roles/index.vue
index af8d04f..815e565 100644
--- a/src/views/system/roles/index.vue
+++ b/src/views/system/roles/index.vue
@@ -75,9 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { PlusOutlined } from '@ant-design/icons-vue'
 
 import { buildMenuTree } from '@/utils/route'
 
diff --git a/src/views/system/users/index.vue b/src/views/system/users/index.vue
index aad5cf1..2e4fe74 100644
--- a/src/views/system/users/index.vue
+++ b/src/views/system/users/index.vue
@@ -106,14 +106,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import {
-  SearchOutlined,
-  ReloadOutlined,
-  PlusOutlined,
-  UserOutlined
-} from '@ant-design/icons-vue'
 
 import { getUserList, deleteUser, updateUserStatus } from '@/api/system/user'
 import { getRoleList } from '@/api/system/role'
diff --git a/tsconfig.app.json b/tsconfig.app.json
index adf7605..458f924 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -17,5 +17,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/auto-imports.d.ts", "src/components.d.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 5844f53..692ce21 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,7 +35,8 @@ export default defineConfig({
       resolvers: [
         // Ant Design Vue组件自动导入
         AntDesignVueResolver({
-          importStyle: false
+          importStyle: false,
+          resolveIcons: true
         }),
         // Ant Design Vue图标自动导入
         IconsResolver({