Optimization: Mobile UI details

Author: yumao233

src/app/views/FileManager/index.vue

@@ -30,7 +30,7 @@
               </div>
             </el-col>
             <el-col :md="6">
-              <div class="flex flex-space-center flex-align-items-center">
+              <div class="flex flex-space-center flex-align-items-center row-mb">
                 <el-input
                   v-model="searchFileName"
                   :placeholder="$t('fileManager.searchFile')"
@@ -223,7 +223,7 @@
             :label="$t('fileManager.lastEdit')"
             width="160"
           ></el-table-column>
-          <el-table-column :label="$t('general.operate')" style="text-align: center">
+          <el-table-column :label="$t('general.operate')" style="text-align: center" width="280">
             <template #default="scope">
               <el-button size="mini" v-if="!isWindows" @click="toEditFilePermission(scope.row)">{{
                 $t("general.permission")
@@ -412,7 +412,7 @@ export default defineComponent({
       return arr;
     },
     isWindows() {
-      return this.statusInfo?.platform === "win32";
+      return this.statusInfo?.platform == "win32";
     }
   },
   async mounted() {

src/app/views/Services.vue

@@ -38,12 +38,15 @@
         <Panel :tipType="1">
           <template #title>
             <span>{{ node.remarks || `${node.ip}:${node.port}` }}</span>
+            <span style="margin-left: 8px">
+              <i style="cursor: pointer" class="el-icon-edit" @click="updateRemarks(node)"></i>
+            </span>
           </template>
           <template #default>
             <div class="daemonInfoArea">
               <div class="daemonValueArea">
                 <el-row :gutter="20">
-                  <el-col :span="6" :offset="0">
+                  <el-col :md="12" :xs="12" :lg="6" :offset="0">
                     <p>
                       {{ $t("services.platform") }}
                     </p>
@@ -55,29 +58,29 @@
                       }}
                     </div>
                   </el-col>
-                  <el-col :span="6" :offset="0">
+                  <el-col :md="12" :xs="12" :lg="6" :offset="0">
                     <p>
                       {{ $t("overview.mem") }}
                     </p>
                     <div>
                       {{ node?.system?.memText || "--" }}
                     </div>
                   </el-col>
-                  <el-col :span="6" :offset="0">
+                  <el-col :md="12" :xs="12" :lg="6" :offset="0">
                     <p>CPU</p>
                     <div v-if="node.system">
                       {{ Number(node.system.cpuUsage * 100).toFixed(1) }}%
                     </div>
                     <div v-else>--</div>
                   </el-col>
-                  <el-col :span="6" :offset="0">
+                  <el-col :md="12" :xs="12" :lg="6" :offset="0">
                     <p>{{ $t("services.instanceStatus") }}</p>
                     <div v-if="node.instance">
                       {{ node.instance.running }}/{{ node.instance.total }}
                     </div>
                     <div v-else>--</div>
                   </el-col>
-                  <el-col :span="6" :offset="0">
+                  <el-col :md="12" :xs="12" :lg="6" :offset="0">
                     <p>{{ $t("overview.connectStatus") }}</p>
                     <div>
                       <span class="color-green" v-if="node.available">
@@ -97,7 +100,7 @@
                       </span>
                     </div>
                   </el-col>
-                  <el-col :span="6" :offset="0">
+                  <el-col :md="12" :xs="12" :lg="6" :offset="0">
                     <p>{{ $t("services.version") }}</p>
                     <div v-if="node.instance">
                       <span
@@ -118,7 +121,7 @@
                     </div>
                     <div v-else>--</div>
                   </el-col>
-                  <el-col :span="6" :offset="0">
+                  <el-col :md="12" :xs="12" :lg="6" :offset="0">
                     <p>Daemon ID</p>
                     <div>
                       <el-tooltip
@@ -178,7 +181,7 @@
                   </div>
                 </el-col>
                 <el-col :md="12" :xl="12" :offset="0">
-                  <div class="daemon-operations" style="text-align: right">
+                  <div class="daemon-operations">
                     <template v-if="node.available">
                       <el-link type="primary" size="mini" @click="toDaemonTerminalPage(node.uuid)">
                         <span class="color-black">{{ $t("services.toTerminal") }}</span>
@@ -638,11 +641,24 @@ export default {
   overflow: hidden;
 }
 .daemon-operations {
+  text-align: right;
   .el-link,
   > span {
     font-size: 12px;
     line-height: 28px;
-    margin-left: 4px;
+    margin-left: 6px;
+  }
+}
+
+@media (max-width: 900px) {
+  .daemon-operations {
+    margin-top: 12px;
+    text-align: left;
+    .el-link,
+    > span {
+      margin-left: 0px !important;
+      margin-right: 8px;
+    }
   }
 }
 </style>

src/language/en_us.json

@@ -45,12 +45,12 @@
     "043": "Row",
     "044": "install error",
     "045": "third-party service",
-    "046": "read",
-    "047": "to write",
-    "048": "executable",
-    "049": "owner",
-    "050": "user group",
-    "051": "anyone",
+    "046": "Read",
+    "047": "Write",
+    "048": "Executable",
+    "049": "Owner",
+    "050": "User Group",
+    "051": "Anyone",
     "052": "Files",
     "053": "Terminal",
     "054": "Console"
@@ -1153,7 +1153,7 @@
       "009": "You haven't saved the file yet, do you want to go back?"
     },
     "FileManager_PermissionDialog": {
-      "001": "File/folder permissions",
+      "001": "File permissions",
       "002": "apply to subdirectory"
     },
     "GlobalFileManager_index": {