@arkxos/arkos-system 0.1.0

package/src/admin/components/icon/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    v-if="icon.type === 'svg' && icon.content"
+    v-html="icon.content"
+    class="ac-icon"
+    :style="{
+      'font-size': size ? (size + 'px') : 'inherit',
+      'color': color ? color : 'inherit'
+    }"
+  ></div>
+  <img
+    v-else-if="icon.type === 'base64' && icon.content"
+    :src="'data:image/png;base64,' + icon.content"
+    alt=""
+  />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { getIconList } from '@/utils/system';
+
+const props = defineProps({
+  modelValue: String,
+  iconId: {
+    type: String,
+    default: ''
+  },
+  size: [Number, String],
+  color: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: Object,
+    default: null
+  },
+});
+
+const icon = ref({});
+
+const init = async () => {
+  icon.value = '';
+  if (props.icon) {
+    icon.value = props.icon;
+  } else if (props.iconId) {
+    const iconList = await getIconList();
+    icon.value = iconList.find(item => item.id === props.iconId) || {};
+  } else if (props.modelValue) {
+    const iconList = await getIconList();
+    icon.value = iconList.find(item => item.id === props.modelValue) || {};
+  }
+};
+
+watch(() => props, (data) => {
+  init(data);
+}, { immediate: true, deep: 1 });
+</script>
+
+<style scoped>
+.ac-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  font-size: inherit;
+  width: 1em !important;
+  height: 1em !important;
+}
+
+.ac-icon svg {
+  width: 1em;
+  height: 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/admin/components/icon-buttons/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-radio-group
+    v-model="modelValue"
+    @change="handleChange"
+  >
+    <el-radio-button
+      v-for="item in options"
+      :key="item.key"
+      :value="item.key"
+    >
+      <ac-icon :iconId="item.value" />
+    </el-radio-button>
+  </el-radio-group>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  options: [Array, String],
+  showAll: {
+    type: Boolean,
+    default: false
+  },
+});
+
+const options = ref([]);
+
+const init = (data) => {
+  if (data) {
+    if (Array.isArray(data)) {
+      options.value = data;
+    } else if (typeof data === 'string') {
+      const optionList = [];
+      data.split(',').forEach(item => {
+        optionList.push({ key: item, value: item });
+      });
+      options.value = optionList;
+    }
+  }
+};
+
+const handleChange = (event) => {
+  emit('change', event);
+};
+
+watch(() => props.options, (data) => {
+  init(data);
+}, { immediate: true });
+</script>

