🔱: [client] sync upgrade with 12 commits [trident-sync]

refactor: 1.11.0
refactor: 1.11.0
refactor: 1.11.0
refactor: 1.11.0
refactor: ts化
refactor: ts化
feat: 全面TS化
perf: 全面ts化
refactor: 继续优化ts
perf: ts定义优化
fix: 修复wangeditor无法上传视频的bug

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

@@ -1,56 +0,0 @@
-<template>
-  <div class="fs-contentmenu-list" @click="rowClick">
-    <div
-      v-for="item in menulist"
-      :key="item.value"
-      :data-value="item.value"
-      class="fs-contentmenu-item"
-      flex="cross:center main:center"
-    >
-      <d2-icon v-if="item.icon" :name="item.icon" />
-      <div class="fs-contentmenu-item-title" flex-box="1">
-        {{ item.title }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FsContextmenuList",
-  props: {
-    menulist: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    rowClick(event) {
-      let target = event.target;
-      while (!target.dataset.value) {
-        target = target.parentNode;
-      }
-      this.$emit("rowClick", target.dataset.value);
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.fs-contentmenu-list {
-  .fs-contentmenu-item {
-    padding: 8px 20px 8px 15px;
-    margin: 0;
-    font-size: 14px;
-    color: #606266;
-    cursor: pointer;
-    &:hover {
-      background: #ecf5ff;
-      color: #66b1ff;
-    }
-    .fs-contentmenu-item-title {
-      margin-left: 10px;
-    }
-  }
-}
-</style>

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

@@ -1,68 +0,0 @@
-<template>
-  <div v-show="flag" class="fs-contextmenu" :style="style">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FsContextmenu",
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    x: {
-      type: Number,
-      default: 0
-    },
-    y: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {
-    flag: {
-      get() {
-        if (this.visible) {
-          // 注册全局监听事件 [ 目前只考虑鼠标解除触发 ]
-          window.addEventListener("mousedown", this.watchContextmenu);
-        }
-        return this.visible;
-      },
-      set(newVal) {
-        this.$emit("update:visible", newVal);
-      }
-    },
-    style() {
-      return {
-        left: this.x + "px",
-        top: this.y + "px",
-        display: this.visible ? "block" : "none "
-      };
-    }
-  },
-  mounted() {
-    // 将菜单放置到body下
-    document.querySelector("body").appendChild(this.$el);
-  },
-  methods: {
-    watchContextmenu(event) {
-      if (!this.$el.contains(event.target) || event.button !== 0) this.flag = false;
-      window.removeEventListener("mousedown", this.watchContextmenu);
-    }
-  }
-};
-</script>
-
-<style>
-.fs-contextmenu {
-  position: absolute;
-  padding: 5px 0;
-  z-index: 2018;
-  background: #fff;
-  border: 1px solid #cfd7e5;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-</style>

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

@@ -19,7 +19,7 @@
   </a-dropdown>
 </template>
 
-<script>
+<script lang="ts">
 import i18n from "../../../i18n";
 import { computed, inject } from "vue";
 import _ from "lodash-es";
@@ -27,8 +27,8 @@ export default {
   name: "FsLocale",
   setup() {
     const languages = computed(() => {
-      const map = i18n.global.messages?.value || {};
-      const list = [];
+      const map: any = i18n.global.messages?.value || {};
+      const list: any = [];
       _.forEach(map, (item, key) => {
         list.push({
           key,
@@ -41,12 +41,12 @@ export default {
       return i18n.global.locale.value;
     });
 
-    const routerReload = inject("fn:router.reload");
-    const localeChanged = inject("fn:locale.changed");
-    const changeLocale = (change) => {
+    const routerReload: any = inject("fn:router.reload");
+    const localeChanged: any = inject("fn:locale.changed");
+    const changeLocale = (change: any) => {
       i18n.global.locale.value = change.key;
       routerReload();
-      localeChanged(change.key)
+      localeChanged(change.key);
     };
     return {
       languages,

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

@@ -1,14 +1,13 @@
 import { useRoute, useRouter } from "vue-router";
 import { ref, watch, onMounted, onUnmounted, resolveComponent, nextTick, defineComponent } from "vue";
-import getEachDeep from "deepdash-es/getEachDeep";
 import _ from "lodash-es";
 import BScroll from "better-scroll";
 import "./index.less";
-const eachDeep = getEachDeep(_);
+import { utils } from "@fast-crud/fast-crud";
 
 function useBetterScroll(enabled = true) {
-  let bsRef = ref(null);
-  let asideMenuRef = ref();
+  const bsRef = ref(null);
+  const asideMenuRef = ref();
 
   let onOpenChange = () => {};
   if (enabled) {
@@ -71,7 +70,7 @@ export default defineComponent({
     scroll: {}
   },
   setup(props, ctx) {
-    async function open(path) {
+    async function open(path: any) {
       if (path == null) {
         return;
       }
@@ -90,23 +89,24 @@ export default defineComponent({
         console.error("导航失败", e);
       }
     }
-    function onSelect(item) {
+    function onSelect(item: any) {
       open(item.key);
     }
 
-    const FsIcon = resolveComponent("FsIcon");
+    const fsIcon = resolveComponent("FsIcon");
 
-    const buildMenus = (children) => {
-      const slots = [];
+    const buildMenus = (children: any) => {
+      const slots: any = [];
       if (children == null) {
         return slots;
       }
-      for (let sub of children) {
-        const title = () => {
+      for (const sub of children) {
+        const title: any = () => {
           if (sub?.meta?.icon) {
+            // @ts-ignore
             return (
               <div class={"menu-item-title"}>
-                <FsIcon class={"anticon"} icon={sub.meta.icon} />
+                <fsIcon class={"anticon"} icon={sub.meta.icon} />
                 <span>{sub.title}</span>
               </div>
             );
@@ -147,16 +147,16 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
 
-    function openSelectedParents(fullPath) {
+    function openSelectedParents(fullPath: any) {
       if (!props.expandSelected) {
         return;
       }
       if (props.menus == null) {
         return;
       }
-      const keys = [];
+      const keys: any = [];
       let changed = false;
-      eachDeep(props.menus, (value, key, parent, context) => {
+      utils.deepdash.forEachDeep(props.menus, (value: any, key: any, parent: any, context: any) => {
         if (value == null) {
           return;
         }
@@ -170,7 +170,7 @@ export default defineComponent({
         }
       });
       if (keys.length > 0) {
-        for (let key of keys) {
+        for (const key of keys) {
           if (openKeys.value.indexOf(key) === -1) {
             openKeys.value.push(key);
             changed = true;
@@ -180,7 +180,7 @@ export default defineComponent({
       return changed;
     }
 
-    const { asideMenuRef, onOpenChange } = useBetterScroll(props.scroll);
+    const { asideMenuRef, onOpenChange } = useBetterScroll(props.scroll as any);
 
     watch(
       () => {

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

@@ -5,7 +5,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 export default defineComponent({
@@ -23,7 +23,7 @@ export default defineComponent({
       { immediate: true }
     );
     const middle = "/fast-crud/fs-admin-antdv/tree/main/src/views";
-    function goSource(prefix) {
+    function goSource(prefix: any) {
       const path = router.currentRoute.value.fullPath;
       window.open(prefix + middle + path + "/index.vue");
     }

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

@@ -2,22 +2,8 @@
   <div class="fs-multiple-page-control-group">
     <div class="fs-multiple-page-control-content">
       <div class="fs-multiple-page-control-content-inner">
-        <a-tabs
-          class="fs-multiple-page-control fs-multiple-page-sort"
-          :active-key="page.getCurrent"
-          type="editable-card"
-          hide-add
-          @tabClick="handleClick"
-          @edit="handleTabEdit"
-          @contextmenu="handleContextmenu"
-        >
-          <a-tab-pane
-            v-for="item in page.getOpened"
-            :key="item.fullPath"
-            :tab="item.meta?.title || '未命名'"
-            :name="item.fullPath"
-            :closable="isTabClosable(item)"
-          />
+        <a-tabs class="fs-multiple-page-control fs-multiple-page-sort" :active-key="page.getCurrent" type="editable-card" hide-add @tabClick="handleClick" @edit="handleTabEdit">
+          <a-tab-pane v-for="item in page.getOpened" :key="item.fullPath" :tab="item.meta?.title || '未命名'" :name="item.fullPath" :closable="isTabClosable(item)" />
         </a-tabs>
         <!--        <fs-contextmenu v-model:visible="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">-->
         <!--          <fs-contextmenu-list-->
@@ -33,7 +19,7 @@
         <span class="iconify" data-icon="ion:close-circle" data-inline="false"></span>
         <template #icon><DownOutlined /></template>
         <template #overlay>
-          <a-menu @click="(command) => handleControlItemClick(command)">
+          <a-menu @click="(command:any) => handleControlItemClick(command)">
             <a-menu-item key="left">
               <fs-icon name="arrow-left" class="fs-mr-10" />
               关闭左侧
@@ -57,8 +43,7 @@
   </div>
 </template>
 
-<script>
-import Sortable from "sortablejs";
+<script lang="ts">
 import { usePageStore } from "../../../store/modules/page";
 import { computed } from "vue";
 export default {
@@ -119,14 +104,14 @@ export default {
      * @description 计算某个标签页是否可关闭
      * @param {Object} page 其中一个标签页
      */
-    isTabClosable(page) {
+    isTabClosable(page: any) {
       return page.name !== "index";
     },
     /**
      * @description 右键菜单功能点击
      * @param {Object} event 事件
      */
-    handleContextmenu(event) {
+    handleContextmenu(event: any) {
       let target = event.target;
       // fix https://github.com/fs-projects/fs-admin/issues/54
       let flag = false;
@@ -148,7 +133,7 @@ export default {
      * @description 右键菜单的 row-click 事件
      * @param {String} command 事件类型
      */
-    contextmenuClick(command) {
+    contextmenuClick(command: any) {
       this.handleControlItemClick(command, this.tagName);
     },
     /**
@@ -156,7 +141,7 @@ export default {
      * @param {String} command 事件类型
      * @param {String} tagName tab 名称
      */
-    handleControlItemClick(command, tagName = null) {
+    handleControlItemClick(command: any, tagName: any = null) {
       //if (tagName) this.contextmenuFlag = false;
       const params = { pageSelect: tagName };
       switch (command.key) {
@@ -182,9 +167,9 @@ export default {
      * @param {object} tab 标签
      * @param {object} event 事件
      */
-    handleClick(tab) {
+    handleClick(tab: any) {
       // 找到点击的页面在 tag 列表里是哪个
-      const page = this.page.getOpened.find((page) => page.fullPath === tab);
+      const page = this.page.getOpened.find((page: any) => page.fullPath === tab);
       if (page) {
         const { name, params, query } = page;
         this.$router.push({ name, params, query });
@@ -194,12 +179,12 @@ export default {
      * @description 点击 tab 上的删除按钮触发这里
      * @param {String} tagName tab 名称
      */
-    handleTabEdit(tagName, action) {
+    handleTabEdit(tagName: any, action: any) {
       if (action === "remove") {
         this.close({ tagName });
       }
     }
-  }
+  } as any
 };
 </script>
 <style lang="less">

packages/ui/certd-client/src/layout/components/theme/color-picker.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from "vue";
 const colorListDefine = [
   {
@@ -60,7 +60,7 @@ export default defineComponent({
   emits: ["change"],
   setup(props, ctx) {
     const colorList = ref(colorListDefine);
-    function changeColor(color) {
+    function changeColor(color: any) {
       ctx.emit("change", color);
     }
     return {

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

@@ -1,23 +1,13 @@
 <template>
   <div class="fs-theme" @click="show()">
     <fs-iconify icon="ion:sparkles-outline" />
-    <a-drawer
-      v-model:visible="visible"
-      title="主题设置"
-      placement="right"
-      width="350px"
-      :closable="false"
-      @after-visible-change="afterVisibleChange"
-    >
-      <fs-theme-color-picker
-        :primary-color="setting.getTheme.primaryColor"
-        @change="setting.setPrimaryColor"
-      ></fs-theme-color-picker>
+    <a-drawer v-model:visible="visible" title="主题设置" placement="right" width="350px" :closable="false" @after-visible-change="afterVisibleChange">
+      <fs-theme-color-picker :primary-color="setting.getTheme.primaryColor" @change="setting.setPrimaryColor"></fs-theme-color-picker>
     </a-drawer>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { ref, defineComponent } from "vue";
 import FsThemeColorPicker from "./color-picker.vue";
 import { useSettingStore } from "/@/store/modules/settings";

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

@@ -10,7 +10,7 @@
     </template>
   </a-dropdown>
 </template>
-<script>
+<script lang="ts">
 import { defineComponent } from "vue";
 import { useUserStore } from "/src/store/modules/user";
 import { Modal } from "ant-design-vue";

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

@@ -58,7 +58,7 @@
   </a-layout>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, onErrorCaptured, ref } from "vue";
 import FsMenu from "./components/menu/index.jsx";
 import FsLocale from "./components/locale/index.vue";

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

@@ -25,7 +25,7 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 export default {
   name: "LayoutOutside"
 };