init : 初始化仓库

2024-08-18 22:21:18 +08:00
commit 934b3b7b74
366 changed files with 55148 additions and 0 deletions
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
--- a/src/components/ParentView.vue
+++ b/src/components/ParentView.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>
--- a/src/components/PointTag.vue
+++ b/src/components/PointTag.vue
@@ -0,0 +1,95 @@
+<template>
+  <div style="display: flex;justify-content: center">
+    <span class="stateIcon" :style="{backgroundColor: filterDictClass(cacheStore.getDict(dictType), value)}"></span>
+    <span>{{tag.label}}</span>
+    <span> {{ filterDict(cacheStore.getDict(dictType), value) }}</span>
+  </div>
+</template>
+
+<script setup>
+import {defineProps} from "vue";
+import {useCacheStore} from "@/stores/cache.js";
+
+const cacheStore = useCacheStore();
+const props = defineProps({
+  dictType: {
+    type: String,
+    default: ""
+  },
+  value: {
+    type: Object,
+    default: null
+  }
+});
+const tag = reactive({
+  listClass: "green",
+  isType: true,
+  label: ""
+});
+// const dictList = cacheStore.getDict(props.dictType);
+// const dictFormat =  () => {
+//   if(dictList===undefined) return;
+//   for (let i = 0; i < dictList.length; i++) {
+//     if(dictList[i].value=== props.value){
+//       tag.label = dictList[i].label;
+//       tag.listClass=changeParams(dictList[i].listClass)
+//       tag.isType = dictList[i].isType;
+//     }
+//   }
+// };
+const filterDictClass = (data, value) => {
+  if(!data) return
+
+  if(data instanceof Array) {
+    tag.value = data.find(item => item.value == value)
+  }
+  return changeParams(tag.value.listClass)
+}
+const filterDict = (data, value) => {
+  if(!data) return
+
+  if(data instanceof Array) {
+    tag.value = data.find(item => item.value == value)
+  }
+  return tag.value.label
+}
+/**
+ * 根据接口返回的listClass切换成对应的颜色
+ * @param listClass 后端返回的listClass字段
+ * @returns {string}
+ */
+const changeParams = (listClass) => {
+  switch (listClass) {
+    case 'danger':
+      return 'red'
+    case 'success':
+      return  '#67C23A'
+    case 'info':
+      return  '#909399'
+    case 'primary':
+      return '#409EFF'
+    case 'warning':
+      return  '#E6A23C'
+    default:
+      return listClass
+  }
+}
+// dictFormat()
+</script>
+
+<style scoped lang="scss">
+//.dot{
+//  width:8px;
+//  height: 20px;
+//  margin-left: -5px;
+//  background-color: green;
+//  z-index: 99999;
+//}
+:deep(.el-tag){
+  position: relative;
+  margin-top: 9px;
+  margin-right: 7px;
+  height: 8px;
+
+}
+</style>
--- a/src/components/PopoverDelete.vue
+++ b/src/components/PopoverDelete.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-popconfirm
+      confirm-button-text="确认"
+      cancel-button-text="取消"
+      icon="WarningFilled"
+      icon-color="#E6A23C"
+      :title="title"
+      @confirm="handleDelete"
+      @cancel="handleCancel"
+  >
+    <template #reference>
+      <el-button :type="btnType" size="mini" v-perm="perm" :disabled="isDisabled" :icon="btnIcon" :plain="isPlain">
+        {{ btnText }}
+      </el-button>
+    </template>
+  </el-popconfirm>
+</template>
+
+<script setup>
+const props = defineProps({
+  name: {
+    type: Object,
+    default: null
+  },
+  btnType: {
+    type: String,
+    default: 'text'
+  },
+  type: {
+    type: String,
+    default: ''
+  },
+  btnIcon: {
+    type: String,
+    default: ''
+  },
+  btnText: {
+    type: String,
+    default: '删除'
+  },
+  perm: {
+    type: Array,
+    default: ['']
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isPlain: {
+    type: Boolean,
+    default: false
+  },
+})
+const emit = defineEmits()
+const title = ref(`确认${props.btnText}名称为"${props.name}"的${props.type}吗!`)
+const visible = ref(false)
+watch(() => props.name, (newVal) => {
+  title.value = "确认" + props.btnText + "名称为" + '"' + props.name + '"' + "的" + props.type + "吗!"
+})
+const handleCancel = () => {
+  visible.value = false
+}
+const handleDelete = () => {
+  emit("delete")
+}
+</script>
+
+<style lang="scss">
+.el-popconfirm__main {
+  display: flex;
+  word-break: break-all;
+  align-items: center;
+}
+</style>
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="tag-style">
+    <el-tag v-if="tagConfig.isType" :type="tagConfig.listClass" :effect="tagConfig.theme || 'plain'">
+      {{ filterDict(cacheStore.getDict(dictType), value) }}
+    </el-tag>
+    <el-tag v-else :color="tagConfig.listClass" :effect="tagConfig.theme || 'plain'"
+            :class="{'null-tag':filterDict(cacheStore.getDict(dictType), value)===undefined}">
+      {{ filterDict(cacheStore.getDict(dictType), value) }}
+    </el-tag>
+  </div>
+</template>
+
+<script setup>
+import {useCacheStore} from "@/stores/cache.js";
+import {defineProps, nextTick} from "vue";
+
+const cacheStore = useCacheStore();
+
+const props = defineProps({
+  dictType: {
+    type: String,
+    default: "",
+    required: true
+  },
+  value: {
+    type: String || Number,
+    default: null
+  }
+});
+
+const tagConfig = ref({})
+
+const filterDict = (data, value) => {
+  console.log(value + "aaa",!data || !value)
+  if (!data || value == null) return
+  if (data instanceof Array) {
+    if (value == true || value == false) {
+      tagConfig.value = data.find(item => item.value == value.toString())
+    } else if (typeof value === "object") {
+      if (value !== null) {
+        tagConfig.value = data.find(item => item.value == value[0])
+      } else {
+        tagConfig.value = {}
+      }
+    } else {
+      tagConfig.value = data.find(item => item.value == value)
+    }
+  }
+  return tagConfig.value.label
+}
+</script>
+
+<style scoped lang="scss">
+.tag-style {
+  :deep(.el-tag.el-tag--dark) {
+    border-color: transparent !important;
+  }
+
+  .null-tag {
+    border-color: transparent;
+    background-color: transparent;
+  }
+}
+</style>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -0,0 +1,86 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
--- a/src/components/Tinymce.vue
+++ b/src/components/Tinymce.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="tinymce-boxz">
+    <Editor v-model="content" :init="init"/>
+  </div>
+</template>
+
+<script setup>
+import tinymce from 'tinymce'
+import Editor from "@tinymce/tinymce-vue";
+import {defineProps} from "vue";
+import {ElMessage} from "element-plus";
+import {getToken} from '@/utils/auth'
+import axios from "axios";
+
+import 'tinymce/themes/silver'
+import 'tinymce/icons/default/icons'
+import 'tinymce/plugins/preview'
+import 'tinymce/plugins/searchreplace'
+import 'tinymce/plugins/autolink'
+import 'tinymce/plugins/directionality'
+import 'tinymce/plugins/visualblocks'
+import 'tinymce/plugins/visualchars'
+import 'tinymce/plugins/advlist'
+import 'tinymce/plugins/fullscreen'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/media'
+import 'tinymce/plugins/template'
+import 'tinymce/plugins/code'
+import 'tinymce/plugins/codesample'
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/pagebreak'
+import 'tinymce/plugins/nonbreaking'
+import 'tinymce/plugins/anchor'
+import 'tinymce/plugins/insertdatetime'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/wordcount'
+import 'tinymce/plugins/autosave'
+
+const emit = defineEmits(['update:value'])
+const props = defineProps({
+  //默认值
+  value: {
+    type: String,
+    default: "",
+  },
+  imageUrl: {
+    type: String,
+    default: "",
+  },
+  fileUrl: {
+    type: String,
+    default: "",
+  },
+  plugins: {
+    type: [String, Array],
+    default:
+        "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave",
+  },
+  toolbar: {
+    type: [String, Array],
+    default: [
+      "fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ",
+      "styleselect formatselect fontselect fontsizeselect |  table image axupimgs media  pagebreak insertdatetime  selectall visualblocks searchreplace | code preview | indent2em lineheight formatpainter",
+    ],
+  },
+  fontFormats: {
+    type: [String, Array],
+    default: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;"
+  }
+})
+const content = ref(props.value);
+const imgUrl = ref();
+// const apiKey = reactive("v4zo4n22oanvco29ws5drh0pecuf3gh53clx53cccj3grjwg");
+const init = reactive({
+  language_url: '/langs/zh_CN.js', //汉化路径是自定义的
+  skin_url: '/skins/ui/oxide', //皮肤
+  content_css: '/skins/content/default/content.css',
+  language: 'zh_CN',
+  placeholder: "在这里输入文字", //textarea中的提示信息
+  min_width: 320,
+  min_height: 220,
+  height: 500, //注：引入autoresize插件时，此属性失效
+  resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
+  promotion: false,
+  branding: false, //tiny技术支持信息是否显示
+  // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
+  // elementpath: false, //元素路径是否显示
+  font_formats: props.fontFormats,  //字体样式
+  plugins: props.plugins, //插件配置 axupimgs indent2em
+  toolbar: props.toolbar, //工具栏配置，设为false则隐藏
+  // menubar: "file edit my1", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
+  // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
+  // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
+  paste_data_images: true, //图片是否可粘贴
+  file_picker_types: "file image media", //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数
+  // 文件上传处理函数
+  setup: function (editor) {
+    editor.on('change', function (e) {
+      tinymce.activeEditor.save();//执行自动保存
+    });
+  },
+  //此处为图片上传处理函数
+  images_upload_handler: (blobInfo, success) => {
+    // new Promise((resolve, reject) => {
+    let formData = new FormData()
+    formData.append('file', blobInfo.blob())
+    //上传图片接口 上传成功后返回图片地址，用于显示在富文本中
+    uploadFile(formData, props.imageUrl, success)
+    // }),
+  },
+  file_picker_callback: (callback, value, meta) => {
+    // console.log('callback, value, meta',callback, value, meta)
+    // 使用案例http://tinymce.ax-z.cn/general/upload-images.php
+    // meta.filetype  //根据这个判断点击的是什么file image media
+    let filetype; //限制文件的上传类型,需要什么就添加什么的后缀
+    if (meta.filetype == "image") {
+      filetype = ".jpg, .jpeg, .png, .gif, .ico, .svg";
+    } else if (meta.filetype == "media") {
+      filetype = ".mp3, .mp4, .avi, .mov";
+    } else {
+      filetype =
+          ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg, .jpeg, .png, .gif, .ico, .svg";
+    }
+    let inputElem = document.createElement("input"); //创建文件选择
+    inputElem.setAttribute("type", "file");
+    inputElem.setAttribute("accept", filetype);
+    inputElem.click();
+    inputElem.onchange = () => {
+      let file = inputElem.files[0]; //获取文件信息
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function () {
+        let id = "blobid" + new Date().getTime();
+        let blobCache = tinymce.activeEditor.editorUpload.blobCache;
+        let base64 = reader.result.split(",")[1];
+        let blobInfo = blobCache.create(id, file, base64);
+        blobCache.add(blobInfo);
+        callback(blobInfo.blobUri(), {alt: file.name});
+      };
+    };
+  },
+});
+//内容有变化，就更新内容，将值返回给父组件
+watch(() => {
+  emit("update:value", content.value);
+});
+const uploadFile = (formData, url,success) => {
+  axios.post(
+      import.meta.env.VITE_BASE_URL + url,
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: getToken()
+        }
+      }
+  ).then(res => {
+    // if (res.status !== 200) {
+    //   ElMessage.error("上传失败!")
+    // }
+    let data = res.data
+    if (data.code !== 1000) {
+      ElMessage.error(data.msg)
+    }else {
+      success(data.data.url)
+    }
+  })
+}
+</script>
+<style scoped>
+.tinymce-boxz > textarea {
+  display: none;
+}
+</style>
+<style>
+/* 隐藏apikey没有绑定当前域名的提示 */
+.tox-notifications-container .tox-notification--warning {
+  display: none !important;
+}
+
+.tox.tox-tinymce {
+  max-width: 100%;
+}
+</style>
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
--- a/src/components/codeEdit/JavaCodeEdit.vue
+++ b/src/components/codeEdit/JavaCodeEdit.vue
@@ -0,0 +1,69 @@
+<template>
+  <codemirror
+      v-model="javaCode"
+      :placeholder="editorPlaceholder"
+      :style="{ height: editorHeight+'px' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tabSize="tabSize"
+      :extensions="extensions"
+      :scrollbarStyle="null"
+  />
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {java, javaLanguage} from "@codemirror/lang-java";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const javaCode = ref();
+const customJavaCodeTips = (context) => {
+  let word = context.matchBefore(/\w*/)
+  if (word.from == word.to && !context.explicit) return null;
+  return {
+    from: word.from?word.from:context.pos,
+    options: [
+      {label: "function", type: "keyword",apply:"function name(params) {\n\t\n}",detail: "definition"},
+      // {label: "hello", type: "variable", info: "(World)"},
+      {label: "fori", type: "keyword",apply:"for (let i = 0; i < list.length; i++) {\n\n}", detail: "loop"},
+      {label: "for", type: "keyword",apply:"for (let name of list) {\n\n}", detail: "of loop"},
+      {label: "psf", type: "keyword",apply:"public static final ", detail: "public static final"},
+      {label: "psv", type: "keyword",apply:"public static void name(){\n\n}", detail: "public static void"},
+      {label: "psfi", type: "keyword",apply:"public static final int ", detail: "public static final int"},
+      {label: "psfs", type: "keyword",apply:"public static final String ", detail: "public static final String"},
+      {label: "psvm", type: "keyword", apply: "public static void main(String[] args){\n\t\n}", detail: "main() 方法声明"}
+    ]
+  }
+}
+
+const javaSnippets = javaLanguage.data.of({
+  autocomplete: customJavaCodeTips,
+})
+const extensions = ref([java(), javaSnippets]);
+</script>
--- a/src/components/codeEdit/JsCodeEdit.vue
+++ b/src/components/codeEdit/JsCodeEdit.vue
@@ -0,0 +1,48 @@
+<template>
+    <codemirror
+        v-model="jsCode"
+        :placeholder="editorPlaceholder"
+        :style="{ height: editorHeight+'px' }"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tabSize="tabSize"
+        :extensions="extensions"
+        :scrollbarStyle="null"
+    />
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {javascript} from "@codemirror/lang-javascript";
+import {defineEmits, ref, defineProps, computed} from "vue";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const jsCode = ref();
+const extensions = ref([javascript()]);
+</script>
--- a/src/components/codeEdit/SqlCodeEdit.vue
+++ b/src/components/codeEdit/SqlCodeEdit.vue
@@ -0,0 +1,83 @@
+<template>
+    <codemirror
+        v-model="sqlCode"
+        :placeholder="editorPlaceholder"
+        :style="{ height: editorHeight+'px' }"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tabSize="tabSize"
+        :extensions="extensions"
+        :scrollbarStyle="null"
+        @change="emit('change',$event)"
+    />
+<!--    <div class="sql-format">-->
+<!--      <span @click="formatSql">格式化SQL</span>-->
+<!--      <span @click="clearVal">一键清空</span>-->
+<!--    </div>-->
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {sql} from '@codemirror/lang-sql';
+import {defineEmits, ref, defineProps, computed} from "vue";
+import * as sqlFormatter from "sql-formatter";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const sqlCode = ref(_value);
+const extensions = ref([sql()]);
+//代码格式化
+const formatSql = () => {
+  sqlCode.value=sqlFormatter.format(sqlCode.value)
+}
+// 清除值
+const clearVal = () => {
+  sqlCode.value=''
+}
+</script>
+<style scoped lang="scss">
+.sql-format {
+  background-color: #f7f7f7;
+  text-align: right;
+  color: #2a99ff;
+  padding: 10px;
+
+  span:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  > span:first-child {
+    margin-right: 10px;
+  }
+}
+::v-deep .cm-line{
+  font-size: 16px;
+}
+</style>
--- a/src/components/iconSelect/index.vue
+++ b/src/components/iconSelect/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <el-select v-model="iconName" placeholder="请选择菜单图标" clearable filterable @change="selectIcon" :teleported="false"
+              class="icon-select">
+    <el-option
+        v-for="item in iconList"
+        :value="item"
+        :label="item"
+    >
+      <svg-icon :name="item" :class-name="'middle-icon'"/>
+      <span class="icon-name">{{ item }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup>
+import iconArray from './requireIcons.js'
+import SvgIcon from '@/components/svgIcon/index.vue'
+const emit = defineEmits(["getSelectIcon"])
+const props = defineProps({
+  activeIcon: {
+    type: String,
+    default: ''
+  }
+})
+const iconName=ref(props.activeIcon)
+const iconList = ref(iconArray)
+watch(() => props.activeIcon, (value) => {
+  iconName.value = value
+})
+const selectIcon = (val) => {
+  emit("getSelectIcon", val)
+}
+</script>
--- a/src/components/iconSelect/requireIcons.js
+++ b/src/components/iconSelect/requireIcons.js
@@ -0,0 +1,12 @@
+const iconArray=[]
+const files = import.meta.glob("@/assets/svg/*.svg",{eager:true})
+for (const key of Object.entries(files)) {
+  let item =key[0]
+  const lastIndex=item.lastIndexOf("\/")
+  //svg图标名(带后缀svg)
+  item=item.substring(lastIndex+1,item.length)
+  //svg图标名字,剔除后缀.svg
+  item=item.substring(0,item.lastIndexOf("\."))
+  iconArray.push(item)
+}
+export default iconArray
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconTooling.vue
+++ b/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
--- a/src/components/pagination/index.vue
+++ b/src/components/pagination/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <el-config-provider :locale="locale">
+    <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="pageSizes"
+      :background="isBackground"
+      :small="small"
+      :disabled="disabled"
+      layout="->,total, sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+const emit = defineEmits(['goPage', 'changeSize','handleTop'])
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 0,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  pageSizes: {
+    type: Object,
+    default(rawProps) {
+      return [10, 15, 20, 30, 50]
+    },
+  },
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isBackground: {
+    type: Boolean,
+    default: false,
+  },
+})
+//中文
+const locale = zhCn
+//总条数
+const total = ref(0)
+//对应页数
+const currentPage = ref(1)
+//每页多少条
+const pageSize = ref(10)
+//默认每页多少条的数组
+const pageSizes = ref([])
+//是否使用小型分页样式
+const small = ref(false)
+//是否禁用分页
+const disabled = ref(false)
+//分页大小
+const handleSizeChange = limit => {
+  emit('changeSize', limit)
+  emit('handleTop')
+}
+//分页切换
+const handleCurrentChange = page => {
+  emit('goPage', page)
+  emit('handleTop')
+}
+watchEffect(() => {
+  total.value = props.total
+  pageSizes.value = props.pageSizes
+})
+</script>
--- a/src/components/svgIcon/index.vue
+++ b/src/components/svgIcon/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <template v-if="elementIcon">
+    <template v-if="title === ''">
+      <el-icon @click="handle">
+        <component :is="name"/>
+      </el-icon>
+    </template>
+    <template v-else>
+      <span :title="title">
+        <el-icon @click="handle">
+          <component :is="name"/>
+        </el-icon>
+      </span>
+    </template>
+  </template>
+  <template v-else>
+    <template v-if="title === ''">
+      <svg :class="svgClass" aria-hidden="true" @click="handle">
+        <use :xlink:href="symbolId"/>
+      </svg>
+    </template>
+    <template v-else>
+      <span :title="title">
+        <svg :class="svgClass" aria-hidden="true" @click="handle">
+          <use :xlink:href="symbolId"/>
+        </svg>
+      </span>
+    </template>
+  </template>
+
+</template>
+
+<script setup>
+import {defineProps, computed} from 'vue'
+
+const emit = defineEmits(["handle"]);
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  className: {
+    type: String
+  }
+})
+
+const symbolId = computed(() => {
+  return `#icon-${props.name}`;
+})
+const svgClass = computed(() => {
+  if (props.className) {
+    return props.className
+  } else {
+    return 'svg-icon'
+  }
+})
+
+const elementIcon = computed(() => {
+  if (props.name === '') {
+    return false;
+  }
+  if (props.name) {
+    let initial = props.name.toString().substr(0, 1).charCodeAt()
+    return (initial >= 65 && initial <= 90);
+  }
+})
+const handle = () => {
+  emit('handle');
+}
+</script>