yg-yygl 0.0.1

package/src/views/data/interface-oauth/interface-oauth-form.vue

@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type { OAuth, OAuthCreateParams } from '../../../api/interface-oauth/types';
+
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import { Dialog, Form } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createOAuthApplication,
+  getAppSecret,
+  getOAuthApplicationById,
+  updateOAuthApplication,
+} from '../../../api/interface-oauth';
+
+import InterfaceTable from './components/interface-table.vue';
+import UserTable from './components/user-table.vue';
+import VerifySignatureDescription from './components/verify-signature-description.vue';
+
+const props = defineProps<{
+  editData?: null | OAuth;
+  isView?: boolean;
+}>();
+
+// 组件状态
+const isEdit = computed(() => !!props.editData?.id);
+const loading = ref(false);
+const formRef = ref();
+
+// 表单数据
+const formData = reactive<OAuth | OAuthCreateParams>({
+  appId: '',
+  appName: '',
+  appSecret: '',
+  dataInterfaceIds: [],
+  description: '',
+  verifySignature: 0,
+  blackList: '',
+  whiteList: '',
+  usefulLife: null,
+  sort: 1,
+  status: 1,
+});
+
+// 表单配置
+const formItems = ref<FormItemConfig[]>([
+  {
+    prop: 'appId',
+    label: '应用ID',
+    type: 'input',
+    required: true,
+    placeholder: '请输入应用ID',
+    props: {
+      disabled: isEdit.value,
+    },
+    rules: [
+      { required: true, message: '请输入应用ID', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 50,
+        message: '应用ID长度应在 2-50 个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'appName',
+    label: '应用名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入应用名称',
+    rules: [
+      { required: true, message: '请输入应用名称', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 50,
+        message: '应用名称长度应在 2-50 个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'appSecret',
+    label: '应用密钥',
+    type: 'password',
+    required: true,
+    placeholder: '请输入应用密钥',
+    rules: [
+      { required: true, message: '请输入应用密钥', trigger: ['blur', 'input'] },
+    ],
+    slot: 'appSecret',
+  },
+  // {
+  //   prop: 'verifySignature',
+  //   label: '验证签名',
+  //   type: 'switch',
+  //   props: {
+  //     activeValue: 1,
+  //     inactiveValue: 0,
+  //   },
+  //   slot: 'verifySignature',
+  // },
+  {
+    prop: 'whiteList',
+    label: '白名单',
+    type: 'textarea',
+    placeholder: '请输入白名单IP，多个IP用逗号分隔',
+    props: {
+      rows: 3,
+    },
+  },
+  {
+    prop: 'usefulLife',
+    label: '有效期',
+    type: 'date',
+    placeholder: '请选择有效期',
+    props: {
+      valueFormat: 'YYYY-MM-DD',
+      format: 'YYYY-MM-DD',
+    },
+  },
+  {
+    prop: 'sort',
+    label: '排序',
+    type: 'number',
+    props: {
+      min: 1,
+      max: 999_999,
+    },
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'switch',
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+  },
+  {
+    prop: 'description',
+    label: '描述',
+    type: 'textarea',
+    placeholder: '请输入描述信息',
+    props: {
+      rows: 3,
+      showWordLimit: true,
+      maxlength: 100,
+    },
+  },
+]);
+
+const handleGetAppSecret = async (setValue: (value: any) => void) => {
+  try {
+    const key = await getAppSecret();
+    setValue(key);
+
+    await nextTick();
+
+    if (typeof formRef.value?.clearValidate === 'function') {
+      formRef.value?.clearValidate(['appSecret']);
+    }
+
+    if (typeof formRef.value?.validateField === 'function') {
+      formRef.value?.validateField('appSecret');
+    }
+  } catch (error) {
+    console.error('获取应用密钥失败:', error);
+  }
+};
+
+const showVerifySignatureDesc = ref(false);
+
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) return false;
+
+    const formValues = formRef.value?.getValues();
+
+    console.log(222, formValues);
+    // 提交数据
+    const submitData = { ...formValues };
+
+    // 根据是否为编辑模式调用不同的API
+    await (isEdit.value
+      ? updateOAuthApplication({
+          ...submitData,
+          id: props.editData?.id as string,
+        })
+      : createOAuthApplication(submitData));
+
+    ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+    return true;
+  } catch (error) {
+    console.error('提交失败:', error);
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 详情 - 当前展示的tab
+const currentTab = ref<'interface' | 'user'>('interface');
+
+const setComponent = computed(() => {
+  if (currentTab.value === 'interface') {
+    return InterfaceTable;
+  }
+  return UserTable;
+});
+
+// 初始化表单数据
+const initFormData = async (data?: null | OAuth) => {
+  if (data?.id) {
+    try {
+      const res = await getOAuthApplicationById(data.id);
+      nextTick(() => {
+        formRef.value?.setValues({
+          appId: res.appId || '',
+          appName: res.appName || '',
+          appSecret: res.appSecret || '',
+          dataInterfaceIds: res.dataInterfaceIds || [],
+          description: res.description || '',
+          verifySignature: 0,
+          blackList: res.blackList || '',
+          whiteList: res.whiteList || '',
+          usefulLife: res.usefulLife || null,
+          sort: res.sort ?? 1,
+          status: res.status ?? 1,
+        });
+      });
+    } catch (error) {
+      console.error('初始化表单数据失败:', error);
+    }
+  }
+};
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  (newData) => {
+    initFormData(newData);
+  },
+  { immediate: true, deep: true },
+);
+
+// 生命周期
+onMounted(() => {
+  // 初始化数据已在watch中处理
+});
+
+defineExpose({
+  handleSubmit,
+  initFormData,
+});
+</script>
+
+<template>
+  <div class="h-full w-full overflow-y-auto">
+    <Form
+      ref="formRef"
+      :disabled="isView"
+      :items="formItems"
+      :initial-values="formData"
+      :show-actions="false"
+      label-width="auto"
+      @submit="handleSubmit"
+    >
+      <!-- 可以在这里添加自定义插槽 -->
+      <template #appSecret="{ model, setValue }">
+        <el-input
+          :model-value="model.appSecret"
+          type="password"
+          :show-password="true"
+          placeholder="请输入"
+          readonly
+        >
+          <template #append>
+            <el-button @click="handleGetAppSecret(setValue)">
+              获取密钥
+            </el-button>
+          </template>
+        </el-input>
+      </template>
+      <!-- <template #verifySignature="{ model, setValue }">
+        <section class="flex w-full justify-between">
+          <el-switch
+            :model-value="model.verifySignature"
+            :active-value="1"
+            :inactive-value="0"
+            @update:model-value="setValue"
+          />
+          <el-button type="info" text @click="showVerifySignatureDesc = true">
+            验证签名使用说明
+          </el-button>
+        </section>
+      </template> -->
+    </Form>
+    <div v-if="isView" class="w-full">
+      <div
+        class="relative flex h-[40px] w-full items-center border-b border-gray-200"
+      >
+        <div
+          class="h-full flex-1 cursor-pointer text-center leading-[40px]"
+          :class="{
+            'text-primary': currentTab === 'interface',
+          }"
+          @click="currentTab = 'interface'"
+        >
+          接口集合
+        </div>
+        <div
+          class="h-full flex-1 cursor-pointer text-center leading-[40px]"
+          :class="{
+            'text-primary': currentTab === 'user',
+          }"
+          @click="currentTab = 'user'"
+        >
+          用户集合
+        </div>
+        <div
+          class="absolute bottom-0 left-0 w-[50%] transition-all duration-300"
+          :class="{
+            'left-1/2': currentTab === 'user',
+          }"
+        >
+          <div class="border-primary mx-auto w-10 border-b-2"></div>
+        </div>
+      </div>
+      <component
+        :is="setComponent"
+        :id="editData?.id || ''"
+        :interface-ids="editData?.dataInterfaceIds || []"
+      />
+    </div>
+    <Dialog
+      v-model="showVerifySignatureDesc"
+      title="验证签名使用说明"
+      type="page"
+      top="10vh"
+      body-class="h-[70vh] overflow-y-auto overflow-x-hidden"
+      :show-confirm-button="false"
+      @cancel="showVerifySignatureDesc = false"
+    >
+      <VerifySignatureDescription />
+    </Dialog>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/views/demo-case/affix/index.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const currentTab = ref('1');
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Affix 固钉
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        将页面元素固定在指定可视区域
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-2 text-base font-medium text-[hsl(var(--foreground))]">
+        基础用法
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        固钉默认固定在页面顶部
+      </p>
+      <div class="relative h-300 border border-dashed border-gray-300 bg-gray-50">
+        <el-affix :offset="20">
+          <el-button type="primary">固定位置</el-button>
+        </el-affix>
+      </div>
+    </div>
+
+    <!-- 区域2：指定容器 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-2 text-base font-medium text-[hsl(var(--foreground))]">
+        指定容器
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        创建固钉时指定容器元素，将固定在容器顶部
+      </p>
+      <div class="relative max-h-300 overflow-auto border border-dashed border-blue-300 bg-blue-50 p-4">
+        <el-affix target=".affix-container" :offset="0">
+          <el-button type="primary">固定顶部位置</el-button>
+        </el-affix>
+        <div class="affix-container mt-16 space-y-4">
+          <div class="h-20 bg-white p-4 rounded">容器内容 1</div>
+          <div class="h-20 bg-white p-4 rounded">容器内容 2</div>
+          <div class="h-20 bg-white p-4 rounded">容器内容 3</div>
+          <div class="h-20 bg-white p-4 rounded">容器内容 4</div>
+          <div class="h-20 bg-white p-4 rounded">容器内容 5</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.h-300 {
+  height: 300px;
+}
+.max-h-300 {
+  max-height: 300px;
+}
+.mt-16 {
+  margin-top: 4rem;
+}
+</style>

