update search component, multiple language

Author: skyler-yang

Dockerfile

@@ -2,7 +2,7 @@ FROM alpine:latest
 
 LABEL maintainer="skyler.w.yang"
 
-RUN mkdir -p /workspace/config
+RUN mkdir -p /workspace/config && mkdir -p /workspace/data
 
 COPY ./backend/config/*.yaml /workspace/config
 
@@ -12,6 +12,4 @@ COPY ./backend/humpback /workspace/
 
 WORKDIR /workspace
 
-RUN mkdir data
-
 CMD ["./humpback"]

backend/common/locales/zh_cn.go

@@ -113,8 +113,8 @@ var zhCnMsg = map[string]string{
 	CodeServicePlacementLabelNotEmpty:            "约束标签不能为空。",
 	CodeServicePlacementValueNotEmpty:            "约束值不能为空。",
 	CodeServiceScheduleCronNotEmpty:              "调度计划cron不能为空。",
-	CodeServiceScheduleCronInvalid:               "执行计划cron无效。",
-	CodeServiceScheduleTimeoutInvalid:            "执行计划超时控制时间无效。",
+	CodeServiceScheduleCronInvalid:               "定时任务cron无效。",
+	CodeServiceScheduleTimeoutInvalid:            "定时任务超时控制时间无效。",
 	CodeServiceProtocolInvalid:                   "协议无效，仅支持TCP、UDP。",
 	CodeServiceOperateInvalid:                    "无效的操作。",
 	CodeServiceIsNotEnable:                       "服务未启用。",

front/projects/web/src/components/business/v-search/VSearch.vue

@@ -1,68 +1,60 @@
 <script lang="ts" setup>
-const props = defineProps<{ keywords?: string; showAddBtn?: boolean; keywordsPlaceholder?: string }>()
+const props = defineProps<{ addLabel?: string; inputLabel?: string; placeholder?: string }>()
 const emits = defineEmits<{
-  (e: "update:keywords", keywords: string): void
   (e: "search"): void
   (e: "add"): void
 }>()
 
 const { t } = useI18n()
 const slots = useSlots()
 
-function handleKeywordsChange(v: string) {
-  emits("update:keywords", v)
-}
-
-function search() {
-  emits("search")
-}
-
-function add() {
-  emits("add")
-}
+const keywords = defineModel<string>()
 </script>
 
 <template>
-  <el-form @submit.prevent="search">
-    <el-form-item class="search">
+  <el-form @submit.prevent="emits('search')">
+    <el-form-item>
       <div class="d-flex w-100 flex-wrap gap-3">
         <slot v-if="!!slots.prefix" name="prefix" />
+
         <slot v-if="!!slots.input" name="input" />
-        <v-input v-else :model-value="props.keywords" :placeholder="props.keywordsPlaceholder" class="search-input" @update:model-value="handleKeywordsChange">
-          <template #prepend>
-            <slot v-if="!!slots.keywordsPrepend" name="keywordsPrepend"></slot>
-            <span v-else style="color: var(--el-text-color-regular)">
-              {{ t("label.keywords") }}
-            </span>
-          </template>
-        </v-input>
-        <el-button native-type="submit" type="primary">
-          <el-icon :size="16">
-            <IconMdiSearch />
-          </el-icon>
-          {{ t("btn.search") }}
-        </el-button>
-        <slot v-if="!!slots.append" name="append" />
-        <el-button v-if="props.showAddBtn" type="primary" @click="add()">
-          <el-icon :size="18">
-            <IconMdiAdd />
-          </el-icon>
-          {{ t("btn.add") }}
-        </el-button>
+        <div v-else class="search-input">
+          <v-input v-model="keywords" :placeholder="props.placeholder">
+            <template #prepend>
+              <slot v-if="!!slots.inputPrepend" name="inputPrepend"></slot>
+              <span v-else style="color: var(--el-text-color-regular)">
+                {{ props.inputLabel || t("label.keywords") }}
+              </span>
+            </template>
+          </v-input>
+        </div>
+
+        <div>
+          <el-button native-type="submit" type="primary">
+            <template #icon>
+              <el-icon :size="20">
+                <IconMdiSearch />
+              </el-icon>
+            </template>
+            {{ t("btn.search") }}
+          </el-button>
+          <el-button v-if="props.addLabel" plain type="primary" @click="emits('add')">
+            <template #icon>
+              <el-icon :size="20">
+                <IconMdiAdd />
+              </el-icon>
+            </template>
+            {{ props.addLabel }}
+          </el-button>
+        </div>
       </div>
     </el-form-item>
   </el-form>
 </template>
 
 <style lang="scss" scoped>
-.search {
-  .search-input {
-    flex: 1;
-    min-width: 200px;
-  }
-
-  .el-button {
-    margin: 0;
-  }
+.search-input {
+  flex: 1;
+  min-width: 300px;
 }
 </style>

front/projects/web/src/components/common/v-monaco/VMonacoEdit.vue

@@ -3,7 +3,6 @@ import screenfull from "screenfull"
 import * as monaco from "monaco-editor"
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
 import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
-import CssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
 import HtmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
 import TSWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
 import YamlWorker from "./yaml.worker.js?worker"
@@ -38,10 +37,6 @@ self.MonacoEnvironment = {
     switch (label) {
       case "json":
         return new JsonWorker()
-      case "css":
-      case "scss":
-      case "less":
-        return new CssWorker()
       case "html":
       case "handlebars":
       case "razor":

front/projects/web/src/components/common/v-table/VTable.vue

@@ -94,6 +94,7 @@ defineExpose({ clearSelection, toggleRowExpansion })
     <el-table
       ref="tableRef"
       class-name="v-table"
+      style="min-height: 396px"
       v-bind="tableAttrs"
       @select="selectionChangeEvent"
       @sort-change="sortChangeEvent"
@@ -106,7 +107,7 @@ defineExpose({ clearSelection, toggleRowExpansion })
       </template>
       <template #empty>
         <slot v-if="!!slots.empty" name="empty" />
-        <el-empty v-else :image-size="200" />
+        <el-empty v-else :image-size="180" />
       </template>
     </el-table>
     <div v-if="props.pageInfo" class="mt-5 pagination">

front/projects/web/src/locales/zh-CN/btn.ts

@@ -48,7 +48,7 @@ export default {
     "addEnvironment": "添加环境变量",
     "addOption": "添加选项",
     "addPlacementConstraint": "添加约束",
-    "addSchedule": "添加执行计划",
+    "addSchedule": "添加定时任务",
     "viewMonitor": "查看性能指标"
   }
 }

front/projects/web/src/locales/zh-CN/header.ts

@@ -32,7 +32,7 @@ export default {
     "addService": "添加服务",
     "deleteService": "删除服务",
     "cloneService": "克隆服务",
-    "addSchedule": "添加执行计划",
-    "editSchedule": "编辑执行计划"
+    "addSchedule": "添加定时任务",
+    "editSchedule": "编辑定时任务"
   }
 }

front/projects/web/src/locales/zh-CN/label.ts

@@ -64,7 +64,7 @@ export default {
     "serviceName": "服务名称",
     "running": "正在运行",
     "failed": "失败",
-    "schedule": "执行计划",
+    "schedule": "定时任务",
     "yes": "是",
     "no": "否",
     "setting": "设置",
@@ -113,13 +113,13 @@ export default {
     "dockerDocumentation": "Docker文档",
     "dispatchMode": "调度模式",
     "global": "全局模式",
-    "replicated": "复制模式",
+    "replicated": "副本模式",
     "instanceNum": "实例数",
     "placementConstraints": "约束",
     "schedulesInfo": "执行计划信息",
     "enableTimeout": "启用超时控制",
-    "setSchedules": "设置执行计划",
-    "cron": "cron",
+    "setSchedules": "设置定时任务",
+    "cron": "Cron",
     "text": "文本",
     "form": "表单",
     "incomplete": "待完善",

front/projects/web/src/locales/zh-CN/tips.ts

@@ -20,7 +20,7 @@ export default {
     "logDriverTips": "日志驱动程序设置将覆盖docker守护程序日志驱动程序。若未设置，将使用默认驱动程序，请前往{document}获取驱动程序说明。",
     "globalTips": "在全局模式下，将向符合条件的机器上的每个节点分配一个实例。",
     "replicatedTips":
-      "在复制模式下，机器下线后，服务会迁移到其他可用节点，实例数代表当前服务中部署的实例总数，实例数将根据资源（cpu/内存）情况调度到符合条件的机器上。",
+      "在副本模式下，机器下线后，服务会迁移到其他可用节点，实例数代表当前服务中部署的实例总数，实例数将根据资源（cpu/内存）情况调度到符合条件的机器上。",
     "invalidCorn": "无效Corn",
     "scheduleTips": "采用Linux Crontab表达式。",
     "cloneServiceTips": "选择不同的分组将清除约束规则。",

front/projects/web/src/styles/font.scss

@@ -8,14 +8,13 @@
 }
 
 /* 引入 Roboto Medium */
