@arkxos/arkos-system 0.1.0

package/src/admin/visual/js/list.config.js

@@ -0,0 +1,578 @@
+import { commonStyle, fontStyle } from './common.config';
+
+export const list = [
+  {
+    type: 'list-image',
+    name: '图片列表',
+    eventList: '初始化事件',
+    inputData: true,
+    fieldList: '图片',
+    dataList: [{ 图片: 'x' }],
+    styleList: [
+      {
+        type: 'group',
+        name: '图片设置',
+        children: [
+          {
+            name: '显示多选框',
+            fieldName: 'checkbox',
+            fieldType: 'switch',
+            default: false,
+            options: [
+              { value: '', key: true },
+              { value: '', key: false }
+            ]
+          },
+          {
+            name: '多选框位置',
+            fieldName: 'checkbox.position',
+            fieldType: 'buttons',
+            default: '左上',
+            options: [
+              { key: 'top:8px;left:8px;', value: '左上' },
+              { key: 'bottom:8px;left:8px;', value: '左下' },
+              { key: 'top:8px;right:8px;', value: '右上' },
+              { key: 'bottom:8px;right:8px;', value: '右下' },
+              { key: 'top:calc(50% - 7px);left:calc(50% - 7px);', value: '居中' },
+            ],
+            show: (data) => data['checkbox'] || false
+          },
+          {
+            name: '最少选择数',
+            fieldName: 'min-select',
+            fieldType: 'number',
+            default: 0,
+            description: '最少选择的图片数量，为0时不限制',
+            show: (data) => data['checkbox'] || false
+          },
+          {
+            name: '最多选择数',
+            fieldName: 'max-select',
+            fieldType: 'number',
+            default: 0,
+            description: '最多选择的图片数量，为0时不限制',
+            show: (data) => data['checkbox'] || false
+          },
+          {
+            name: '宽度',
+            fieldName: 'image.width',
+            fieldType: 'input',
+            default: '100px',
+          },
+          {
+            name: '高度',
+            fieldName: 'image.height',
+            fieldType: 'input',
+            default: '100px',
+          },
+          {
+            name: '图片间隔',
+            fieldName: 'gap',
+            fieldType: 'input',
+            default: '10px'
+          },
+          {
+            name: '显示方式',
+            fieldName: 'image.fit',
+            fieldType: 'buttons',
+            default: '',
+            options: [
+              { value: '填充', key: 'fill' },
+              { value: '内容', key: 'contain' },
+              { value: '裁剪', key: 'cover' },
+              { value: '缩放', key: 'scale-down' },
+              { value: '无', key: 'none' },
+            ]
+          }
+        ]
+      },
+      ...commonStyle
+    ]
+  },
+  {
+    type: 'list-card',
+    name: '卡片列表',
+    eventList: '初始化事件,点击事件,点击标题事件',
+    inputData: true,
+    fieldList: '标题,数值',
+    defaultStyle: {
+      display: 'flex',
+      'flex-direction': 'row',
+      'justify-content': 'space-between',
+    },
+    styleList: [
+      {
+        type: 'group',
+        name: '卡片设置',
+        children: [
+          {
+            name: '卡片间隔',
+            fieldName: 'gap',
+            fieldType: 'input',
+            default: '10px'
+          },
+          {
+            name: '卡片样式',
+            fieldName: 'styleList',
+            fieldType: 'style-list',
+            data: (data) => data,
+            defaultStyle: {
+              'background-color': '#409EFF',
+              color: 'white',
+              height: '100px',
+              'justify-content': 'center',
+              'align-items': 'center',
+              display: 'flex',
+              'flex-direction': 'column',
+              'radius-type': 'simple',
+              'border-radius': 10,
+              gap: '15px',
+            },
+            options: [
+              {
+                type: 'group',
+                name: '条件设置',
+                children: [
+                  {
+                    fieldName: 'conditionList',
+                    fieldType: 'condition-list',
+                  }
+                ]
+              },
+              {
+                type: 'group',
+                name: '标题字体',
+                children: [
+                  ...fontStyle('title.')
+                ]
+              },
+              {
+                type: 'group',
+                name: '数值字体',
+                children: [
+                  ...fontStyle('value.'),
+                  {
+                    name: '是否显示',
+                    fieldName: 'value.show',
+                    fieldType: 'switch',
+                    default: true,
+                    options: [
+                      { value: '', key: true },
+                      { value: '', key: false }
+                    ],
+                  },
+                ]
+              },
+              ...commonStyle
+            ],
+          }
+        ]
+      },
+      ...commonStyle
+    ]
+  },
+  {
+    type: 'list-button',
+    name: '按钮列表',
+    defaultObject: true,
+    eventList: '初始化事件,点击条目事件',
+    inputData: true,
+    fieldList: '显示字段,传值字段',
+    fieldBuiltIn: true,
+    defaultStyle: {
+      display: 'flex',
+      'flex-direction': 'row',
+      'justify-content': 'flex-start',
+      height: '30px'
+    },
+    styleList: [
+      {
+        type: 'group',
+        name: '通用设置',
+        children: [
+          {
+            name: '显示全部',
+            fieldName: 'showAll',
+            fieldType: 'switch',
+            default: true,
+            options: [
+              { value: '', key: true },
+              { value: '', key: false }
+            ],
+          },
+          {
+            name: '按钮间隔',
+            fieldName: 'gap',
+            fieldType: 'input',
+            default: '10px'
+          }
+        ]
+      },
+      {
+        type: 'group',
+        name: '样式设置',
+        children: [
+          {
+            name: '未选中样式',
+            fieldName: 'styleList',
+            fieldType: 'style-list',
+            default: [
+              {
+                name: '未选中样式',
+                fontColor: '#9C9C9C',
+                height: '30px',
+                padding: '0,20,0,20',
+                'justify-content': 'center',
+                'align-items': 'center',
+                display: 'flex',
+                'flex-direction': 'column',
+                'radius-type': 'simple',
+                'border-radius': 15,
+                'border-type': 'simple',
+                'border-width': 1,
+                'border-style': 'solid',
+                'border-color': '#9C9C9C'
+              },
+            ],
+            defaultStyle: {
+              fontColor: '#9C9C9C',
+              height: '30px',
+              padding: '0,20,0,20',
+              'justify-content': 'center',
+              'align-items': 'center',
+              display: 'flex',
+              'flex-direction': 'column',
+              'radius-type': 'simple',
+              'border-radius': 15,
+              'border-type': 'simple',
+              'border-width': 1,
+              'border-style': 'solid',
+              'border-color': '#9C9C9C'
+            },
+            options: [
+              {
+                type: 'group',
+                name: '样式名称',
+                children: [
+                  {
+                    name: '名称',
+                    fieldName: 'name',
+                    fieldType: 'input',
+                  }
+                ]
+              },
+              {
+                type: 'group',
+                name: '条件设置',
+                children: [
+                  {
+                    fieldName: 'conditionList',
+                    fieldType: 'condition-list',
+                  }
+                ]
+              },
+              {
+                type: 'group',
+                name: '字体样式',
+                children: [
+                  ...fontStyle()
+                ]
+              },
+              ...commonStyle
+            ],
+          },
+          {
+            name: '已选中样式',
+            fieldName: 'selected.styleList',
+            fieldType: 'style-list',
+            default: [
+              {
+                name: '已选中',
+                fontColor: 'white',
+                height: '30px',
+                padding: '0,20,0,20',
+                'justify-content': 'center',
+                'align-items': 'center',
+                display: 'flex',
+                'flex-direction': 'column',
+                'flex-shrink': '0',
+                'radius-type': 'simple',
+                'border-radius': 15,
+                bgMode: '颜色',
+                'background-color': '#409EFF',
+                'border-type': 'simple',
+                'border-width': 1,
+                'border-style': 'solid',
+                'border-color': '#409EFF'
+              },
+            ],
+            defaultStyle: {
+              fontColor: 'white',
+              height: '30px',
+              padding: '0,20,0,20',
+              'justify-content': 'center',
+              'align-items': 'center',
+              display: 'flex',
+              'flex-direction': 'column',
+              'flex-shrink': '0',
+              'radius-type': 'simple',
+              'border-radius': 15,
+              bgMode: '颜色',
+              'background-color': '#409EFF',
+              'border-type': 'simple',
+              'border-width': 1,
+              'border-style': 'solid',
+              'border-color': '#409EFF'
+            },
+            options: [
+              {
+                type: 'group',
+                name: '样式名称',
+                children: [
+                  {
+                    name: '名称',
+                    fieldName: 'name',
+                    fieldType: 'input',
+                  }
+                ]
+              },
+              {
+                type: 'group',
+                name: '条件设置',
+                children: [
+                  {
+                    fieldName: 'conditionList',
+                    fieldType: 'condition-list',
+                  }
+                ]
+              },
+              {
+                type: 'group',
+                name: '字体样式',
+                children: [
+                  ...fontStyle()
+                ]
+              },
+              ...commonStyle
+            ],
+          }
+        ]
+      },
+    ]
+  },
+  {
+    type: 'data-table',
+    name: '数据表格',
+    eventList: '初始化事件,点击更多事件,点击条目事件',
+    inputData: true,
+    fieldList: '标题,日期',
+    defaultStyle: {
+      display: 'flex',
+      'flex-direction': 'column',
+      'justify-content': 'flex-start',
+      'align-items': 'flex-start',
+    },
+    styleList: [
+      {
+        type: 'group',
+        name: '基础设置',
+        children: [
+          {
+            name: '宽度',
+            fieldName: 'width',
+            fieldType: 'input',
+            default: '100%',
+          },
+          {
+            name: '高度',
+            fieldName: 'height',
+            fieldType: 'input',
+            default: '100%',
+          },
+          {
+            name: '纵向边框',
+            fieldName: 'border',
+            fieldType: 'switch',
+            default: false,
+            options: [
+              { value: '', key: true },
+              { value: '', key: false }
+            ],
+          },
+          {
+            name: '斑马纹',
+            fieldName: 'stripe',
+            fieldType: 'switch',
+            default: false,
+            options: [
+              { value: '', key: true },
+              { value: '', key: false }
+            ],
+          }
+        ]
+      },
+      {
+        type: 'group',
+        name: '表头设置',
+        children: [
+          {
+            name: '字体颜色',
+            fieldName: 'header.color',
+            fieldType: 'color-picker',
+            default: '#333333',
+          },
+          {
+            name: '背景颜色',
+            fieldName: 'header.bgColor',
+            fieldType: 'color-picker',
+            default: '#d5ecff',
+          },
+          {
+            name: '字体边距',
+            fieldName: 'header.padding',
+            fieldType: 'multiple-number',
+            number: 4,
+            default: '10,5,10,5',
+            description: '上,右,下,左'
+          },
+          {
+            name: '显示多选框',
+            fieldName: 'header.checkbox',
+            fieldType: 'switch',
+            default: false,
+            options: [
+              { value: '', key: true },
+              { value: '', key: false }
+            ]
+          }
+        ]
+      },
+      {
+        type: 'group',
+        name: '列设置',
+        children: [
+          {
+            name: '列设置',
+            fieldName: 'columnList',
+            fieldType: 'style-list',
+            default: [{
+              label: '标题',
+              prop: '标题',
+              fieldType: '字符',
+              width: 100,
+              autoWidth: true,
+              headerAlign: 'center',
+              align: 'center'
+            }, {
+              label: '日期',
+              prop: '日期',
+              fieldType: '日期',
+              format: 'yyyy-MM-dd',
+              width: 120,
+              headerAlign: 'center',
+              align: 'center'
+            }],
+            options: [
+              {
+                type: 'group',
+                name: '列设置',
+                children: [
+                  {
+                    name: '列名称',
+                    fieldName: 'label',
+                    fieldType: 'input',
+                  },
+                  {
+                    name: '显示内容',
+                    fieldName: 'prop',
+                    fieldType: 'select',
+                    optionsFieldList: true
+                  },
+                  {
+                    name: '内容类型',
+                    fieldName: 'fieldType',
+                    fieldType: 'select',
+                    default: '字符',
+                    options: '字符,字典,数字,日期,图片,视频'
+                  },
+                  {
+                    name: '数据字典',
+                    fieldName: 'dictCode',
+                    fieldType: 'dict-tree',
+                    show: (data) => data['fieldType'] === '字典'
+                  },
+                  {
+                    name: '保留位数',
+                    fieldName: 'point',
+                    fieldType: 'number',
+                    show: (data) => data['fieldType'] === '数字'
+                  },
+                  {
+                    name: '格式化',
+                    fieldName: 'format',
+                    fieldType: 'select',
+                    allowCreate: true,
+                    options: 'yyyy-MM-dd,yyyy-MM-dd HH,yyyy-MM-dd HH:mm:ss',
+                    show: (data) => data['fieldType'] === '日期'
+                  },
+                  {
+                    name: '列宽度',
+                    fieldName: 'width',
+                    fieldType: 'number',
+                    default: 100,
+                  },
+                  {
+                    name: '自动列宽',
+                    fieldName: 'autoWidth',
+                    fieldType: 'switch',
+                    default: false,
+                    options: [
+                      { value: '', key: true },
+                      { value: '', key: false }
+                    ],
+                  },
+                  {
+                    name: '列头布局',
+                    fieldName: 'headerAlign',
+                    fieldType: 'select',
+                    default: 'center',
+                    options: [
+                      { value: '居左', key: 'left' },
+                      { value: '居中', key: 'center' },
+                      { value: '居右', key: 'right' }
+                    ]
+                  },
+                  {
+                    name: '内容布局',
+                    fieldName: 'align',
+                    fieldType: 'select',
+                    default: 'center',
+                    options: [
+                      { value: '居左', key: 'left' },
+                      { value: '居中', key: 'center' },
+                      { value: '居右', key: 'right' }
+                    ]
+                  }
+                ]
+              },
+              {
+                type: 'group',
+                name: '字体样式',
+                children: [
+                  ...fontStyle()
+                ]
+              },
+              ...commonStyle
+            ],
+          },
+        ]
+      },
+    ]
+  },
+  {
+    type: 'list-custom',
+    name: '自定义列表',
+    eventList: '点击条目事件',
+    inputData: true
+  }
+]

