优化已安装应用界面

apps/jingrow/frontend/src/locales/zh-CN.json

@@ -714,6 +714,38 @@
   "Images": "图片",
   "Tags": "标签",
   "Copy icon name": "复制图标名称",
+
+  "Create App Template": "创建应用模板",
+  "Create a modern, efficient template app": "创建一个现代化、高效的应用模板",
+  "App Template": "应用模板",
+  "Enter app name (spaces auto-converted to underscores)": "输入应用名称（空格自动转换为下划线）",
+  "App title (auto-generated from app name)": "应用标题（从应用名称自动生成）",
+  "Publisher": "发布者",
+  "Enter publisher name": "输入发布者名称",
+  "Enter app description": "输入应用描述",
+  "Enter support email": "输入支持邮箱",
+  "Select license": "选择许可证",
+  "App Template Created Successfully": "应用模板创建成功",
+  "App Path": "应用路径",
+  "Next Steps": "下一步操作",
+  "Navigate to the app directory": "导航到应用目录",
+  "Install dependencies": "安装依赖",
+  "Test locally": "本地测试",
+  "Deploy to Jingrow Cloud": "部署到Jingrow云端",
+  "Open in Explorer": "在文件管理器中打开",
+  "Copy Path": "复制路径",
+  "App name is required": "应用名称是必填项",
+  "App name must start with lowercase letter and contain only lowercase letters, numbers, and underscores": "应用名称必须以小写字母开头，只能包含小写字母、数字和下划线",
+  "App title is required": "应用标题是必填项",
+  "Publisher is required": "发布者是必填项",
+  "Description is required": "描述是必填项",
+  "Email is required": "邮箱是必填项",
+  "Please enter a valid email": "请输入有效的邮箱地址",
+  "App template created successfully": "应用模板创建成功",
+  "Failed to create app template": "创建应用模板失败",
+  "Please navigate to the path manually": "请手动导航到该路径",
+  "Path copied to clipboard": "路径已复制到剪贴板",
+  "Failed to copy to clipboard": "复制到剪贴板失败",
   "Icon name copied to clipboard": "图标名称已复制到剪贴板",
   "Failed to copy icon name": "复制图标名称失败",
   

apps/jingrow/frontend/src/views/dev/AppInstaller.vue

@@ -326,9 +326,10 @@ onMounted(() => {
 
 <style scoped>
 .app-installer-page {
-  padding: 24px;
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: 16px 24px;
+  width: 100%;
+  margin: 0;
+  min-height: 100vh;
 }
 
 .page-header {
@@ -406,4 +407,29 @@ onMounted(() => {
 .local-apps-card {
   border: 1px solid #e5e7eb;
 }
+
+/* 响应式布局 */
+@media (max-width: 1200px) {
+  .app-installer-page {
+    padding: 12px 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-installer-page {
+    padding: 8px 12px;
+  }
+  
+  .page-header {
+    margin-bottom: 16px;
+  }
+  
+  .upload-section {
+    margin-bottom: 16px;
+  }
+  
+  .local-apps-section {
+    margin-top: 16px;
+  }
+}
 </style>

apps/jingrow/frontend/src/views/dev/CreateAppTemplate.vue

@@ -16,10 +16,10 @@
           :model="form"
           :rules="rules"
           label-placement="left"
-          label-width="120px"
+          label-width="140px"
           size="large"
         >
-          <n-grid :cols="2" :x-gap="24">
+          <n-grid :cols="3" :x-gap="24" responsive="screen">
             <n-form-item-grid-item>
               <n-form-item :label="t('App Name')" path="appName">
                 <n-input
@@ -284,9 +284,10 @@ const copyToClipboard = async () => {
 
 <style scoped>
 .create-app-template {
-  padding: 24px;
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: 16px 24px;
+  width: 100%;
+  margin: 0;
+  min-height: 100vh;
 }
 
 .page-header {
@@ -313,6 +314,7 @@ const copyToClipboard = async () => {
 
 .content {
   margin-top: 24px;
+  width: 100%;
 }
 
 .form-actions {
@@ -360,4 +362,25 @@ const copyToClipboard = async () => {
 .list-inside {
   list-style-position: inside;
 }
+
+/* 响应式布局 */
+@media (max-width: 1200px) {
+  .create-app-template {
+    padding: 12px 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .create-app-template {
+    padding: 8px 12px;
+  }
+  
+  .page-header {
+    margin-bottom: 16px;
+  }
+  
+  .content {
+    margin-top: 16px;
+  }
+}
 </style>

apps/jingrow/frontend/src/views/dev/InstalledApps.vue

@@ -231,9 +231,10 @@ onMounted(() => {
 
 <style scoped>
 .installed-apps-page {
-  padding: 24px;
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: 16px 24px;
+  width: 100%;
+  margin: 0;
+  min-height: 100vh;
 }
 
 .page-header {
@@ -280,4 +281,25 @@ onMounted(() => {
 .app-detail {
   padding: 16px 0;
 }
+
+/* 响应式布局 */
+@media (max-width: 1200px) {
+  .installed-apps-page {
+    padding: 12px 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .installed-apps-page {
+    padding: 8px 12px;
+  }
+  
+  .page-header {
+    margin-bottom: 16px;
+  }
+  
+  .apps-section {
+    margin-top: 16px;
+  }
+}
 </style>