init

src/component/panel/index.less

@@ -0,0 +1,22 @@
+:root {
+  --panel-border-color: var(--global-neutral-color-3);
+  --panel-border-radius: var(--global-border-radius);
+}
+
+.layui-panel {
+  border-width: 1px;
+  border-style: solid;
+  margin-bottom: 15px;
+  border-radius: var(--panel-border-radius);
+  border-color: var(--panel-border-color);
+  background-color: #fff;
+  padding: 20px;
+}
+
+.layui-panel.is-hover-shadow:hover {
+  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
+}
+
+.layui-panel.shadow {
+  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
+}

src/component/panel/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/panel/index.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+export default {
+  name: "LayPanel",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { computed } from "vue";
+import { PanelShadow } from "./interface";
+
+export interface PanelProps {
+  shadow?: PanelShadow;
+}
+
+const props = withDefaults(defineProps<PanelProps>(), {
+  shadow: "always",
+});
+
+const classes = computed(() => {
+  return {
+    shadow: props.shadow === "always",
+    "is-hover-shadow": props.shadow === "hover",
+  };
+});
+</script>
+
+<template>
+  <div class="layui-panel" :class="classes">
+    <slot></slot>
+  </div>
+</template>

src/component/panel/interface.ts

@@ -0,0 +1 @@
+export type PanelShadow = "always" | "hover" | "never";