feat: 添加函数管理

src/renderer/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElAutoComplete: typeof import('element-plus/es')['ElAutoComplete']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']

src/renderer/src/components/ViewTitle/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="h-32px bg-bg-secondary">
-    <div class="px-12px leading-32px text-text-primary font-bold flex items-center justify-between">
+  <div class="h-32px bg-bg-secondary border-b-1px border-b-solid border-border border-box">
+    <div class="px-16px leading-30px text-text-primary font-bold flex items-center justify-between">
       <span class="flex-1">
         <slot>
           {{ title }}

src/renderer/src/locale/en_US.json

@@ -2,6 +2,6 @@
   "directory": "Directory",
   "widgetLibrary": "Widget Library",
   "resourceManager": "Resource Manager",
-  "codeView": "Code View",
+  "codeView": "function code",
   "projectJSON": "Project JSON"
 }

src/renderer/src/locale/zh_CN.json

@@ -2,6 +2,6 @@
   "directory": "目录",
   "widgetLibrary": "控件库",
   "resourceManager": "资源管理",
-  "codeView": "代码查看",
+  "codeView": "函数代码",
   "projectJSON": "项目JSON"
 }

src/renderer/src/model/index.ts

@@ -125,3 +125,14 @@ export const createFileResource = (path: string, type: 'image' | 'font' | 'other
     }
   }
 }
+
+/**
+ * 创建函数
+ */
+export const createMethod = () => {
+  return {
+    id: v4(),
+    name: 'func_name',
+    action: ''
+  }
+}

src/renderer/src/views/designer/sidebar/Method.vue

@@ -1,11 +1,40 @@
 <template>
-  <div>
-    <ViewTitle title="函数方法" />
+  <div class="w-full h-full">
+    <ViewTitle title="函数方法">
+      <template #right>
+        <el-button type="text" @click="handleAdd"><LuPlus size="14px" /></el-button>
+      </template>
+    </ViewTitle>
+    <el-scrollbar>
+      <MethodItem
+        v-for="item in projectStore.project?.methods || []"
+        :key="item.id"
+        :data="item"
+        @delete="handleDelete(item.id)"
+      />
+    </el-scrollbar>
   </div>
 </template>
 
 <script setup lang="ts">
 import ViewTitle from '@/components/ViewTitle/index.vue'
+import { LuPlus } from 'vue-icons-plus/lu'
+import MethodItem from './components/MethodItem.vue'
+import { useProjectStore } from '@/store/modules/project'
+import { createMethod } from '@/model'
+
+const projectStore = useProjectStore()
+
+const handleDelete = (id: string) => {
+  projectStore.project?.methods?.splice(
+    projectStore.project.methods.findIndex((item) => item.id === id),
+    1
+  )
+}
+
+const handleAdd = () => {
+  projectStore.project?.methods?.push(createMethod())
+}
 </script>
 
 <style scoped></style>

src/renderer/src/views/designer/sidebar/Resource.vue

@@ -3,7 +3,9 @@
     <SplitterCollapseItem title="图片">
       <template #header-right>
         <el-tooltip content="添加">
-          <span class="mr-12px" @click.capture.stop="handleAddImage"><LuPlus size="14px" /></span>
+          <el-button type="text" class="mr-12px" @click.capture.stop="handleAddImage"
+            ><LuPlus size="14px"
+          /></el-button>
         </el-tooltip>
       </template>
       <div class="w-full h-full flex flex-col">
@@ -25,7 +27,9 @@
     <SplitterCollapseItem title="字体">
       <template #header-right>
         <el-tooltip content="添加">
-          <span class="mr-12px" @click.capture.stop="handleAddFont"><LuPlus size="14px" /></span>
+          <el-button type="text" class="mr-12px" @click.capture.stop="handleAddFont"
+            ><LuPlus size="14px"
+          /></el-button>
         </el-tooltip>
       </template>
       <div class="w-full h-full flex flex-col">
@@ -47,7 +51,9 @@
     <SplitterCollapseItem title="其他数据">
       <template #header-right>
         <el-tooltip content="添加">
-          <span class="mr-12px" @click.capture.stop="handleAddOther"><LuPlus size="14px" /></span>
+          <el-button type="text" class="mr-12px" @click.capture.stop="handleAddOther"
+            ><LuPlus size="14px"
+          /></el-button>
         </el-tooltip>
       </template>
       <div class="w-full h-full flex flex-col">