package/src/admin/visual/js/menu.config.js

@@ -0,0 +1,62 @@
+import { fontStyle } from './common.config';
+
+export const menu = [
+  {
+    type: 'portal-menu',
+    name: '门户菜单',
+    eventList: '初始化事件',
+    inputData: true,
+    fieldList: '菜单主键,菜单名称,跳转页面,子节点',
+    dataList: [
+      { 菜单主键: '1', 菜单名称: '首页', 跳转页面: '1' },
+      { 菜单主键: '2', 菜单名称: '找服务', 跳转页面: '2' },
+      { 菜单主键: '3', 菜单名称: '找政策', 跳转页面: '3' },
+      {
+        菜单主键: '4',
+        菜单名称: '特色产业',
+        跳转页面: '4',
+        子节点: [
+          { 菜单主键: '5', 菜单名称: '中小企业', 跳转页面: '5' },
+          { 菜单主键: '6', 菜单名称: '大型企业', 跳转页面: '6' }
+        ]
+      },
+    ],
+    styleList: [
+      {
+        type: 'group',
+        name: '基础设置',
+        children: [
+          {
+            name: '宽度',
+            fieldName: 'width',
+            fieldType: 'input',
+            default: '150px'
+          },
+          {
+            name: '高度',
+            fieldName: 'height',
+            fieldType: 'input',
+            default: '50px'
+          },
+          ...fontStyle()
+        ]
+      },
+      {
+        type: 'group',
+        name: '鼠标经过设置',
+        children: [
+          {
+            name: '背景颜色',
+            fieldName: 'backgroundColor',
+            fieldType: 'color-picker',
+          },
+          {
+            name: '字体颜色',
+            fieldName: 'fontColor',
+            fieldType: 'color-picker',
+          }
+        ]
+      }
+    ]
+  },
+]

