Merge pull request #31 from unitwk/abandon

Optimize: BetweenMenus.vue

frontend/components.d.ts

@@ -26,6 +26,7 @@ declare module 'vue' {
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
     AList: typeof import('ant-design-vue/es')['List']
     AListItem: typeof import('ant-design-vue/es')['ListItem']
     AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']

frontend/src/components/BetweenMenus.vue

@@ -1,34 +1,38 @@
-<script setup lang="ts">
-import { useScreen } from "../hooks/useScreen";
-
-const screen = useScreen();
-</script>
-
 <template>
   <div style="height: 100%" class="between-menus-container">
-    <a-row :gutter="[0, 24]" style="height: 100%">
-      <a-col :span="12" :lg="8" class="align-center">
-        <slot name="left"></slot>
-      </a-col>
-      <a-col v-if="!screen.isPhone.value" :lg="8">
-        <div class="flex-center">
-          <slot name="center"></slot>
-        </div>
-      </a-col>
-      <a-col
-        :span="12"
-        :lg="8"
-        class="align-center"
-        style="display: flex; justify-content: flex-end"
-      >
-        <slot name="right"></slot>
-      </a-col>
-
-      <a-col v-if="screen.isPhone.value && $slots.center" :span="24">
-        <div class="flex-center">
-          <slot name="center"></slot>
-        </div>
-      </a-col>
-    </a-row>
+    <div class="menus-item-left">
+      <slot name="left"></slot>
+    </div>
+    <div class="menus-item-center">
+      <slot name="center"></slot>
+    </div>
+    <div class="menus-item-right">
+      <slot name="right"></slot>
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.between-menus-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  .menus-item-center {
+    display: flex;
+    justify-content: center;
+    width: 30%;
+  }
+}
+
+@media (max-width: 585px) {
+  .menus-item-left {
+    display: none;
+  }
+  .menus-item-center {
+    width: 100% !important;
+  }
+}
+</style>

frontend/src/services/apis/index.ts

@@ -133,6 +133,7 @@ export const getUserInfo = useDefineApi<
       userName: string;
       page: number;
       page_size: number;
+      role: string;
     };
   },
   { total: number; pageSize: number; page: number; maxPage: number; data: BaseUserInfo[] }

frontend/src/widgets/InstanceList.vue

