搜索结果列表页面开发

2025-03-12 18:41:20 +08:00
commit 7cebe8fc00
739 changed files with 88149 additions and 0 deletions
--- a/src/components/Setting/GModal/index.vue
+++ b/src/components/Setting/GModal/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <d-modal v-model="vModels" :title="title" class="repo-settings-modal" :showClose="showCloseIcon" :escapable="escapable" :close-on-click-overlay="closeByOverlay">
+    <template #header>
+      <gc-modal-header>
+        <Icon v-if="showWarnIcon" name="gt-warn" color="#F2050D" class="mr-[8px]"></Icon>
+        <span class="text-G900 text-base font-bold leading-[24px]">{{ title }}</span>
+      </gc-modal-header>
+      <div class="line bg-G200"></div>
+    </template>
+    <div v-if="warnText" class="px-24 py-[12px] bg-[#F2050D0C] text-[var(--color-R500)] text-sm font-normal leading-[20px]">
+      {{ warnText }}
+    </div>
+    <div class="pt-20 px-24 pb-24">
+      <slot></slot>
+    </div>
+    <template #footer v-if="showFooter">
+      <slot name="footerGroup"></slot>
+      <div class="flex justify-end px-[24px] pb-24" v-if="!customFooter">
+        <d-button @click="closeModal()" class="mr-[8px]">取消</d-button>
+        <d-button :loading="confirmLoading" :variant="confirmColor === 'primary' ? 'solid' : 'outline'" :color="confirmColor" @click="confirm" :disabled="disabledButton">
+          {{ confirmText }}
+        </d-button>
+      </div>
+    </template>
+  </d-modal>
+</template>
+
+<script setup lang="ts">
+import { useModel } from '@/utils/hooks/useModel';
+
+defineSlots<{
+  default?:() => any,
+  footerGroup?: () => any
+}>();
+
+const props = withDefaults(defineProps<{
+  modelValue?: any
+  'onUpdate:modelValue'?: Function
+  title?: string
+  warnText?: string
+  autoClose?: boolean
+  confirmText?: string
+  cancelText?: string
+  confirmColor?: 'primary' | 'danger'
+  showWarnIcon?: boolean
+  showFooter?: boolean
+  disabledButton?: boolean
+  customFooter?: boolean
+  showCloseIcon?: boolean
+  escapable?: boolean
+  closeByOverlay?: boolean,
+  confirmLoading?: boolean
+}>(), {
+  title: '删除操作',
+  autoClose: true,
+  confirmText: '确定',
+  confirmColor: 'primary',
+  showFooter: true,
+  disabledButton: false,
+  customFooter: false,
+  showCloseIcon: true,
+  escapable: true,
+  closeByOverlay: true,
+  confirmLoading: false
+});
+
+const emits = defineEmits(['closeModal', 'confirm', 'update:modelValue']);
+
+const { vModels } = useModel(props, emits);
+
+const closeModal = () => {
+  emits('closeModal');
+  vModels.value = false;
+};
+
+const openModal = () => {
+  vModels.value = true;
+};
+const confirm = () => {
+  emits('confirm');
+  if (props.autoClose) {
+    vModels.value = false;
+  }
+};
+
+defineExpose({
+  openModal
+});
+
+</script>
+
+<style lang="scss">
+.repo-settings-modal {
+  width: 410px;
+  box-sizing: border-box;
+  padding: 0 0;
+
+  .devui-modal__body {
+    padding: 0;
+  }
+
+  .tip-desc {
+    // @apply text-G900 px-[22px] my-[18px] leading-[28px] break-all;
+  }
+  .devui-modal__header {
+    padding: 14px 24px;
+    height: auto!important;
+  }
+  .btn-close {
+    right: 24px;
+    top: 16px;
+  }
+  .line {
+    width: 100%;
+    height: 1px;
+  }
+}
+</style>
+