feat(resources): add resource manager plugin

Author: betterdancing

packages/configurator/src/index.ts

@@ -29,6 +29,7 @@ import SwitchConfigurator from './switch-configurator/SwitchConfigurator.vue'
 import TableColumnsConfigurator from './table-columns-configurator/TableColumnsConfigurator.vue'
 import TabsGroupConfigurator from './tabs-group-configurator/TabsGroupConfigurator.vue'
 import VariableConfigurator from './variable-configurator/VariableConfigurator.vue'
+import SourceSelectConfigurator from './source-select-configurator/SourceSelectConfigurator.vue'
 
 import { I18nInput, MetaCodeEditor } from '@opentiny/tiny-engine-common'
 import './styles/vars.less'
@@ -65,6 +66,7 @@ export {
   TableColumnsConfigurator,
   TabsGroupConfigurator,
   VariableConfigurator,
+  SourceSelectConfigurator,
   MetaCodeEditor,
   I18nInput as I18nConfigurator,
   MetaCodeEditor as CodeConfigurator,

packages/configurator/src/source-select-configurator/SourceSelectConfigurator.vue

@@ -17,13 +17,14 @@
         </div>
         <div class="source-content">
           <div class="source-filter">
-            <tiny-select v-model="sourceCategory" :options="categoryOptions" placeholder="请选择分组" @change="categoryChange"> </tiny-select>
-            <tiny-search
-              class="search"
-              v-model="searchWords"
-              placeholder="按资源名称搜索"
-              clearable
+            <tiny-select
+              v-model="sourceCategory"
+              :options="categoryOptions"
+              placeholder="请选择分组"
+              @change="categoryChange"
             >
+            </tiny-select>
+            <tiny-search class="search" v-model="searchWords" placeholder="按资源名称搜索" clearable>
               <template #prefix>
                 <tiny-icon-search />
               </template>
@@ -45,7 +46,12 @@
           <div class="source-list">
             <div v-for="(item, index) in sourceList" :key="item.id" class="source-item">
               <img :src="item.thumbnailUrl ?? item.resourceUrl" />
-              <tiny-radio v-model="selectedSourceIndex" @change="selectSource(index)" :label="index" text=""></tiny-radio>
+              <tiny-radio
+                v-model="selectedSourceIndex"
+                @change="selectSource(index)"
+                :label="index"
+                text=""
+              ></tiny-radio>
               <div class="source-name-wrap">
                 <span :title="item.name">{{ item.name }}</span>
               </div>
@@ -68,12 +74,12 @@
   </div>
 </template>
 <script>
-import { ref, reactive, watch } from 'vue'
-import { Popover, Button, Input, Search, Select, Divider, RadioGroup, Radio } from '@opentiny/vue'
+import { ref, watch } from 'vue'
+import { Popover, Button, Input, Search, Select, Divider, Radio } from '@opentiny/vue'
 import { iconClose, iconSearch } from '@opentiny/vue-icon'
 import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useNotify } from '@opentiny/tiny-engine-meta-register'
-import { fetchResourceListByGroupId, fetchResourceGroupByAppId } from './http'
+import { fetchResourceGroupByAppId } from './http'
 
 const isShow = ref(false)
 
