fix: 修复左侧菜单收起时无法展开子菜单的bug

packages/ui/certd-client/src/components/expires-time-text.vue

@@ -5,7 +5,7 @@
         {{ label }}
       </template>
       <template v-else>
-        <FsTimeHumanize :model-value="value" :use-format-greater="1000000000000" :options="{ units: ['d'] }"></FsTimeHumanize>
+        <FsTimeHumanize :model-value="value" :use-format-greater="1000000000000000" :options="{ units: ['y', 'd'] }"></FsTimeHumanize>
       </template>
     </component>
   </span>
@@ -35,12 +35,14 @@ const color = computed(() => {
   if (props.value == null) {
     return "";
   }
-  if (props.value === -1) {
+  //距离今天多少天
+  const days = dayjs(props.value).diff(dayjs(), "day");
+  if (props.value === -1 || days > 365) {
     return "green";
   }
 
   //小于3天 红色
-  if (dayjs().add(3, "day").valueOf() > props.value) {
+  if (days <= 6) {
     return "red";
   }
 

packages/ui/certd-client/src/layout/components/menu/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <a-menu v-model:open-keys="openKeys" v-model:selected-keys="selectedKeys" class="fs-menu" mode="inline" theme="light" :items="items" @click="onClick" />
+</template>
+
+<script lang="tsx" setup>
+import { ref, watch, defineOptions } from "vue";
+import { routerUtils } from "/@/utils/util.router";
+import { useRoute } from "vue-router";
+import { utils } from "@fast-crud/fast-crud";
+import * as _ from "lodash-es";
+
+defineOptions({
+  name: "FsMenu"
+});
+
+const props = defineProps<{
+  menus: any[];
+  expandSelected: boolean;
+}>();
+
+const items = ref([]);
+
+function buildItemMenus(menus: any) {
+  if (menus == null) {
+    return;
+  }
+  const list: any = [];
+  for (const sub of menus) {
+    const item: any = {
+      key: sub.path,
+      label: sub.title,
+      title: sub.title,
+      icon: () => {
+        return <fsIcon icon={sub.icon ?? sub.meta?.icon} />;
+      }
+    };
+    list.push(item);
+    if (sub.children && sub.children.length > 0) {
+      item.children = buildItemMenus(sub.children);
+    }
+  }
+  return list;
+}
+
+watch(
+  () => props.menus,
+  (menus) => {
+    items.value = buildItemMenus(menus);
+  },
+  { immediate: true }
+);
+
+async function onClick(item: any) {
+  await routerUtils.open(item.key);
+}
+const route = useRoute();
+const selectedKeys = ref([]);
+const openKeys = ref([]);
+
+function openSelectedParents(fullPath: any) {
+  if (!props.expandSelected) {
+    return;
+  }
+  if (props.menus == null) {
+    return;
+  }
+  const keys: any = [];
+  let changed = false;
+  utils.deepdash.forEachDeep(props.menus, (value: any, key: any, parent: any, context: any) => {
+    if (value == null) {
+      return;
+    }
+    if (value.path === fullPath) {
+      _.forEach(context.parents, (item) => {
+        if (item.value instanceof Array) {
+          return;
+        }
+        keys.push(item.value.path);
+      });
+    }
+  });
+  if (keys.length > 0) {
+    for (const key of keys) {
+      if (openKeys.value.indexOf(key) === -1) {
+        openKeys.value.push(key);
+        changed = true;
+      }
+    }
+  }
+  return changed;
+}
+watch(
+  () => {
+    return route.fullPath;
+  },
+  (path) => {
+    // path = route.fullPath;
+    selectedKeys.value = [path];
+    const changed = openSelectedParents(path);
+    if (changed) {
+      // onOpenChange();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+<style lang="less">
+.fs-menu {
+  height: 100%;
+  overflow-y: auto;
+  .fs-icon {
+    font-size: 16px !important;
+    min-width: 16px !important;
+  }
+}
+</style>

packages/ui/certd-client/src/layout/components/menu/index1.tsx

@@ -6,60 +6,8 @@ import "./index.less";
 import { utils } from "@fast-crud/fast-crud";
 import { routerUtils } from "/@/utils/util.router";
 
-function useBetterScroll(enabled = true) {
-  const bsRef = ref(null);
-  const asideMenuRef = ref();
+defineOptions()
 
-  let onOpenChange = () => {};
-  if (enabled) {
-    function bsInit() {
-      if (asideMenuRef.value == null) {
-        return;
-      }
-      bsRef.value = new BScroll(asideMenuRef.value, {
-        mouseWheel: true,
-        click: true,
-        momentum: false,
-        // 如果你愿意可以打开显示滚动条
-        scrollbar: {
-          fade: true,
-          interactive: false
-        },
-        bounce: false
-      });
-    }
-
-    function bsDestroy() {
-      if (bsRef.value != null && bsRef.value.destroy) {
-        try {
-          bsRef.value.destroy();
-        } catch (e) {
-          // console.error(e);
-        } finally {
-          bsRef.value = null;
-        }
-      }
-    }
-
-    onMounted(() => {
-      bsInit();
-    });
-
-    onUnmounted(() => {
-      bsDestroy();
-    });
-    onOpenChange = async () => {
-      console.log("onOpenChange");
-      setTimeout(() => {
-        bsRef.value?.refresh();
-      }, 300);
-    };
-  }
-  return {
-    onOpenChange,
-    asideMenuRef
-  };
-}
 export default defineComponent({
   name: "FsMenu",
   inheritAttrs: true,
@@ -75,6 +23,31 @@ export default defineComponent({
       await routerUtils.open(item.key);
     }
 
+    const items = ref([]);
+
+    function buildItemMenus(menus: any) {
+      if (menus == null) {
+        return;
+      }
+      const list: any = [];
+      for (const sub of menus) {
+        const item: any = {
+          key: sub.path,
+          label: sub.title,
+          title: sub.title,
+          icon: () => {
+            return <fsIcon icon={sub.icon ?? sub.meta?.icon} />;
+          }
+        };
+        list.push(item);
+        if (sub.children && sub.children.length > 0) {
+          item.children = buildItemMenus(sub.children);
+        }
+      }
+      return list;
+    }
+    items.value = buildItemMenus(props.menus);
+    console.log("items", items.value);
     const fsIcon = resolveComponent("FsIcon");
 
     const buildMenus = (children: any) => {
@@ -114,7 +87,7 @@ export default defineComponent({
               open(sub.path);
             }
           }
-          slots.push(<a-sub-menu key={sub.path} v-slots={subSlots} onTitleClick={onTitleClick} />);
+          slots.push(<a-sub-menu key={sub.path} v-slots={subSlots} />);
         } else {
           slots.push(
             <a-menu-item key={sub.path} title={sub.title}>
@@ -132,6 +105,7 @@ export default defineComponent({
     };
     const selectedKeys = ref([]);
     const openKeys = ref([]);
+
     const route = useRoute();
     const router = useRouter();
 
@@ -168,7 +142,7 @@ export default defineComponent({
       return changed;
     }
 
-    const { asideMenuRef, onOpenChange } = useBetterScroll(props.scroll as any);
+    // const { asideMenuRef, onOpenChange } = useBetterScroll(props.scroll as any);
 
     watch(
       () => {
@@ -179,7 +153,7 @@ export default defineComponent({
         selectedKeys.value = [path];
         const changed = openSelectedParents(path);
         if (changed) {
-          onOpenChange();
+          // onOpenChange();
         }
       },
       {
@@ -191,22 +165,19 @@ export default defineComponent({
         <a-menu
           mode={"inline"}
           theme={"light"}
-          v-slots={slots}
-          onClick={onSelect}
-          onOpenChange={onOpenChange}
+          // v-slots={slots}
+          // onClick={onSelect}
+          // onOpenChange={onOpenChange}
           v-models={[
             [openKeys.value, "openKeys"],
             [selectedKeys.value, "selectedKeys"]
           ]}
-          {...ctx.attrs}
+          items={items.value}
+          inlineCollapsed={!props.expandSelected}
         />
       );
       const classNames = { "fs-menu-wrapper": true, "fs-menu-better-scroll": props.scroll };
-      return (
-        <div ref={asideMenuRef} class={classNames}>
-          {menu}
-        </div>
-      );
+      return <div>{menu}</div>;
     };
   }
 });

packages/ui/certd-client/src/layout/layout-framework.vue

@@ -106,7 +106,7 @@
 
 <script lang="ts" setup>
 import { computed, onErrorCaptured, onMounted, ref } from "vue";
-import FsMenu from "./components/menu/index.jsx";
+import FsMenu from "./components/menu/index.vue";
 import FsLocale from "./components/locale/index.vue";
 import FsUserInfo from "./components/user-info/index.vue";
 import FsTabs from "./components/tabs/index.vue";

packages/ui/certd-client/src/style/antdv4.less

@@ -41,3 +41,8 @@
 .fs-search .ant-row{
 
 }
+
+
+.ant-modal {
+  max-width: calc(100% - 32px) !important ;
+}

packages/ui/certd-client/src/views/certd/pipeline/crud.tsx

@@ -501,7 +501,7 @@ export default function ({ crudExpose, context: { certdFormRef, groupDictRef, se
           },
           column: {
             sorter: true,
-            width: 80,
+            width: 120,
             align: "center"
           }
         },

packages/ui/certd-client/src/views/certd/pipeline/pipeline/utils/util.status.ts

@@ -57,6 +57,12 @@ const StatusEnum: StatusEnumType = {
     label: "禁用",
     color: "gray",
     icon: "ant-design:stop-outlined"
+  },
+  no_deploy_count: {
+    value: "no_deploy_count",
+    label: "次数不足",
+    color: "gray",
+    icon: "ant-design:stop-outlined"
   }
 };
 export const statusUtil = {

packages/ui/certd-client/src/views/certd/suite/buy.vue

@@ -14,14 +14,10 @@
           </a-card>
         </a-col>
       </a-row>
-      <h3>套餐</h3>
       <a-row :gutter="8" class="mt-10">
         <a-col v-for="item of suites" :key="item.id" class="mb-10 suite-card-col">
           <product-info :product="item" @order="doOrder" />
         </a-col>
-      </a-row>
-      <h3>加量包</h3>
-      <a-row :gutter="8" class="mt-10">
         <a-col v-for="item of addons" :key="item.id" class="mb-10 suite-card-col">
           <product-info :product="item" @order="doOrder" />
         </a-col>
@@ -44,7 +40,7 @@ const addons = ref([]);
 async function loadProducts() {
   const list = await api.ProductList();
   suites.value = list.filter((x: any) => x.type === "suite");
-  addons.value = list.filter((x: any) => x.type === "addone");
+  addons.value = list.filter((x: any) => x.type === "addon");
 }
 
 loadProducts();

packages/ui/certd-client/src/views/certd/suite/mine/crud.tsx

@@ -1,10 +1,11 @@
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import api from "./api";
 import { useRouter } from "vue-router";
 import SuiteValueEdit from "/@/views/sys/suite/product/suite-value-edit.vue";
 import SuiteValue from "/@/views/sys/suite/product/suite-value.vue";
 import DurationValue from "/@/views/sys/suite/product/duration-value.vue";
 import dayjs from "dayjs";
+import UserSuiteStatus from "/@/views/certd/suite/mine/user-suite-status.vue";
 
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -207,7 +208,10 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             component: {
               name: SuiteValue,
               vModel: "modelValue",
-              unit: "次"
+              unit: "次",
+              used: compute(({ row }) => {
+                return row.deployCountUsed;
+              })
             },
             align: "center"
           }
@@ -254,38 +258,17 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           column: {
             width: 100,
             align: "center",
+            component: {
+              name: UserSuiteStatus,
+              userSuite: compute(({ row }) => {
+                return row;
+              }),
+              currentSuite: context.detail
+            },
             conditionalRender: {
               match() {
                 return false;
               }
-            },
-            cellRender({ row }) {
-              if (row.activeTime == null) {
-                return <a-tag color="blue">未使用</a-tag>;
-              }
-              const now = dayjs().valueOf();
-              //已过期
-              const isExpired = row.expiresTime != -1 && now > row.expiresTime;
-              if (isExpired) {
-                return <a-tag color="error">已过期</a-tag>;
-              }
-              //如果在激活时间之前
-              if (now < row.activeTime) {
-                return <a-tag color="blue">待生效</a-tag>;
-              }
-
-              //是否是当前套餐
-              const suites = context.detail.value.suites;
-              if (suites && suites.length > 0) {
-                const suite = suites[0];
-                if (suite.productType === "suite" && suite.id === row.id) {
-                  return <a-tag color="success">当前套餐</a-tag>;
-                }
-              }
-              // 是否在激活时间和过期时间之间
-              if (now > row.activeTime && (row.expiresTime == -1 || now < row.expiresTime)) {
-                return <a-tag color="success">生效中</a-tag>;
-              }
             }
           }
         },

packages/ui/certd-client/src/views/certd/suite/mine/index.vue

@@ -1,12 +1,16 @@
 <template>
   <fs-page>
     <template #header>
-      <div class="title">
+      <div class="title flex-baseline">
         我的套餐
-        <span class="sub">我的所有套餐</span>
+        <div class="sub">
+          <div class="flex-o">当前套餐：<suite-card></suite-card></div>
+        </div>
       </div>
     </template>
-    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right> </template>
+    </fs-crud>
   </fs-page>
 </template>
 
@@ -15,6 +19,7 @@ import { onActivated, onMounted, ref } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import api, { SuiteDetail } from "/@/views/certd/suite/mine/api";
+import SuiteCard from "/@/views/framework/home/dashboard/suite-card.vue";
 
 defineOptions({
   name: "MySuites"

packages/ui/certd-client/src/views/certd/suite/mine/user-suite-status.vue

@@ -0,0 +1,54 @@
+<template>
+  <a-tag :color="binding.color">{{ binding.text }}</a-tag>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import dayjs from "dayjs";
+
+defineOptions({
+  name: "UserSuiteStatus"
+});
+
+const props = defineProps<{
+  userSuite: any;
+  currentSuite?: any;
+}>();
+
+const binding = computed(() => {
+  const userSuite = props.userSuite;
+  if (!userSuite) {
+    return {};
+  }
+  if (userSuite.activeTime == null) {
+    return { color: "blue", text: "未使用" };
+  }
+  const now = dayjs().valueOf();
+  //已过期
+  const isExpired = userSuite.expiresTime != -1 && now > userSuite.expiresTime;
+  if (isExpired) {
+    return { color: "error", text: "已过期" };
+  }
+  //如果在激活时间之前
+  if (now < userSuite.activeTime) {
+    return { color: "blue", text: "待生效" };
+  }
+
+  if (userSuite.isEmpty) {
+    return { color: "gray", text: "已用完" };
+  }
+
+  //是否是当前套餐
+  if (props.currentSuite && props.currentSuite.productType === "suite" && props.currentSuite.id === userSuite.id) {
+    return { color: "success", text: "当前套餐" };
+  }
+  // 是否在激活时间和过期时间之间
+  if (now > userSuite.activeTime && (userSuite.expiresTime == -1 || now < userSuite.expiresTime)) {
+    if (userSuite.productType === "suite") {
+      return { color: "success", text: "有效期内" };
+    }
+    return { color: "success", text: "生效中" };
+  }
+  return {};
+});
+</script>

packages/ui/certd-client/src/views/certd/suite/product-info.vue

@@ -16,7 +16,13 @@
         <suite-value :model-value="product.content.maxDomainCount" unit="个" />
       </div>
       <div class="flex-between mt-5">
-        <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" /> 部署次数：</div>
+        <div class="flex-o">
+          <fs-icon icon="ant-design:check-outlined" class="color-green mr-5" />
+          部署次数：
+          <a-tooltip title="只有运行成功才会扣除部署次数">
+            <fs-icon class="font-size-16 ml-5" icon="mingcute:question-line"></fs-icon>
+          </a-tooltip>
+        </div>
         <suite-value :model-value="product.content.maxDeployCount" unit="次" />
       </div>
       <div class="flex-between mt-5">
@@ -43,7 +49,7 @@
     <div class="price flex-between mt-5">
       <div class="flex-o">价格</div>
       <div class="flex-o price-text">
-        <price-input style="font-size: 18px; color: red" :model-value="selected?.price" :edit="false" />
+        <price-input style="color: red" :font-size="20" :model-value="selected?.price" :edit="false" />
         <span class="ml-5" style="font-size: 12px"> / {{ durationDict.dataMap[selected.duration]?.label }}</span>
       </div>
     </div>
@@ -58,7 +64,7 @@ import { durationDict } from "/@/views/certd/suite/api";
 import SuiteValue from "/@/views/sys/suite/product/suite-value.vue";
 import PriceInput from "/@/views/sys/suite/product/price-input.vue";
 import { ref } from "vue";
-import { dict } from "@fast-crud/fast-crud";
+import { dict, FsIcon } from "@fast-crud/fast-crud";
 
 const props = defineProps<{
   product: any;

packages/ui/certd-client/src/views/framework/home/dashboard/suite-card.vue

@@ -9,11 +9,17 @@
               <suite-value :model-value="detail.pipelineCount.max" :used="detail.pipelineCount.used" unit="条" />
             </div>
             <div class="flex-between mt-5">
-              <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" />域名数量：</div>
+              <div class="flex-o">
+                <fs-icon icon="ant-design:check-outlined" class="color-green mr-5" />
+                域名数量：
+              </div>
               <suite-value :model-value="detail.domainCount.max" :used="detail.domainCount.used" unit="个" />
             </div>
             <div class="flex-between mt-5">
-              <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" /> 部署次数：</div>
+              <div class="flex-o">
+                <fs-icon icon="ant-design:check-outlined" class="color-green mr-5" />
+                部署次数：
+              </div>
               <suite-value :model-value="detail.deployCount.max" :used="detail.deployCount.used" unit="次" />
             </div>
             <div class="flex-between mt-5">
@@ -41,6 +47,7 @@ import SuiteValue from "/@/views/sys/suite/product/suite-value.vue";
 import { ref } from "vue";
 import ExpiresTimeText from "/@/components/expires-time-text.vue";
 import api, { SuiteDetail } from "/@/views/certd/suite/mine/api";
+import { FsIcon } from "@fast-crud/fast-crud";
 
 defineOptions({
   name: "SuiteCard"

packages/ui/certd-client/src/views/sys/suite/user-suite/crud.tsx

@@ -1,4 +1,4 @@
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { pipelineGroupApi } from "./api";
 import { useRouter } from "vue-router";
 import SuiteValueEdit from "/@/views/sys/suite/product/suite-value-edit.vue";
@@ -6,6 +6,7 @@ import SuiteValue from "/@/views/sys/suite/product/suite-value.vue";
 import DurationValue from "/@/views/sys/suite/product/duration-value.vue";
 import dayjs from "dayjs";
 import createCrudOptionsUser from "/@/views/sys/authority/user/crud";
+import UserSuiteStatus from "/@/views/certd/suite/mine/user-suite-status.vue";
 
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const api = pipelineGroupApi;
@@ -68,6 +69,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           // }
         }
       },
+      toolbar: { show: false },
       rowHandle: {
         width: 200,
         fixed: "right",
@@ -234,7 +236,10 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             component: {
               name: SuiteValue,
               vModel: "modelValue",
-              unit: "次"
+              unit: "次",
+              used: compute(({ row }) => {
+                return row.deployCountUsed;
+              })
             },
             align: "center"
           }
@@ -281,29 +286,16 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           column: {
             width: 100,
             align: "center",
+            component: {
+              name: UserSuiteStatus,
+              userSuite: compute(({ row }) => {
+                return row;
+              })
+            },
             conditionalRender: {
               match() {
                 return false;
               }
-            },
-            cellRender({ row }) {
-              if (row.activeTime == null) {
-                return <a-tag color="blue">未使用</a-tag>;
-              }
-              const now = dayjs().valueOf();
-              //已过期
-              const isExpired = row.expiresTime != -1 && now > row.expiresTime;
-              if (isExpired) {
-                return <a-tag color="error">已过期</a-tag>;
-              }
-              //如果在激活时间之前
-              if (now < row.activeTime) {
-                return <a-tag color="blue">待生效</a-tag>;
-              }
-              // 是否在激活时间和过期时间之间
-              if (now > row.activeTime && (row.expiresTime == -1 || now < row.expiresTime)) {
-                return <a-tag color="success">生效中</a-tag>;
-              }
             }
           }
         },
@@ -342,6 +334,29 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             width: 100,
             align: "center"
           }
+        },
+        createTime: {
+          title: "创建时间",
+          type: "datetime",
+          form: {
+            show: false
+          },
+          column: {
+            sorter: true,
+            width: 160,
+            align: "center"
+          }
+        },
+        updateTime: {
+          title: "更新时间",
+          type: "datetime",
+          form: {
+            show: false
+          },
+          column: {
+            show: true,
+            width: 160
+          }
         }
       }
     }