package/src/views/demo-case/alert/index.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// Alert可见性控制
+const alert1 = ref(true);
+const alert2 = ref(true);
+const alert3 = ref(true);
+const alert4 = ref(true);
+
+const handleClose = (refName: string) => {
+  if (refName === 'alert1') alert1.value = false;
+  if (refName === 'alert2') alert2.value = false;
+  if (refName === 'alert3') alert3.value = false;
+  if (refName === 'alert4') alert4.value = false;
+};
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Alert 提示 (UDP UI)
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        基于 Element Plus 封装的 UDP UI 提示组件，用于页面中展示重要的提示信息
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        基础用法
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">页面中的非浮层元素，不会自动消失。</p>
+      <div class="flex flex-col gap-3">
+        <UdpAlert title="成功提示的文案" type="success" show-icon />
+        <UdpAlert title="消息提示的文案" type="info" show-icon />
+        <UdpAlert title="警告提示的文案" type="warning" show-icon />
+        <UdpAlert title="错误提示的文案" type="error" show-icon />
+      </div>
+    </div>
+
+    <!-- 区域2：主题 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        主题
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">Alert 组件提供了两个不同的主题：light 和 dark。</p>
+      <div class="flex flex-col gap-3">
+        <UdpAlert title="success theme" type="success" effect="dark" />
+        <UdpAlert title="info theme" type="info" effect="dark" />
+        <UdpAlert title="warning theme" type="warning" effect="dark" />
+        <UdpAlert title="error theme" type="error" effect="dark" />
+      </div>
+    </div>
+
+    <!-- 区域3：自定义关闭按钮 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        自定义关闭按钮
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">自定义关闭按钮，文字、图标或关闭按钮均可自定义。</p>
+      <div class="flex flex-col gap-3">
+        <UdpAlert v-if="alert1" title="不可关闭的 alert" type="success" :closable="false" />
+        <UdpAlert v-if="alert2" title="自定义 close-text" type="info" close-text="知道了" @close="handleClose('alert2')" />
+        <UdpAlert v-if="alert3" title="设置了回调的 alert" type="warning" @close="handleClose('alert3')" />
+        <UdpAlert v-if="alert4" title="不可关闭的 alert" type="error" :closable="false" />
+      </div>
+      <div class="mt-4">
+        <UdpButton v-if="!alert1 || !alert2 || !alert3 || !alert4" type="primary" @click="() => { alert1 = true; alert2 = true; alert3 = true; alert4 = true; }">
+          重置
+        </UdpButton>
+      </div>
+    </div>
+
+    <!-- 区域4：带有辅助性文字介绍 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        带有辅助性文字介绍
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">包含标题和内容，解决更复杂的场景。</p>
+      <div class="flex flex-col gap-3">
+        <UdpAlert
+          title="带辅助性文字介绍"
+          type="success"
+          description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰化肥发挥。"
+          show-icon
+        />
+        <UdpAlert
+          title="带辅助性文字介绍"
+          type="info"
+          description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰化肥发挥。"
+          show-icon
+        />
+        <UdpAlert
+          title="带辅助性文字介绍"
+          type="warning"
+          description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰化肥发挥。"
+          show-icon
+        />
+        <UdpAlert
+          title="带辅助性文字介绍"
+          type="error"
+          description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰化肥发挥。"
+          show-icon
+        />
+      </div>
+    </div>
+
+    <!-- 区域5：带有图标 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        带有 icon
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">通过设置 show-icon 属性来显示 Alert 的 icon，这能更有效地向用户传达你的设计意图。</p>
+      <div class="flex flex-col gap-3">
+        <UdpAlert title="成功提示的文案" type="success" show-icon />
+        <UdpAlert title="消息提示的文案" type="info" show-icon />
+        <UdpAlert title="警告提示的文案" type="warning" show-icon />
+        <UdpAlert title="错误提示的文案" type="error" show-icon />
+      </div>
+    </div>
+
+    <!-- 区域6：文字居中 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        文字居中
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">使用 center 属性让文字水平居中。</p>
+      <div class="flex flex-col gap-3">
+        <UdpAlert title="成功提示的文案" type="success" center show-icon />
+        <UdpAlert title="消息提示的文案" type="info" center show-icon />
+        <UdpAlert title="警告提示的文案" type="warning" center show-icon />
+        <UdpAlert title="错误提示的文案" type="error" center show-icon />
+      </div>
+    </div>
+  </div>
+</template>

