feat: tool

Author: wangdan-fit2cloud

ui/package.json

@@ -19,6 +19,7 @@
     "element-plus": "^2.9.7",
     "nprogress": "^0.2.0",
     "pinia": "^3.0.1",
+    "use-element-plus-theme": "^0.0.5",
     "vue": "^3.5.13",
     "vue-codemirror": "^6.1.1",
     "vue-i18n": "^11.1.3",

ui/src/assets/node/icon_tool.svg

@@ -117,6 +117,31 @@ export const iconMap: any = {
       ])
     },
   },
+  'app-folder': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M42.666667 170.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h357.632a42.666667 42.666667 0 0 1 38.144 23.594667L512 213.333333h426.666667a42.666667 42.666667 0 0 1 42.666666 42.666667v597.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V170.666667z',
+              fill: '#FFA53D',
+            }),
+            h('path', {
+              d: 'M42.666667 256a42.666667 42.666667 0 0 1 42.666666-42.666667h853.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v597.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V256z',
+              fill: '#FFC60A',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
   // 动态加载的图标
   ...dynamicIcons,
 }

ui/src/components/app-icon/index.ts

@@ -1,31 +1,72 @@
 <template>
-  <el-tree
-    style="max-width: 600px"
-    :data="data"
-    :props="defaultProps"
-    @node-click="handleNodeClick"
-  />
+  <div>
+    <el-input
+      v-model="filterText"
+      :placeholder="$t('common.search')"
+      prefix-icon="Search"
+      clearable
+      class="p-8"
+    />
+    <el-tree
+      ref="treeRef"
+      :data="data"
+      :props="defaultProps"
+      @node-click="handleNodeClick"
+      :filter-node-method="filterNode"
+      :default-expanded-keys="[currentNodeKey]"
+      :current-node-key="currentNodeKey"
+      highlight-current
+      node-key="id"
+    >
+      <template #default="{ node, data }">
+        <div class="custom-tree-node flex align-center">
+          <AppIcon iconName="app-folder" style="font-size: 16px"></AppIcon>
+          <span class="ml-8" >{{ node.label }}</span>
+        </div>
+      </template>
+    </el-tree>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, watch } from 'vue'
+import type { TreeInstance } from 'element-plus'
 defineOptions({ name: 'FolderTree' })
 const props = defineProps({
   data: {
     type: Array,
     default: () => [],
   },
+  currentNodeKey: {
+    type: String,
+    default: 'root',
+  },
 })
 interface Tree {
   name: string
   children?: Tree[]
 }
 
-const handleNodeClick = (data: Tree) => {
-  console.log(data)
-}
-
 const defaultProps = {
   children: 'children',
   label: 'name',
 }
+
+const emit = defineEmits(['handleNodeClick'])
+
+const treeRef = ref<TreeInstance>()
+const filterText = ref('')
+
+watch(filterText, (val) => {
+  treeRef.value!.filter(val)
+})
+
+const filterNode = (value: string, data: Tree) => {
+  if (!value) return true
+  return data.name.includes(value)
+}
+
+const handleNodeClick = (data: Tree) => {
+  emit('handleNodeClick', data)
+}
 </script>

ui/src/components/folder-tree/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <img v-if="user.themeInfo?.loginLogo" :src="fileURL" alt="" height="45px" class="mr-8" />
+  <img v-if="theme.themeInfo?.loginLogo" :src="fileURL" alt="" height="45px" class="mr-8" />
   <template v-else>
     <svg
       v-if="!isDefaultTheme"
@@ -66,20 +66,20 @@ defineOptions({ name: 'LogoFull' })
 defineProps({
   height: {
     type: String,
-    default: '36px'
-  }
+    default: '36px',
+  },
 })