package/src/admin/visual/js/visual-comp.js

@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia';
+import { ref, getCurrentInstance } from 'vue';
+import api from '@/http/api';
+
+export const useAdminVisualCompStore = defineStore('adminVisualComp', () => {
+  const loading = ref(false);
+  const visualCompList = ref([]);
+  visualCompList.value['avc-page'] = { name: '页面', styleList: [] };
+
+  const setVisualComp = (compName, comp) => {
+    visualCompList.value[compName] = comp;
+  };
+
+  const getVisualComp = async(type) => {
+    const compName = 'avc-' + type;
+    if (visualCompList.value && visualCompList.value[compName]) {
+      return visualCompList.value[compName];
+    }
+
+    if (loading.value) {
+      await sleep(100);
+      return await getVisualComp(type);
+    }
+
+    loading.value = true;
+    const res = await api.post('/business/visual-comp/queryBy', { id: type });
+
+    if (res.code === '1') {
+      const data = res.data || {};
+      getCurrentInstance().component(compName, data.compTpl);
+      setVisualComp(compName, { name: compName, styleList: data.styleList || [] });
+      loading.value = false;
+      return data;
+    } else {
+      loading.value = false;
+      return {};
+    }
+  };
+
+  const sleep = async (d) => {
+    return new Promise((resolve) => setTimeout(resolve, d))
+  };
+
+  return {
+    getVisualComp,
+    setVisualComp
+  };
+});