src/renderer/src/views/designer/sidebar/components/MethodItem.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="border border-solid border-1px border-border rounded-2px m-4px" ref="contentRef">
+    <div
+      class="h-32px leading-24px flex items-center justify-between px-12px gap-4px cursor-pointer"
+      @click="expand = !expand"
+    >
+      <span>
+        <AiOutlineDown size="12px" v-if="expand" />
+        <AiOutlineRight size="12px" v-else />
+      </span>
+      <LuBox size="12px" />
+      <span class="flex-1 truncate" :title="title">
+        <el-input
+          size="small"
+          v-if="edit"
+          v-model.trim="title"
+          @keydown.enter="handleChangeName"
+          @blur="handleChangeName"
+        />
+        <span v-else>{{ data.name }}</span>
+      </span>
+      <span class="flex gap-4px items-center">
+        <LuPencilLine size="12px" @click.capture.stop="handleEdit" />
+        <el-popconfirm
+          :append-to="contentRef"
+          class="box-item"
+          title="确认删除?"
+          @confirm="$emit('delete')"
+        >
+          <template #reference>
+            <span class="cursor-pointer" @click.capture.stop><LuTrash2 size="14px" /></span>
+          </template>
+        </el-popconfirm>
+      </span>
+    </div>
+    <div class="my-12px text-12px px-12px text-text-secondary" v-if="expand">代码内容:</div>
+    <div class="border" v-if="expand">
+      <MonacoEditor v-model="data.action" :allow-fullscreen="false" language="C" bordered />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Method } from '@/types/method'
+
+import { ref, defineProps, defineEmits } from 'vue'
+import MonacoEditor from '@/components/MonacoEditor/index.vue'
+import { LuBox, LuPencilLine, LuTrash2 } from 'vue-icons-plus/lu'
+import { AiOutlineRight, AiOutlineDown } from 'vue-icons-plus/ai'
+
+const props = defineProps<{
+  data: Method
+}>()
+defineEmits(['delete'])
+
+const expand = ref(false)
+const edit = ref(false)
+const title = ref('')
+const contentRef = ref<HTMLDivElement>()
+
+const handleEdit = () => {
+  title.value = props.data.name
+  edit.value = true
+}
+const handleChangeName = () => {
+  if (title.value) {
+    props.data.name = title.value
+    edit.value = false
+  }
+}
+</script>
+
+<style scoped></style>

src/renderer/src/views/designer/sidebar/components/ResourceItem.vue

@@ -42,27 +42,26 @@
         </span>
       </el-tooltip>
     </span>
+    <el-dropdown
+      ref="dropdownRef"
+      :virtual-ref="triggerRef"
+      :show-arrow="false"
+      :popper-options="{
+        modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
+      }"
+      virtual-triggering
+      trigger="contextmenu"
+      placement="bottom-start"
+    >
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="openInExplorer">在资源管理器中打开</el-dropdown-item>
+          <el-dropdown-item @click="copyName">复制名称</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
   </p>
 
-  <el-dropdown
-    ref="dropdownRef"
-    :virtual-ref="triggerRef"
-    :show-arrow="false"
-    :popper-options="{
-      modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
-    }"
-    virtual-triggering
-    trigger="contextmenu"
-    placement="bottom-start"
-  >
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item @click="openInExplorer">在资源管理器中打开</el-dropdown-item>
-        <el-dropdown-item @click="copyName">复制名称</el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-
   <EditImageModal ref="editImageModalRef" @change="handleChangeResource" />
   <EditFontModal ref="editFontModalRef" @change="handleChangeResource" />
 </template>
@@ -79,7 +78,6 @@ import { BsFiletypeTtf, BsFiletypeWoff } from 'vue-icons-plus/bs'
 import fontImg from '@/assets/font.svg'
 import EditImageModal from './EditImageModal.vue'
 import EditFontModal from './EditFontModal.vue'
-import { ElMessage } from 'element-plus'
 
 defineEmits<{
   delete: []
@@ -132,7 +130,6 @@ const openInExplorer = () => {
 // 复制名称
 const copyName = () => {
   navigator.clipboard.writeText(props.data.fileName)
-  ElMessage.success('复制成功')
 }
 
 // 打开编辑

src/renderer/src/views/designer/sidebar/index.vue

@@ -60,7 +60,7 @@ import { ref, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { SplitterCollapse, SplitterCollapseItem } from '@/components/SplitterCollapse'
-import { LuFiles, LuBoxes, LuSquareCode, LuSettings2, LuInbox } from 'vue-icons-plus/lu'
+import { LuFiles, LuBoxes, LuSettings2, LuInbox, LuCode2 } from 'vue-icons-plus/lu'
 import Hierarchy from './Hierarchy.vue'
 import Libary from './Libary.vue'
 import Schema from './Schema.vue'
@@ -87,7 +87,7 @@ const sidebarMenu = [
   },
   {
     key: 'code',
-    title: h('span', null, h(LuSquareCode)),
+    title: h('span', null, h(LuCode2)),
     tooltip: t('codeView')
   },
   {