-const { user } = useStore()
+const { theme } = useStore()
 const isDefaultTheme = computed(() => {
-  return user.isDefaultTheme()
+  return theme.isDefaultTheme()
 })
 
 const fileURL = computed(() => {
-  if (user.themeInfo) {
-    if (typeof user.themeInfo?.loginLogo === 'string') {
-      return user.themeInfo?.loginLogo
+  if (theme.themeInfo) {
+    if (typeof theme.themeInfo?.loginLogo === 'string') {
+      return theme.themeInfo?.loginLogo
     } else {
-      return URL.createObjectURL(user.themeInfo?.loginLogo)
+      return URL.createObjectURL(theme.themeInfo?.loginLogo)
     }
   } else {
     return ''

ui/src/components/logo/LogoFull.vue

@@ -45,9 +45,9 @@ defineProps({
     default: '36px'
   }
 })
-const { user } = useStore()
+const { theme } = useStore()
 const isDefaultTheme = computed(() => {
-  return user.isDefaultTheme()
+  return theme.isDefaultTheme()
 })
 </script>
 <style lang="scss" scoped>

ui/src/components/logo/LogoIcon.vue

@@ -30,9 +30,9 @@ defineProps({
     default: '36px'
   }
 })
-const { user } = useStore()
+const { theme } = useStore()
 const isDefaultTheme = computed(() => {
-  return user.isDefaultTheme()
+  return theme.isDefaultTheme()
 })
 </script>
 <style lang="scss" scoped>

ui/src/components/logo/SendIcon.vue

@@ -11,7 +11,8 @@
     </template>
     <div class="about-ui" v-loading="loading">
       <div class="flex">
-        <span class="label">{{ $t('layout.about.authorize') }}</span><span>{{ licenseInfo?.corporation || '-' }}</span>
+        <span class="label">{{ $t('layout.about.authorize') }}</span
+        ><span>{{ licenseInfo?.corporation || '-' }}</span>
       </div>
       <div class="flex">
         <span class="label">{{ $t('layout.about.expiredTime') }}</span>
@@ -24,16 +25,23 @@
       </div>
       <div class="flex">
         <span class="label">{{ $t('layout.about.edition.label') }}</span>
-        <span>{{ user.showXpack() ? $t('layout.about.edition.professional') : $t('layout.about.edition.community') }}</span>
+        <span>{{
+          user.showXpack()
+            ? $t('layout.about.edition.professional')
+            : $t('layout.about.edition.community')
+        }}</span>
       </div>
       <div class="flex">
-        <span class="label">{{ $t('layout.about.version') }}</span><span>{{ user.version }}</span>
+        <span class="label">{{ $t('layout.about.version') }}</span
+        ><span>{{ user.version }}</span>
       </div>
       <div class="flex">
-        <span class="label">{{ $t('layout.about.serialNo') }}</span><span>{{ licenseInfo?.serialNo || '-' }}</span>
+        <span class="label">{{ $t('layout.about.serialNo') }}</span
+        ><span>{{ licenseInfo?.serialNo || '-' }}</span>
       </div>
       <div class="flex">
-        <span class="label">{{ $t('layout.about.remark') }}</span><span>{{ licenseInfo?.remark || '-' }}</span>
+        <span class="label">{{ $t('layout.about.remark') }}</span
+        ><span>{{ licenseInfo?.remark || '-' }}</span>
       </div>
       <div class="mt-16 flex align-center" v-if="user.showXpack()">
         <el-upload
@@ -44,7 +52,9 @@
           :on-change="onChange"
           v-hasPermission="new Role('ADMIN')"
         >
-          <el-button class="border-primary mr-16">{{ $t('layout.about.update') }} License</el-button>
+          <el-button class="border-primary mr-16"
+            >{{ $t('layout.about.update') }} License</el-button
+          >
         </el-upload>
       </div>
     </div>
@@ -59,9 +69,9 @@ import licenseApi from '@/api/license'
 import { fromNowDate } from '@/utils/time'
 import { Role } from '@/utils/permission/type'
 import useStore from '@/stores'
-const { user } = useStore()
+const { user, theme } = useStore()
 const isDefaultTheme = computed(() => {
-  return user.isDefaultTheme()
+  return theme.isDefaultTheme()
 })
 
 const aboutDialogVisible = ref(false)

ui/src/layout/layout-header/avatar/AboutDialog.vue

@@ -4,7 +4,7 @@
       <el-avatar :size="30">
         <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
       </el-avatar>
-      <span class="ml-8">{{ user.userInfo?.username }}</span>
+      <span class="ml-8 color-text-primary">{{ user.userInfo?.username }}</span>
       <el-icon class="el-icon--right">
         <CaretBottom />
       </el-icon>

ui/src/layout/layout-header/avatar/index.vue

@@ -4,46 +4,46 @@
       effect="dark"
       :content="$t('layout.github')"
       placement="top"
-      v-if="user.themeInfo?.showProject"
+      v-if="theme.themeInfo?.showProject"
     >
       <AppIcon
         iconName="app-github"
         class="cursor color-secondary mr-8 ml-8"
         style="font-size: 20px"
-        @click="toUrl(user.themeInfo?.projectUrl)"
+        @click="toUrl(theme.themeInfo?.projectUrl)"
       ></AppIcon>
     </el-tooltip>
     <el-tooltip
       effect="dark"
       :content="$t('layout.wiki')"
       placement="top"
-      v-if="user.themeInfo?.showUserManual"
+      v-if="theme.themeInfo?.showUserManual"
     >
       <AppIcon
         iconName="app-user-manual"
         class="cursor color-secondary mr-8 ml-8"
         style="font-size: 20px"
-        @click="toUrl(user.themeInfo?.userManualUrl)"
+        @click="toUrl(theme.themeInfo?.userManualUrl)"
       ></AppIcon>
     </el-tooltip>
     <el-tooltip
       effect="dark"
       :content="$t('layout.forum')"
       placement="top"
-      v-if="user.themeInfo?.showForum"
+      v-if="theme.themeInfo?.showForum"
     >
       <AppIcon
         iconName="app-help"
         class="cursor color-secondary mr-16 ml-8"
         style="font-size: 20px"
-        @click="toUrl(user.themeInfo?.forumUrl)"
+        @click="toUrl(theme.themeInfo?.forumUrl)"
       ></AppIcon>
     </el-tooltip>
   </div>
 </template>
 <script setup lang="ts">
 import useStore from '@/stores'
-const { user } = useStore()
+const { theme } = useStore()
 function toUrl(url: string) {
   window.open(url, '_blank')
 }