-@font-face {
-  font-family: 'Roboto';
-  src: url('../assets/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
+//@font-face {
+//  font-family: 'Roboto';
+//  src: url('../assets/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+//  font-weight: 500;
+//  font-style: normal;
+//  font-display: swap;
+//}
 /* 引入 Roboto SemiBold */
 @font-face {
   font-family: 'Roboto';
@@ -44,14 +43,13 @@
 }
 
 /* 引入 Roboto Medium  Italic*/
-@font-face {
-  font-family: 'Roboto';
-  src: url('../assets/fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-
+//@font-face {
+//  font-family: 'Roboto';
+//  src: url('../assets/fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
+//  font-weight: 500;
+//  font-style: italic;
+//  font-display: swap;
+//}
 /* 引入 Roboto SemiBoldItalic */
 @font-face {
   font-family: 'Roboto';
@@ -80,14 +78,13 @@
 }
 
 /* 引入 Noto-Sans-SC Medium */
-@font-face {
-  font-family: 'Noto Sans SC';
-  src: url('../assets/fonts/Noto-Sans-SC/NotoSansSC-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
+//@font-face {
+//  font-family: 'Noto Sans SC';
+//  src: url('../assets/fonts/Noto-Sans-SC/NotoSansSC-Medium.ttf') format('truetype');
+//  font-weight: 500;
+//  font-style: normal;
+//  font-display: swap;
+//}
 /* 引入 Noto-Sans-SC SemiBold */
 @font-face {
   font-family: 'Noto Sans SC';