first commit

resources/admin/components/admin/Select/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-select v-bind="$attrs">
+    <el-option-group v-for="group in elOptions" :key="group.label" :label="group.label" v-if="group">
+      <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
+    </el-option-group>
+    <el-option v-for="option in elOptions" :key="option.value" :label="option.label" :value="option.value" v-else>
+      <slot />
+    </el-option>
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import http from '/admin/support/http'
+import { ref } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: [],
+  },
+  api: {
+    type: String,
+    default: '',
+  },
+  group: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+interface Option {
+  label: string
+  value: string | number
+}
+
+interface GroupOption {
+  label: string
+  options: Array<Option>
+}
+
+const elOptions = props.group ? ref<Array<GroupOption>>() : ref<Array<Option>>()
+if (props.api) {
+  http.get('options/' + props.api).then(r => {
+    elOptions.value = r.data.data
+  })
+} else {
+  elOptions.value = props.options
+}
+</script>

resources/admin/components/admin/buttons/add.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-button type="primary" :size="size"><Icon name="plus" class="w-4 mr-1" /> {{ text }}</el-button>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: {
+    type: String,
+    default: 'default',
+  },
+  text: {
+    type: String,
+    default: '新增',
+  },
+})
+</script>

resources/admin/components/admin/buttons/destroy.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-button type="danger" :size="size"><Icon name="trash" class="w-4 mr-1" /> {{ text }}</el-button>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: {
+    type: String,
+    default: 'small',
+  },
+  text: {
+    type: String,
+    default: '删除',
+  },
+})
+</script>

resources/admin/components/admin/buttons/show.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-button type="primary" :size="size"><Icon name="eye" class="w-4 mr-1" /> {{ text }}</el-button>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: {
+    type: String,
+    default: 'small',
+  },
+  text: {
+    type: String,
+    default: '详情',
+  },
+})
+</script>

resources/admin/components/admin/buttons/update.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-button type="success" :size="size"><Icon name="pencil-square" class="w-4 mr-1" /> {{ text }}</el-button>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: {
+    type: String,
+    default: 'small',
+  },
+  text: {
+    type: String,
+    default: '更新',
+  },
+})
+</script>
+
+<style scoped></style>

resources/admin/components/admin/dialog/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <el-dialog :model-value="modelValue" :show-close="false" :fullscreen="isFullscreen" v-bind="$attrs" :width="width" :close="close" :before-close="beforeClose" draggable>
+      <template #header="{ titleId, titleClass }">
+        <div class="flex justify-between w-full">
+          <div>
+            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
+          </div>
+          <div class="flex w-14 justify-between">
+            <Icon :name="fullscreenIcon" @click="fullscreen" class="hover:cursor-pointer" />
+            <Icon name="x-mark" class="hover:cursor-pointer" @click="close" />
+          </div>
+        </div>
+      </template>
+      <slot />
+      <template #footer v-if="showFooter">
+        <span class="dialog-footer">
+          <el-button @click="close">{{ $t('system.cancel') }}</el-button>
+          <el-button type="primary" @click="close">{{ $t('system.confirm') }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+    require: true,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+
+  width: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const isFullscreen = ref(false)
+
+const fullscreenIcon = computed(() => {
+  return isFullscreen.value ? 'arrows-pointing-in' : 'arrows-pointing-out'
+})
+const fullscreen = () => {
+  isFullscreen.value = !isFullscreen.value
+}
+
+const close = () => {
+  emits('update:modelValue', false)
+}
+
+// 遮罩关闭调用
+const beforeClose = () => {
+  emits('update:modelValue', false)
+}
+const width = ref<string>('')
+
+onMounted(() => {
+  width.value = props.width ? props.width : getWidth()
+})
+
+// 窗口尺寸
+const getWidth = () => {
+  const clientWidth = window.document.body.clientWidth
+
+  if (clientWidth <= 726) {
+    return '100%'
+  }
+
+  if (clientWidth > 726 && clientWidth < 1440) {
+    return '60%'
+  }
+
+  return '650px'
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.el-dialog) {
+  border-radius: 0.5rem;
+  .el-dialog__header {
+    margin-right: 0 !important;
+    border-bottom: 1px solid #e2e8f0;
+  }
+}
+</style>

resources/admin/components/admin/status/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <el-switch @change="enabled(api, id)" :active-value="Status.ENABLE" :inactive-value="Status.DISABLE" :model-value="modelValue" :loading="loading" />
+</template>
+
+<script lang="ts" setup>
+import { useEnabled } from '/admin/composables/curd/useEnabled'
+import { Status } from '/admin/enum/app'
+import { watch } from 'vue'
+
+const props = defineProps({
+  modelValue: Boolean | Number | String,
+  api: String,
+  id: Number | String,
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const { enabled, success, loading } = useEnabled()
+
+watch(success, function () {
+  emits('update:modelValue', props.modelValue === Status.ENABLE ? Status.DISABLE : Status.ENABLE)
+  success.value = false
+})
+</script>