@@ -94,7 +100,6 @@ export default {
     TinySelect: Select,
     TinyDivider: Divider,
     TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
     SearchEmpty,
     TinyIconClose: iconClose(),
     TinyIconSearch: iconSearch()
@@ -126,26 +131,28 @@ export default {
     const selectedSourceIndex = ref()
 
     const getResourceData = () => {
-      fetchResourceGroupByAppId().then((res) => {
-        categoryData.value = res
-        categoryOptions.value = res.map((item) => ({ label: item.name, value: item.id, resources: item.resources }))
-        if (categoryOptions.value.length) {
-          sourceCategory.value = categoryOptions.value[0].value
-          sourceOriginList.value = categoryOptions.value[0].resources
-          sourceList.value = categoryOptions.value[0].resources
-          openPopover()
-        }
-      }).catch(error => {
-        useNotify({
-          type: 'error',
-          message: error
+      fetchResourceGroupByAppId()
+        .then((res) => {
+          categoryData.value = res
+          categoryOptions.value = res.map((item) => ({ label: item.name, value: item.id, resources: item.resources }))
+          if (categoryOptions.value.length) {
+            sourceCategory.value = categoryOptions.value[0].value
+            sourceOriginList.value = categoryOptions.value[0].resources
+            sourceList.value = categoryOptions.value[0].resources
+            openPopover()
+          }
+        })
+        .catch((error) => {
+          useNotify({
+            type: 'error',
+            message: error
+          })
         })
-      })
     }
 
     const categoryChange = () => {
-      sourceOriginList.value = categoryData.value.find(item => item.id === sourceCategory.value).resources
-      sourceList.value = sourceOriginList.value.filter(item => item.name.includes(searchWords.value))
+      sourceOriginList.value = categoryData.value.find((item) => item.id === sourceCategory.value).resources
+      sourceList.value = sourceOriginList.value.filter((item) => item.name.includes(searchWords.value))
     }
 
     const selectSource = (sourceIndex) => {
@@ -164,7 +171,7 @@ export default {
     watch(
       () => searchWords.value,
       () => {
-        sourceList.value = sourceOriginList.value.filter(item => item.name.includes(searchWords.value))
+        sourceList.value = sourceOriginList.value.filter((item) => item.name.includes(searchWords.value))
       }
     )
 
@@ -286,7 +293,7 @@ export default {
       gap: 16px;
 
       .empty-wrap {
-        width: 100%
+        width: 100%;
       }
 
       .source-item {

packages/design-core/registry.js

@@ -40,6 +40,7 @@ import {
   Block,
   Datasource,
   Robot,
+  Resource,
   Props,
   Events,
   Styles,
@@ -160,7 +161,8 @@ export default {
     __TINY_ENGINE_REMOVED_REGISTRY['engine.plugins.state'] === false ? null : State,
     __TINY_ENGINE_REMOVED_REGISTRY['engine.plugins.schema'] === false ? null : Schema,
     __TINY_ENGINE_REMOVED_REGISTRY['engine.plugins.editorhelp'] === false ? null : Help,
-    __TINY_ENGINE_REMOVED_REGISTRY['engine.plugins.robot'] === false ? null : Robot
+    __TINY_ENGINE_REMOVED_REGISTRY['engine.plugins.robot'] === false ? null : Robot,
+    __TINY_ENGINE_REMOVED_REGISTRY['engine.plugins.resource'] === false ? null : Resource
   ],
   settings: [
     __TINY_ENGINE_REMOVED_REGISTRY['engine.setting.props'] === false ? null : Props,

packages/plugins/resource/package.json

@@ -37,6 +37,7 @@
   },
   "peerDependencies": {
     "@opentiny/vue": "^3.20.0",
+    "@opentiny/vue-icon": "^3.20.0",
     "vue": "^3.4.15"
   }
 }

packages/plugins/resource/src/Main.vue

@@ -21,6 +21,7 @@
         <div class="resouce-list">
           <div
             v-for="item in resourceList"
+            :key="item.id"
             :class="['resource-item', { 'active-item': item.active }]"
             @click="openResourceList(item)"
           >
@@ -40,7 +41,7 @@
 </template>
 <script>
 import { ref, reactive, provide, onMounted } from 'vue'
-import { useLayout, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useNotify } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel, SvgButton, SearchEmpty } from '@opentiny/tiny-engine-common'
 import ResourceSetting, { openResourceSettingPanel, closeResourceSettingPanel } from './ResourceSetting.vue'
 import ResourceList, { openResourceListPanel, closeResourceListPanel } from './ResourceList.vue'
@@ -81,6 +82,16 @@ export default {
       emit('close')
     }
 
+    const setItemActive = (data) => {
+      resourceList.value.forEach((item) => {
+        if (data.id === item.id) {
+          item.active = true
+        } else {
+          item.active = false
+        }
+      })
+    }
+
     const openCategoryForm = (data) => {
       if (data) {
         setItemActive(data)
@@ -92,19 +103,16 @@ export default {
     }
 
     const getCategoryList = () => {
-      fetchResourceGroupByAppId().then(res => {
-        resourceList.value = res
-      })
-    }
-
-    const setItemActive = (data) => {
-      resourceList.value.forEach((item) => {
-        if (data.id === item.id) {
-          item.active = true
-        } else {
-          item.active = false
-        }
-      })
+      fetchResourceGroupByAppId()
+        .then((res) => {
+          resourceList.value = res
+        })
+        .catch((error) => {
+          useNotify({
+            type: 'error',
+            message: error
+          })
+        })
     }
 
     const createCategory = () => {

packages/plugins/resource/src/ResourceList.vue

@@ -29,7 +29,7 @@
           </div>
         </div>
         <div class="source-list-wrap">
-          <div v-for="item in state.sourceList" class="source-list-item">
+          <div v-for="item in state.sourceList" :key="item.id" class="source-list-item">
             <div class="source-image-wrap">
               <img :src="item.thumbnailUrl ?? item.resourceUrl" />
               <tiny-checkbox
@@ -78,6 +78,7 @@
           :multiple="true"
           :auto-upload="false"
           :show-file-list="false"
+          action="#"
           @change="chooseFileChange"
         >
           <template #trigger>
@@ -205,9 +206,7 @@ export default {
     SearchEmpty,
     TinyIconPopup: iconPopup()
   },
-  props: {},
-  emits: ['close'],
-  setup(props, { emit }) {
+  setup() {
     const { PLUGIN_NAME, getPluginByLayout } = useLayout()
     const { toClipboard } = useClipboard()
     const { confirm } = useModal()
@@ -228,20 +227,23 @@ export default {
     const addSourceData = ref([])
 
     const validRules = {
-      name: [{ required: true, message: '资源名称必填' }, {
-        type: 'string',
-        validator: ({ row }, value) => {
-          return new Promise((resolve, reject) => {
-            if (!/^[a-zA-Z0-9_-]+\.(png|jpg|jpeg|svg)$/.test(value)) {
-              reject(new Error('资源名成只能包含字母、数字、_和-等字符，且须以文件后缀名结尾'))
-            } else if (addSourceData.value.find(item => item._RID !== row._RID && item.name === value)) {
-              reject(new Error('已存在的资源名称'))
-            } else {
-              resolve()
-            }
-          })
+      name: [
+        { required: true, message: '资源名称必填' },
+        {
+          type: 'string',
+          validator: ({ row }, value) => {
+            return new Promise((resolve, reject) => {
+              if (!/^[a-zA-Z0-9_-]+\.(png|jpg|jpeg|svg)$/.test(value)) {
+                reject(new Error('资源名成只能包含字母、数字、_和-等字符，且须以文件后缀名结尾'))
+              } else if (addSourceData.value.find((item) => item._RID !== row._RID && item.name === value)) {
+                reject(new Error('已存在的资源名称'))
+              } else {
+                resolve()
+              }
+            })
+          }
         }
-      }],
+      ],
       resourceUrl: {
         type: 'string',
         validator: ({ row }, value) => {
@@ -337,7 +339,7 @@ export default {
               })
               .filter((source) => source !== null)
           })
-            .then((res) => {
+            .then(() => {
               getSourceList()
             })
             .catch((error) => {
@@ -367,14 +369,14 @@ export default {
             description: state.group.description,
             resources: state.sourceList
               .map((source) => {
-                if (selectedSources.value.find(item => item.id === source.id)) {
+                if (selectedSources.value.find((item) => item.id === source.id)) {
                   return null
                 }
                 return { id: source.id }
               })
               .filter((source) => source !== null)
           })
-            .then((res) => {
+            .then(() => {
               getSourceList()
             })
             .catch((error) => {
@@ -422,7 +424,6 @@ export default {
 
     const submitSourceAdd = () => {
       addSourceGridRef.value.validate((valid) => {
-        console.log(valid)
         if (!valid) {
           return
         }
@@ -436,7 +437,7 @@ export default {
           }
         })
         batchCreateResource(params)
-          .then((res) => {
+          .then(() => {
             getSourceList()
             enableUrlForm.value = false
             addSourceData.value = []
@@ -456,7 +457,7 @@ export default {
 
     watch(
       () => state.group.id,
-      (groupId) => {
+      () => {
         getSourceList()
       }
     )

packages/plugins/resource/src/ResourceSetting.vue

@@ -35,7 +35,7 @@
 <script>
 import { ref, reactive, computed } from 'vue'
 import { Button, Collapse, CollapseItem, Form, FormItem, Input } from '@opentiny/vue'
-import { useLayout, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useNotify } from '@opentiny/tiny-engine-meta-register'
 import { PluginSetting, ButtonGroup, SvgButton } from '@opentiny/tiny-engine-common'
 import { createResourceGroup, updateResourceGroup } from './js/http'
 
@@ -53,7 +53,6 @@ const state = reactive({
 export const openResourceSettingPanel = (data) => {
   if (data) {
     state.data = { ...data }
-    console.log(state.data)
   }
   isShow.value = true
 }
@@ -87,9 +86,12 @@ export default {
     })
     const saveResourceSetting = () => {
       generalForm.value.validate((valid) => {
+        if (!valid) {
+          return
+        }
         if (state.data.id) {
           updateResourceGroup(state.data.id, { name: state.data.name, description: state.data.description })
-            .then((res) => {
+            .then(() => {
               emit('create-group')
               closeResourceSettingPanel()
               useNotify({ message: '修改资源分组成功', type: 'success' })
@@ -99,7 +101,7 @@ export default {
             })
         } else {
           createResourceGroup(state.data)
-            .then((res) => {
+            .then(() => {
               emit('create-group')
               closeResourceSettingPanel()
               useNotify({ message: '添加资源分组成功', type: 'success' })