1、增加新组件w-splitter

2、增加新组件w-card-panel

io.sc.platform.core.frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.2.54",
+  "version": "8.2.56",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "//main": "库的主文件",
   "main": "dist/platform-core.js",

io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue

@@ -24,6 +24,7 @@
 <script setup lang="ts">
 import { inject, computed } from 'vue';
 import { useQuasar } from 'quasar';
+import { Tools } from '@/platform';
 import { Form } from './ts/Form';
 import FormElement from './FormElement.vue';
 
@@ -32,24 +33,24 @@ const form = <Form>inject('form');
 
 // 颜色透明度
 const colorOpacity = 0.048;
-const colors = [
+// 红色
-  // 红色
+const red = 'rgba(255, 0, 0, ' + colorOpacity + ')';
-  'rgba(255, 0, 0, ' + colorOpacity + ')',
+// 橙色
-  // 橙色
+const orange = 'rgba(255, 149, 0, ' + colorOpacity + ')';
-  'rgba(255, 149, 0, ' + colorOpacity + ')',
+// 黄色
-  // 黄色
+const yellow = 'rgba(255, 255, 0, ' + colorOpacity + ')';
-  'rgba(255, 255, 0, ' + colorOpacity + ')',
+// 绿色
-  // 绿色
+const green = 'rgba(4, 255, 0, ' + colorOpacity + ')';
-  'rgba(4, 255, 0, ' + colorOpacity + ')',
+// 青色
-  // 青色
+const teal = 'rgba(0, 255, 255, ' + colorOpacity + ')';
-  'rgba(0, 255, 255, ' + colorOpacity + ')',
+// 蓝色
-  // 蓝色
+const blue = 'rgba(0, 38, 255, ' + colorOpacity + ')';
-  'rgba(0, 38, 255, ' + colorOpacity + ')',
+// 紫色
-  // 紫色
+const purple = 'rgba(255, 0, 247, ' + colorOpacity + ')';
-  'rgba(255, 0, 247, ' + colorOpacity + ')',
+// 灰色
-  // 灰色
+const grey = 'rgba(0, 0, 0, ' + colorOpacity + ')';
-  'rgba(0, 0, 0, ' + colorOpacity + ')',
+const colors = [red, orange, yellow, green, teal, blue, purple, grey];
-];
+const colorJson = { red, orange, yellow, green, teal, blue, purple, grey };
 
 const props = defineProps({
   // 分组标签名
@@ -86,6 +87,8 @@ const headerStyleComputed = computed(() => {
       const index = form.fieldArray.value.findIndex((item) => item.label === props.label);
       let colorIndex = index > -1 && index < colors.length ? index : getRandomInt();
       style['background-color'] = colors[colorIndex];
+    } else if (Tools.hasOwnProperty(colorJson, props.color)) {
+      style['background-color'] = colorJson[props.color];
     } else {
       style['background-color'] = props.color;
     }

io.sc.platform.core.frontend/src/platform/components/index.ts

@@ -34,6 +34,8 @@ import WRadio from './radio/WRadio.vue';
 import WExtRadio from './radio/WExtRadio.vue';
 import WTextEditor from './text-editor/WTextEditor.vue';
 import WQueryBuilder from './query-builder/WQueryBuilder.vue';
+import WSplitter from './splitter/WSplitter.vue';
+import WCardPanel from './panel/WCardPanel.vue';
 
 import WGrid from './grid/WGrid.vue';
 
@@ -101,6 +103,8 @@ export default {
     app.component('WExtRadio', WExtRadio);
     app.component('WTextEditor', WTextEditor);
     app.component('WQueryBuilder', WQueryBuilder);
+    app.component('WSplitter', WSplitter);
+    app.component('WCardPanel', WCardPanel);
 
     app.component('WGrid', WGrid);
 
@@ -161,6 +165,8 @@ export {
   WPassword,
   WFile,
   WGrid,
+  WSplitter,
+  WCardPanel,
   WIconEmpty,
   WVExpandDiv,
   WInfoPanel,

io.sc.platform.core.frontend/src/platform/components/panel/WCardPanel.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="h-full w-panel">
+    <template v-if="!expansion">
+      <q-card flat :bordered="bordered" class="h-full">
+        <q-item dense style="padding: 0px">
+          <q-item-section>
+            <q-item-label header :style="headerStyleComputed">
+              <q-icon v-if="props.icon" :name="props.icon" size="sm" v-bind="props.iconAttrs" />
+              <span style="margin-left: 5px">{{ label }}</span>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-separator v-if="!titleMode" />
+        <q-card-section v-if="!titleMode" :style="contentPadding">
+          <slot></slot>
+        </q-card-section>
+      </q-card>
+    </template>
+    <template v-else>
+      <q-list :bordered="bordered" class="rounded-borders">
+        <q-expansion-item default-opened expand-separator :icon="icon" :label="label" :header-style="headerStyleComputed">
+          <template #header>
+            <div class="q-item__section column q-item__section--side justify-center q-item__section--avatar">
+              <q-icon v-if="props.icon" :name="props.icon" size="sm" v-bind="props.iconAttrs" />
+            </div>
+            <div class="q-item__section column q-item__section--main justify-center">
+              <span style="margin-left: 5px">{{ label }}</span>
+            </div>
+          </template>
+          <q-separator v-if="!titleMode" />
+          <div v-if="!titleMode" class="h-full" :style="contentPadding">
+            <slot></slot>
+          </div>
+        </q-expansion-item>
+      </q-list>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Tools } from '@/platform';
+
+// 颜色透明度
+const colorOpacity = 0.048;
+const colors = {
+  // 红色
+  red: 'rgba(255, 0, 0, ' + colorOpacity + ')',
+  // 橙色
+  orange: 'rgba(255, 149, 0, ' + colorOpacity + ')',
+  // 黄色
+  yellow: 'rgba(255, 255, 0, ' + colorOpacity + ')',
+  // 绿色
+  green: 'rgba(4, 255, 0, ' + colorOpacity + ')',
+  // 青色
+  teal: 'rgba(0, 255, 255, ' + colorOpacity + ')',
+  // 蓝色
+  blue: 'rgba(0, 38, 255, ' + colorOpacity + ')',
+  // 紫色
+  purple: 'rgba(255, 0, 247, ' + colorOpacity + ')',
+  // 灰色
+  grey: 'rgba(0, 0, 0, ' + colorOpacity + ')',
+};
+
+const props = defineProps({
+  // 标签名
+  label: { type: String, default: '' },
+  // 背景色
+  color: { type: String, default: undefined },
+  // 图标
+  icon: { type: String, default: undefined },
+  // 图标其余属性
+  iconAttrs: { type: Object, default: undefined },
+  // title模式，开启后无内容块
+  titleMode: { type: Boolean, default: false },
+  // 是否显示边框线
+  bordered: { type: Boolean, default: true },
+  // 是否可折叠
+  expansion: { type: Boolean, default: false },
+  // 内容块边距
+  contentPadding: { type: String, default: 'padding: 8px' },
+});
+
+const headerStyleComputed = computed(() => {
+  const style = {
+    // 垂直居中
+    display: 'flex',
+    alignItems: 'center',
+    // 文字颜色
+    color: '#000',
+  };
+  if (!props.expansion) {
+    style['padding'] = '5px';
+  }
+  if (props.color) {
+    // 背景颜色
+    if (Tools.hasOwnProperty(colors, props.color)) {
+      style['background-color'] = colors[props.color];
+    } else {
+      style['background-color'] = props.color;
+    }
+  }
+  return style;
+});
+</script>
+
+<style lang="css">
+.w-panel .q-expansion-item__container .q-item:first-of-type {
+  min-height: 34px;
+  height: 34px;
+  padding: 5px;
+}
+.w-panel .q-expansion-item .q-item__section--side {
+  min-width: auto;
+  padding-right: 5px;
+}
+</style>

io.sc.platform.core.frontend/src/platform/components/splitter/WSplitter.vue

@@ -0,0 +1,94 @@
+<template>
+  <q-splitter
+    v-model="splitterModel"
+    v-bind="attrs"
+    :horizontal="horizontal"
+    :disable="disable"
+    class="h-full w-full w-splitter"
+    :separator-class="{ lineColor: !disable }"
+  >
+    <template #before>
+      <slot name="before"></slot>
+    </template>
+    <template v-if="showIcon && !disable" #separator>
+      <q-icon :name="horizontal ? 'more_horiz' : 'more_vert'" :color="iconColor" :size="iconSize"> </q-icon>
+    </template>
+    <template #after>
+      <slot name="after"></slot>
+    </template>
+  </q-splitter>
+</template>
+
+<script setup lang="ts">
+import { getCssVar } from 'quasar';
+import { ref, useAttrs } from 'vue';
+
+const attrs = useAttrs();
+const props = defineProps({
+  /**
+   * 切分大小
+   */
+  size: {
+    type: Number,
+    default: 50,
+  },
+  /**
+   * 上下切分，默认为左右切分
+   */
+  horizontal: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 禁用拖拽面板大小
+   */
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 分割线上显示icon
+   */
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * icon大小
+   */
+  iconSize: {
+    type: String,
+    default: 'sm',
+  },
+  /**
+   * icon颜色
+   */
+  iconColor: {
+    type: String,
+    default: 'primary',
+  },
+  /**
+   * 分割线颜色
+   */
+  separatorColor: {
+    type: String,
+    default: undefined,
+  },
+});
+const splitterModel = ref(props.size);
+const lineColor = props.separatorColor || getCssVar('primary');
+</script>
+
+<style lang="css">
+.w-splitter .lineColor {
+  /* 添加平滑过渡 */
+  transition: background-color 0.3s;
+}
+.w-splitter .lineColor:hover {
+  /* 悬停时的背景色 */
+  background-color: v-bind(lineColor);
+}
+.w-splitter.q-splitter--active .lineColor {
+  background-color: v-bind(lineColor);
+}
+</style>

io.sc.platform.core.frontend/src/platform/index.ts

@@ -144,6 +144,7 @@ export {
   WPosition,
   WText,
   WNumber,
+  WInteger,
   WTextarea,
   WSelect,
   WGridSelect,
@@ -157,6 +158,8 @@ export {
   WCheckbox,
   WPassword,
   WGrid,
+  WSplitter,
+  WCardPanel,
   WIconEmpty,
   WVExpandDiv,
   WInfoPanel,