package/src/views/demo-case/anchor/index.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const activeAnchor = ref('basic');
+const horizontalActive = ref('basic');
+const scrollActive = ref('section1');
+const underlineActive = ref('basic');
+
+const scrollTo = (id: string) => {
+  const element = document.getElementById(id);
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth' });
+  }
+};
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Anchor 锚点
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        通过锚点，您可以快速跳转到当前页面上指定内容的位置
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        基础用法
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        最简单的用法
+      </p>
+      <el-anchor :active="activeActive">
+        <el-anchor-link href="#basic" title="基础用法" />
+        <el-anchor-link href="#horizontal" title="水平模式" />
+        <el-anchor-link href="#scroll" title="滚动容器" />
+      </el-anchor>
+    </div>
+
+    <!-- 区域2：水平模式 -->
+    <div id="horizontal" class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        水平模式
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        水平排列的锚点
+      </p>
+      <el-anchor :active="horizontalActive" direction="horizontal">
+        <el-anchor-link href="#basic" title="基础用法" />
+        <el-anchor-link href="#horizontal" title="水平模式" />
+        <el-anchor-link href="#scroll" title="滚动容器" />
+      </el-anchor>
+    </div>
+
+    <!-- 区域3：滚动容器 -->
+    <div id="scroll" class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        滚动容器
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        自定义滚动区域，使用 scroll-into-view 可以设置容器内滚动
+      </p>
+      <div class="flex gap-4">
+        <div class="flex-1 max-h-60 overflow-auto border border-dashed border-gray-300 bg-gray-50 p-4">
+          <div id="section1" class="h-20 bg-white p-4 rounded mb-4">第一部分</div>
+          <div id="section2" class="h-20 bg-white p-4 rounded mb-4">第二部分</div>
+          <div id="section3" class="h-20 bg-white p-4 rounded mb-4">第三部分</div>
+        </div>
+        <el-anchor :active="scrollActive" :offset="20" class="w-40 bg-gray-100 p-4 rounded">
+          <el-anchor-link href="#section1" title="第一部分" />
+          <el-anchor-link href="#section2" title="第二部分" />
+          <el-anchor-link href="#section3" title="第三部分" />
+        </el-anchor>
+      </div>
+    </div>
+
+    <!-- 区域4：下划线类型 -->
+    <div id="underline" class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        下划线类型
+      </h3>
+      <el-anchor :active="underlineActive" type="underline">
+        <el-anchor-link href="#basic" title="基础用法" />
+        <el-anchor-link href="#horizontal" title="水平模式" />
+        <el-anchor-link href="#scroll" title="滚动容器" />
+      </el-anchor>
+    </div>
+  </div>
+</template>