package/src/admin/components/icon-select/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <span
+    @click="showDialog"
+    class="icon-select"
+    :style="'width:' + (props.size || '25px')
+      + '; height: ' + (props.size || '25px')
+      + (props.size ? ('; font-size: ' + props.size) : '')
+      "
+  >
+    <ac-icon v-if="modelValue" :iconId="modelValue" />
+    <ac-icon
+      v-else
+      color="rgb(153, 153, 153)"
+      :size="size"
+      iconId="018dca3b4707c4c43a2f"
+    />
+
+    <el-dialog
+      v-model="dialogVisible"
+      title="图标选择"
+      style="min-height: 500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+      draggable
+      append-to-body
+      fullscreen
+    >
+      <div style="width: 100%; text-align: center">
+        <el-input
+          v-model="searchValue"
+          placeholder="搜索"
+          style="width: 400px;
+          margin-right: 10px;"
+          clearable
+        />
+        <el-button type="danger" @click.stop="cleanIcon()">清空</el-button>
+      </div>
+      <div class="icon">
+        <div
+          v-for="(icon, index) in iconList.filter(item => searchValue ? item.name.indexOf(searchValue) >= 0 : true)"
+          :key="index"
+          class="icon-item"
+          @click.stop="selectIcon(icon)"
+        >
+          <div class="icon-item-icon" :title="icon.name">
+            <ac-icon size="30" :iconId="icon.id" />
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </span>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getIconList } from '@/utils/system';
+
+const modelValue = defineModel();
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  size: String,
+});
+
+const iconList = ref([]);
+const dialogVisible = ref(false);
+const searchValue = ref('');
+
+const showDialog = () => {
+  dialogVisible.value = true;
+}
+
+const selectIcon = (icon) => {
+  modelValue.value = icon.id;
+  dialogVisible.value = false;
+};
+
+const cleanIcon = () => {
+  modelValue.value = '';
+  dialogVisible.value = false;
+};
+
+onMounted(() => {
+  getIconList().then(res => {
+    iconList.value = res;
+  });
+});
+</script>
+
+<style scoped>
+.icon-select {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 4px;
+}
+.icon-select:hover {
+  border: 1px solid #cdd0d6;
+}
+.icon-select img {
+  width: 100%;
+}
+.icon {
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+  grid-gap: 10px;
+  justify-content: center;
+}
+.icon-item {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+.icon-item .icon-item-icon {
+  width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon-item .icon-item-icon img {
+  width: 100%;
+}
+.icon-item:hover {
+  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
+}
+</style>

package/src/admin/components/image/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div :style="'width: 100%; max-width: ' + props.width + 'px;height: ' + props.height + 'px'">
+    <span v-if="inputDisabled || props.showText" class="image-box">
+      <el-image
+        v-if="imageUrl !== ''"
+        preview-teleported
+        hide-on-click-modal
+        :src="imageUrl"
+        :preview-src-list="[imageUrl]"
+        style="width:100%;height:100%"
+        fit="scale-down"
+      />
+    </span>
+    <span v-else-if="!inputDisabled" class="image-edit-box">
+      <el-upload :class="['ac-image', {'is-disabled': inputDisabled}]" action=""
+        :disabled="inputDisabled"
+        :http-request = "handleUpload"
+        :show-file-list="false"
+        :accept="'image/*'"
+        :before-upload="handleBeforeUpload"
+      >
+        <ac-icon v-if="loading" size="30" color="#999" iconId="018dcab3d3dfd6e82393" class="spinner" />
+        <span v-else-if="imageUrl && !loading" class="image-item">
+          <ac-icon size="14" color="red" iconId="018dc9c3efd3a0502886" title="删除" @click.stop="deleteImage" />
+          <img :src="imageUrl" alt />
+        </span>
+        <ac-icon v-else size="30" color="#999" iconId="018dca3b4707c4c43a2f"></ac-icon>
+      </el-upload>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue'
+import { ElMessage, useDisabled, useFormItem } from 'element-plus';
+import api from '@/http/api';
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const props = defineProps({
+  modelValue: [Number, String],
+  width: {
+    type: Number,
+    default: 100
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  showText: Boolean
+});
+
+const loading = ref(false);
+const fileId = ref('');
+const imageUrl = ref('');
+const inputDisabled = useDisabled();
+const formItem = useFormItem();
+
+const handleUpload = (data) => {
+  return new Promise((resolve, reject) => {
+    api.upload({ file: data.file, builtin: '1', type: data.file.type }).then((res) => {
+      loading.value = false;
+      fileId.value = res.data.id;
+      imageUrl.value = URL.createObjectURL(data.file);
+      emit('update:modelValue', res.data.id);
+      nextTick(() => {
+        if (formItem && formItem.formItem) {
+          formItem.formItem.validate('change');
+        }
+      });
+      resolve();
+    }).catch(() => {
+      loading.value = false;
+      reject();
+    });
+  });
+};
+
+const handleBeforeUpload = (file) => {
+  if (loading.value) {
+    ElMessage.error('图片正在上传中，请稍候再试！');
+    return false;
+  }
+  loading.value = true;
+
+  const isImage = file.type.includes('image');
+  if (!isImage) {
+    loading.value = false;
+    ElMessage.error('上传文件类型必须是图片!');
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    loading.value = false;
+    ElMessage.error('上传图片大小不能超过 2MB!');
+  }
+  return isImage && isLt2M;
+};
+
+const deleteImage = () => {
+  fileId.value = '';
+  imageUrl.value = '';
+  emit('update:modelValue', '');
+  nextTick(() => {
+    if (formItem && formItem.formItem) {
+      formItem.formItem.validate('change');
+    }
+  });
+};
+
+const loadData = () => {
+  if ((props.modelValue || '') !== '') {
+    fileId.value = props.modelValue;
+    imageUrl.value = import.meta.env.VITE_IMAGE_PATH + fileId.value;
+  } else {
+    fileId.value = '';
+    imageUrl.value = '';
+  }
+};
+
+watch(() => props.modelValue, (newVal) => {
+  fileId.value = '';
+  imageUrl.value = '';
+
+  if ((newVal || '') === '' || (fileId.value || '') === '' || newVal !== fileId.value) {
+    loadData();
+  }
+});
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<style scoped>
+.ac-image {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border: 1px dashed #c2c2c2;
+}
+.ac-image :deep(.el-upload) {
+  display: flex;
+  text-align: center;
+  cursor: pointer;
+  outline: 0;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.ac-image :deep(.el-upload span) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ac-image:not(.is-disabled) :deep(.el-upload) {
+  cursor: pointer;
+}
+.ac-image:not(.is-disabled) :deep(.el-upload:hover) {
+  border-color: #409EFF;
+}
+.loading-icon {
+  font-size: 28px;
+  color: #8c939d;
+  position: absolute;
+}
+.plus-icon {
+  font-size: 28px;
+  color: #8c939d;
+  position: absolute;
+}
+.ac-image img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.image-box {
+  border: 1px dashed #d9d9d9;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  box-sizing: border-box;
+}
+.image-box img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.ac-image :deep(.el-upload:after) {
+  display: block;
+  margin-top: 100%;
+  content: ""
+}
+.image-item {
+  position: relative;
+}
+.image-item .ac-icon {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+</style>

package/src/admin/components/index.js

@@ -0,0 +1,16 @@
+import { defineAsyncComponent } from 'vue';
+// const adminComps = import.meta.glob('@/admin/components/**/*.vue');
+
+export default function install(app) {
+  // Webpack不支持在运行时使用import.meta.glob，但可以通过require.context实现类似功能
+  const adminComps = require.context('@/admin/components/', true, /\.vue$/);
+
+  Object.entries(adminComps).forEach(([key, value]) => {
+    const paths = key.replace('/src/admin/', '').split('/');
+    let name = 'ac-' + paths[1];
+    name = name.replace(/[A-Z]/g, function(str) {
+      return '-' + str.toLowerCase();
+    });
+    app.component(name, defineAsyncComponent(value));
+  });
+}

package/src/admin/components/input/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <span class="input">
+    <el-input
+      v-model="modelValue"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      :size="props.size"
+      :clearable="props.clearable"
+      @input="handleInput"
+      @blur="handleBlur"
+    ></el-input>
+  </span>
+</template>
+
+<script setup>
+const emit = defineEmits(['change', 'blur']);
+const modelValue = defineModel();
+const props = defineProps({
+  placeholder: String,
+  disabled: Boolean,
+  size: String,
+  clearable: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const handleInput = (val) => {
+  emit('change', val);
+};
+
+const handleBlur = (event) => {
+  emit('blur', event);
+};
+</script>
+
+<style scoped>
+.input {
+  width: 100%;
+}
+</style>

package/src/admin/components/local-img/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="ac-local-img"
+    :style="{width: width + 'px', height: height + 'px'}"
+  >
+    <img :src="imgPath" alt />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const props = defineProps({
+  img: String,
+  width: {
+    type: Number,
+    default: 100
+  },
+  height: {
+    type: Number,
+    default: 100
+  }
+});
+const imgPath = ref('');
+
+onMounted(async() => {
+  const imgPaths = props.img.split('.');
+  // if (imgPaths[1] === 'svg') {
+  //   imgPath.value = (await import(`@/assets/echarts/${imgPaths[0]}.svg`)).default;
+  // } else if (imgPaths[1] === 'png') {
+  //   imgPath.value = (await import(`@/assets/echarts/${imgPaths[0]}.png`)).default;
+  // } else if (imgPaths[1] === 'webp') {
+  //   imgPath.value = (await import(`@/assets/echarts/${imgPaths[0]}.webp`)).default;
+  // }
+});
+</script>
+
+<style scoped>
+.ac-local-img {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+</style>

package/src/admin/components/multiple-input/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div v-if="!initializing" class="multiple-input">
+    <el-input
+      v-for="item in number"
+      :key="item"
+      v-model="currValues[item - 1]"
+      @change="handleChange"
+      @blur="handleBlur"
+      :size="size"
+    ></el-input>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  number: {
+    type: Number,
+    default: 1
+  },
+  size: String
+});
+const modelValue = defineModel();
+const currValues = ref([]);
+const initializing = ref(true);
+
+const handleChange = () => {
+  const result = [];
+  for (let index = 0; index < props.number; index++) {
+    result.push(currValues.value[index]);
+  }
+  modelValue.value = result.join(',');
+  emit('change');
+};
+
+const handleBlur = (event) => {
+  handleChange();
+  emit('blur', event);
+};
+
+watch(() => modelValue.value, (val) => {
+  initializing.value = true;
+  currValues.value = (val || '').split(',');
+  while (currValues.value.length < props.number) {
+    currValues.value.push('');
+  }
+  initializing.value = false;
+}, { immediate: true });
+</script>
+
+<style scoped lang="scss">
+.multiple-input {
+  display: flex;
+  flex-direction: row;
+  .el-input:first-child {
+    margin-left: 0;
+  }
+  .el-input {
+    margin-left: 3px;
+  }
+}
+</style>