@arkxos/arkos-system 0.1.0

package/src/admin/components/style-list/index.vue

@@ -0,0 +1,500 @@
+<template>
+  <div class="button-box">
+    <div v-for="(style, index) in styleList" :key="index" class="button-list">
+      <div
+        v-if="showDialog"
+        class="button-list-name"
+      >{{getStyleName(style, index)}}</div>
+      <div
+        v-else
+        class="button-list-name"
+      >
+        <div
+          v-for="(option, index) in optionsList"
+          :key="index"
+          class="list-item"
+        >
+          <Component
+            :is="'ac-' + option.fieldType"
+            v-model="style[option.fieldName]"
+            v-bind="cleanProp(option)"
+            v-bind:fieldList="fieldList"
+            size="small"
+            :placeholder="option.name"
+            :title="option.description"
+          />
+        </div>
+      </div>
+      <div :class="['button-list-button', showDialog ? 'is-dialog' : '']">
+        <ac-icon
+          v-if="index > 0 && index < (styleList || []).length"
+          iconId="018fa3973ded010d7ef2"
+          title="上移"
+          style="cursor: pointer"
+          @click="moveItemUp(index, styleList)"
+        />
+        <ac-icon
+          v-if="index < (styleList || []).length - 1"
+          iconId="018fa397630c01052d7e"
+          title="下移"
+          style="cursor: pointer"
+          @click="moveItemDown(index, styleList)"
+        />
+        <ac-icon
+          v-if="showDialog"
+          iconId="018dca6db20c6a3aaf68"
+          title="编辑"
+          color="#409EFF"
+          size="16"
+          style="cursor: pointer"
+          @click="editStyle(style)"
+        />
+        <ac-icon
+          v-if="showDialog"
+          iconId="018dc9c3efb82f31c161"
+          title="复制"
+          color="#21D914FF"
+          size="16"
+          style="cursor: pointer"
+          @click="copyStyle(style)"
+        />
+        <ac-icon
+          iconId="018dc9c3efd3a0502886"
+          title="删除"
+          color="red"
+          size="16"
+          style="cursor: pointer"
+          @click="deleteStyle(index)"
+        />
+      </div>
+    </div>
+    <div class="button-add-box">
+      <div class="button-add" @click="addStyle">
+        <ac-icon iconId="018dca3b4707c4c43a2f" />
+        <span style="margin-left: 5px;font-size:13px">添加数据</span>
+      </div>
+    </div>
+    <el-drawer
+      v-model="visible"
+      size="370px"
+      class="dark-drawer-box"
+      :close-on-click-modal="false"
+      :with-header="false"
+      destroy-on-close
+    >
+      <div class="drawer-body">
+        <div class="collapse-box">
+          <el-collapse v-model="collapseNames">
+            <el-collapse-item
+              v-for="(group, index) in optionsList"
+              :key="index"
+              :title="group.name"
+              :name="group.name"
+            >
+              <div
+                v-for="(style, index2) in group.children"
+                :key="index2"
+                class="setting-item"
+              >
+                <el-tooltip
+                  v-if="style.description"
+                  placement="left"
+                  :content="style.description"
+                  popper-class="padding-10-15"
+                >
+                  <span class="label">{{style.name}}：</span>
+                </el-tooltip>
+                <span v-else-if="style.name" class="label">{{style.name}}：</span>
+                <span class="content">
+                <Component
+                  :is="'ac-' + style.fieldType"
+                  v-model="currStyle[style.fieldName]"
+                  v-bind="cleanProp(style)"
+                  v-bind:fieldList="fieldList"
+                  size="small"
+                />
+              </span>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="visible=false"
+        >取消</el-button>
+        <el-button
+          type="primary"
+          size="default"
+          @click="submitForm"
+        >确定</el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, onMounted, computed } from 'vue';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  fieldList: String,
+  defaultStyle: Object,
+  options: Array,
+  showDialog: {
+    type: Boolean,
+    default: true
+  }
+});
+const styleList = defineModel();
+const collapseNames = ref([]);
+const visible = ref(false);
+const currStyle = ref({});
+
+const cleanProp = (data) => {
+  const clone = tool.deepClone(data);
+  const result = {};
+  for (const p in clone) {
+    if (p === 'optionsFieldList' && clone[p]) {
+      result['optionsFieldList'] = true;
+      result['options'] = props.fieldList;
+    } else if (p !== 'name' &&
+        p !== 'fieldName' &&
+        p !== 'fieldType' &&
+        p !== 'default' &&
+        p !== 'description' &&
+        p !== 'show' &&
+        typeof clone[p] !== 'function') {
+      result[p] = clone[p];
+    }
+  }
+  return result;
+};
+
+const addStyle = () => {
+  currStyle.value = { id: tool.uuids() };
+  initStyleByDefault(currStyle.value, props.options);
+  Object.assign(currStyle.value, props.defaultStyle || {});
+
+  if (props.showDialog) {
+    visible.value = true;
+  } else {
+    styleList.value.push(currStyle.value);
+  }
+};
+
+const editStyle = (style) => {
+  currStyle.value = tool.deepClone(style);
+  visible.value = true;
+};
+
+const copyStyle = (style) => {
+  currStyle.value = tool.deepClone(style);
+  currStyle.value.id = tool.uuid();
+  styleList.value.push(currStyle.value);
+  visible.value = true;
+};
+
+const deleteStyle = (index) => {
+  styleList.value.splice(index, 1);
+};
+
+const getStyleName = (style, index) => {
+  if (style.conditionList && style.conditionList.length > 0 && style.conditionList[0].value) {
+    return style.conditionList[0].value;
+  }
+  return style.name || style.label || '序号' + (index + 1);
+};
+
+const submitForm = () => {
+  const find = styleList.value.find(item => item.id === currStyle.value.id);
+  if (find) {
+    Object.assign(find, currStyle.value);
+  } else {
+    styleList.value.push(currStyle.value);
+  }
+  visible.value = false;
+};
+
+const initStyleByDefault = (style, list) => {
+  list.forEach(item => {
+    if (item.type !== 'group' && item.fieldName) {
+      style[item.fieldName] = style[item.fieldName] || item.default;
+    }
+    if (item.children && item.children.length > 0) {
+      initStyleByDefault(style, item.children);
+    }
+  });
+};
+
+const optionsList = computed(() => {
+  return (tool.deepClone(props.options) || [])
+    .filter(item => !item.show || item.show(currStyle.value))
+    .map(item => {
+      if (item.children) {
+        item.children = item.children.filter(item => !item.show || item.show(currStyle.value));
+      }
+      return item;
+    });
+});
+
+const moveItemUp = (index, list) => {
+  const curr = list[index];
+  list[index] = list[index - 1];
+  list[index - 1] = curr;
+};
+
+const moveItemDown = (index, list) => {
+  const curr = list[index];
+  list[index] = list[index + 1];
+  list[index + 1] = curr;
+};
+
+onMounted(() => {
+  props.options.forEach(item => collapseNames.value.push(item.name));
+  styleList.value.forEach(style => {
+    if (!style.id) {
+      style.id = tool.uuid();
+    }
+  });
+});
+
+onBeforeMount(() => {
+  if (!styleList.value) {
+    styleList.value = [];
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.drawer-body {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  :deep(.el-collapse) {
+    --el-collapse-border-color: unset!important;
+    --el-collapse-header-height: 35px;
+    --el-collapse-header-bg-color: #333!important;
+    --el-collapse-header-text-color: white;
+    --el-collapse-content-bg-color: #555555;
+    --el-collapse-content-text-color: white;
+    border-bottom: 1px solid #666666;
+    border-top: none!important;
+    .el-collapse-item {
+      border-bottom: 1px solid #444;
+    }
+    .el-collapse-item:last-child {
+      border-bottom: none;
+    }
+    .el-collapse-item__header {
+      text-indent: 20px;
+    }
+    .el-collapse-item__content {
+      padding-bottom: 0!important;
+    }
+  }
+  :deep(.el-tree) {
+    padding: 8px;
+    background: #555555;
+    color: #dcdcdc;
+    width: 100%;
+    --el-tree-node-content-height: 26px;
+    --el-tree-node-hover-bg-color: #333;
+    --el-tree-text-color: #dcdcdc;
+    --el-tree-expand-icon-color: #dcdcdc;
+  }
+  :deep(.el-tree-node.is-current)>.el-tree-node__content {
+    background: #333!important;
+  }
+  :deep(.el-input) {
+    --el-input-text-color: #dcdcdc;
+    --el-input-border-color: none;
+    --el-input-bg-color: #333;
+    --el-input-hover-border-color: none;
+    --el-disabled-bg-color: #333;
+    --el-disabled-border-color: none;
+    -webkit-text-fill-color: #cccccc;
+    .el-input__inner, .el-textarea__inner, .el-checkbox, .el-checkbox__label {
+      color: #cccccc !important;
+    }
+  }
+  :deep(.el-input).is-disabled {
+    --el-input-text-color: #dcdcdc;
+    --el-input-border-color: none;
+    --el-input-bg-color: #333;
+    --el-input-hover-border-color: none;
+    --el-disabled-bg-color: #333;
+    --el-disabled-border-color: none;
+    -webkit-text-fill-color: #cccccc;
+    .el-input__inner, .el-textarea__inner, .el-checkbox, .el-checkbox__label {
+      color: #cccccc !important;
+      -webkit-text-fill-color: #cccccc !important;
+    }
+  }
+  :deep(.el-textarea) .el-textarea__inner {
+    background: #333!important;
+    box-shadow: none;
+    color: #dcdcdc!important;
+  }
+  :deep(.el-select) .el-input__inner {
+    border: none!important;
+  }
+  :deep(.el-select) {
+    .el-select__wrapper {
+      background: #333;
+      color: #dcdcdc!important;
+      box-shadow: none;
+    }
+    .el-input__inner {
+      border-color: #666;
+    }
+    .el-select__placeholder {
+      border: none!important;
+      color: #dcdcdc!important;
+    }
+  }
+  :deep(.el-checkbox) {
+    margin-right: 15px;
+    .el-checkbox__label {
+      color: #dcdcdc!important;
+    }
+    .el-checkbox__input .el-checkbox__inner {
+      background: rgb(180, 180, 180);
+      border-color: rgb(180, 180, 180);
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background: #333;
+      border-color: #333;
+    }
+  }
+  :deep(.el-radio) {
+    margin-right: 15px;
+    .el-radio__label {
+      color: #dcdcdc!important;
+    }
+    .el-radio__input .el-radio__inner {
+      background: rgb(180, 180, 180);
+      border-color: rgb(180, 180, 180);
+    }
+    .el-radio__input.is-checked .el-radio__inner {
+      background: #333;
+      border-color: #333;
+    }
+  }
+  :deep(.icon-select) {
+    border-color: #333;
+    background: #333;
+    color: #dcdcdc;
+  }
+  :deep(.el-switch) .el-switch__core {
+    background: #b4b4b4;
+    border-color: #b4b4b4;
+  }
+  :deep(.el-switch).is-checked .el-switch__core {
+    background: #333;
+    border-color: #333;
+  }
+  :deep(.el-input-number--small .el-input__wrapper) {
+    padding-left: 5px!important;
+  }
+  .collapse-box {
+    flex-grow: 1;
+    overflow: auto;
+    :deep(.el-collapse-item__wrap) {
+      padding: 2px 0;
+      background: #555555!important;
+    }
+  }
+  .setting-item {
+    color: white;
+    display: flex;
+    flex-direction: row;
+    padding: 2px 3px;
+    .label {
+      width: 90px;
+      height: 24px;
+      flex-shrink: 0;
+      color: #dcdcdc;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      font-size: 13px;
+    }
+    .content {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      overflow: hidden;
+    }
+    :deep(.el-radio-button) {
+      --el-radio-button-checked-bg-color: #555;
+      --el-radio-button-checked-text-color: #dcdcdc;
+      --el-radio-button-checked-border-color: #333;
+      --el-radio-button-disabled-checked-fill: #333;
+    }
+    :deep(.el-radio-button) .el-radio-button__inner {
+      color: #dcdcdc;
+      background: #555555;
+      border-right: 1px solid #333;
+      border-top: 1px solid #333;
+      border-bottom: 1px solid #333;
+      padding: 5px 6px;
+    }
+    :deep(.el-radio-button:first-child) .el-radio-button__inner {
+      border-left: 1px solid #333;
+    }
+    :deep(.el-radio-button).is-active .el-radio-button__inner {
+      background: #333!important;
+    }
+  }
+}
+.button-box {
+  color: #dcdcdc;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+  .button-list {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    width: 100%;
+    .button-list-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 1px;
+      flex: 1;
+    }
+    .button-list-button {
+      width: 60px;
+      justify-content: flex-end;
+      align-items: center;
+      display: flex;
+      gap: 5px;
+      &.is-dialog {
+        width: 100px;
+      }
+    }
+  }
+  .button-add-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 8px;
+    color: #dcdcdc;
+    .button-add {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <span>
+    <el-switch
+      v-if="options.length > 1"
+      v-model="modelValue"
+      inline-prompt
+      :size="size"
+      :disabled="inputDisabled"
+      :active-text="options[0].value"
+      :active-value="options[0].key"
+      :inactive-text="options[1].value"
+      :inactive-value="options[1].key"
+      @change="handleChange"
+    ></el-switch>
+  </span>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  options: [Array, String],
+  placeholder: String,
+  size: String
+});
+
+const options = ref([]);
+const inputDisabled = useDisabled();
+
+const handleChange = () => {
+  emit('change');
+};
+
+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;
+    }
+  }
+};
+
+watch(() => props.options, (data) => {
+  init(data);
+}, { immediate: true });
+</script>