@@ -278,7 +278,7 @@ onMounted(async () => {
     <a-row :gutter="[24, 24]" style="height: 100%">
       <a-col :span="24">
         <BetweenMenus>
-          <template v-if="!isPhone" #left>
+          <template #left>
             <a-typography-title class="mb-0" :level="4">
               <AppstoreOutlined />
               {{ card.title }}

frontend/src/widgets/NodeList.vue

@@ -4,7 +4,7 @@ import { ref, computed } from "vue";
 import { t } from "@/lang/i18n";
 import { SearchOutlined, ClusterOutlined } from "@ant-design/icons-vue";
 import BetweenMenus from "@/components/BetweenMenus.vue";
-import { useOverviewInfo } from "@/hooks/useOverviewInfo";
+import { useOverviewInfo, type ComputedNodeInfo } from "@/hooks/useOverviewInfo";
 import {
   editNode as editNodeApi,
   addNode as addNodeApi,
@@ -21,9 +21,22 @@ defineProps<{
 const operationForm = ref({
   name: ""
 });
-
+const ALL = "all";
+const currentStatus = ref<boolean | string>(ALL);
 const { state, refresh: refreshOverviewInfo } = useOverviewInfo();
 
+const remotes = computed(() => {
+  const filterByName = (node: ComputedNodeInfo) =>
+    operationForm.value.name !== ""
+      ? node.remarks.toLowerCase().includes(operationForm.value.name.toLowerCase())
+      : true;
+
+  return state.value?.remote.filter(
+    (node) =>
+      (currentStatus.value === ALL || node.available === currentStatus.value) && filterByName(node)
+  );
+});
+
 const addNode = async () => {
   const { execute } = addNodeApi();
   try {
@@ -162,11 +175,28 @@ const editDialog = ref({
           </template>
           <template #center>
             <div class="search-input">
-              <a-input v-model:value="operationForm.name" :placeholder="t('TXT_CODE_461d1a01')">
-                <template #prefix>
-                  <search-outlined />
-                </template>
-              </a-input>
+              <a-input-group compact>
+                <a-select v-model:value="currentStatus" style="width: 100px">
+                  <a-select-option value="all">
+                    {{ t("所有") }}
+                  </a-select-option>
+                  <a-select-option :value="true">
+                    {{ t("在线") }}
+                  </a-select-option>
+                  <a-select-option :value="false">
+                    {{ t("离线") }}
+                  </a-select-option>
+                </a-select>
+                <a-input
+                  v-model:value.trim="operationForm.name"
+                  :placeholder="t('TXT_CODE_461d1a01')"
+                  style="width: 50%"
+                >
+                  <template #suffix>
+                    <search-outlined />
+                  </template>
+                </a-input>
+              </a-input-group>
             </div>
           </template>
         </BetweenMenus>
@@ -179,7 +209,7 @@ const editDialog = ref({
           {{ t("TXT_CODE_a65c65c2") }}
         </a-typography-text>
       </a-col>
-      <a-col v-for="item in state?.remote" :key="item.uuid" :span="24" :lg="12">
+      <a-col v-for="item in remotes" :key="item.uuid" :span="24" :lg="12">
         <NodeItem :item="item"></NodeItem>
       </a-col>
     </a-row>
@@ -265,7 +295,11 @@ const editDialog = ref({
 .search-input {
   transition: all 0.4s;
   text-align: center;
-  width: 50%;
+  width: 80%;
+
+  &:hover {
+    width: 100%;
+  }
 }
 
 @media (max-width: 992px) {
@@ -275,8 +309,4 @@ const editDialog = ref({
     width: 100% !important;
   }
 }
-
-.search-input:hover {
-  width: 100%;
-}
 </style>

frontend/src/widgets/UserList.vue

@@ -96,6 +96,7 @@ const total = ref(0);
 const data = ref<dataType>();
 const dataSource = computed(() => data?.value?.data);
 const selectedUsers = ref<string[]>([]);
+const currentRole = ref("");
 
 const handleToUserResources = (user: BaseUserInfo) => {
   toPage({
@@ -121,7 +122,8 @@ const fetchData = async () => {
     params: {
       userName: operationForm.value.name,
       page: operationForm.value.currentPage,
-      page_size: operationForm.value.pageSize
+      page_size: operationForm.value.pageSize,
+      role: currentRole.value
     }
   });
   data.value = res.value;
@@ -377,16 +379,26 @@ onMounted(async () => {
           </template>
           <template #center>
             <div class="search-input">
-              <a-input
-                v-model:value="operationForm.name"
-                :placeholder="t('TXT_CODE_2471b9c')"
-                @change="reload()"
-                @press-enter="fetchData()"
-              >
-                <template #prefix>
-                  <search-outlined />
-                </template>
-              </a-input>
+              <a-input-group compact>
+                <a-select v-model:value="currentRole" style="width: 100px" @change="reload()">
+                  <a-select-option value="">
+                    {{ t("所有") }}
+                  </a-select-option>
+                  <a-select-option v-for="(p, i) in permissionList" :key="i" :value="i">
+                    {{ p }}
+                  </a-select-option>
+                </a-select>
+                <a-input
+                  v-model:value.trim="operationForm.name"
+                  :placeholder="t('TXT_CODE_2471b9c')"
+                  style="width: 50%"
+                  @change="reload()"
+                >
+                  <template #suffix>
+                    <search-outlined />
+                  </template>
+                </a-input>
+              </a-input-group>
             </div>
           </template>
         </BetweenMenus>
@@ -451,7 +463,7 @@ onMounted(async () => {
 .search-input {
   transition: all 0.4s;
   text-align: center;
-  width: 50%;
+  width: 80%;
 
   &:hover {
     width: 100%;

frontend/src/widgets/instance/FileManager.vue

@@ -162,7 +162,6 @@ onMounted(() => {
           </template>
           <template #right>
             <a-upload
-              v-if="!isPhone"
               :before-upload="beforeUpload"
               :max-count="1"
               :disabled="percentComplete > 0"
@@ -193,19 +192,6 @@ onMounted(() => {
             <a-dropdown>
               <template #overlay>
                 <a-menu>
-                  <a-upload
-                    v-if="isPhone"
-                    :before-upload="beforeUpload"
-                    :max-count="1"
-                    :disabled="percentComplete > 0"
-                    :show-upload-list="false"
-                  >
-                    <a-menu-item key="1" :disabled="percentComplete > 0">
-                      {{ percentComplete > 0 ? t("TXT_CODE_72608c07") : t("TXT_CODE_e00c858c") }}
-                    </a-menu-item>
-                    <template #itemRender=""></template>
-                  </a-upload>
-
                   <a-menu-item key="2" @click="touchFile(true)">
                     {{ t("TXT_CODE_6215388a") }}
                   </a-menu-item>

frontend/src/widgets/instance/ServerConfigOverview.vue

@@ -92,12 +92,12 @@ onMounted(async () => {
             </a-typography-title>
           </template>
           <template #right>
-            <a-button class="mr-8" :loading="isLoading" @click="render">
-              {{ t("TXT_CODE_b76d94e0") }}
-            </a-button>
-            <a-button @click="toConsole">
+            <a-button class="mr-8" @click="toConsole">
               {{ t("TXT_CODE_95b9833f") }}
             </a-button>
+            <a-button :loading="isLoading" @click="render">
+              {{ t("TXT_CODE_b76d94e0") }}
+            </a-button>
           </template>
         </BetweenMenus>
       </a-col>

frontend/src/widgets/node/NodeItem.vue

@@ -12,12 +12,7 @@ import {
 import { useOverviewInfo, type ComputedNodeInfo } from "@/hooks/useOverviewInfo";
 import IconBtn from "@/components/IconBtn.vue";
 import NodeSimpleChart from "@/components/NodeSimpleChart.vue";
-import {
-  editNode as editNodeApi,
-  addNode as addNodeApi,
-  deleteNode as deleteNodeApi,
-  connectNode
-} from "@/services/apis";
+import { editNode as editNodeApi, deleteNode as deleteNodeApi, connectNode } from "@/services/apis";
 import { message } from "ant-design-vue";
 import { useAppRouters } from "@/hooks/useAppRouters";
 import { useLayoutCardTools } from "@/hooks/useCardTools";