yg-yygl 0.0.1

package/dist/views/sys/mail/mail-whitelist/index.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+import type { MailBlackWhiteListResponse, MailBlackWhiteListQueryRequest } from '../../../../api/mail/types';
+
+import { computed, h, reactive, ref } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Drawer,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import { deleteMailBlackWhite, getMailBlackWhiteList } from '../../../../api/mail';
+import { Tag } from '../../../../components/custom-tags';
+import { MainContainer } from '../../../../components/main-container';
+
+import MailWhitelistForm from './components/mail-whitelist-form.vue';
+
+// 查询
+const searchParams = ref<MailBlackWhiteListQueryRequest>({ blackWhiteType: 2 });
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'type',
+    label: '类型',
+    type: 'select',
+    options: [
+      { label: '邮箱地址', value: 2 },
+      { label: 'IP地址', value: 1 },
+    ],
+  },
+  {
+    prop: 'value',
+    label: '白名单值',
+    type: 'input',
+    placeholder: '请输入邮箱地址或IP地址',
+  },
+];
+
+// 列表信息
+const columns = reactive<TableColumn[]>([
+  {
+    prop: 'value',
+    label: '白名单值',
+    minWidth: 160,
+    showOverflowTooltip: true,
+  },
+  {
+    prop: 'type',
+    label: '类型',
+    render: ({ row }: { row: MailBlackWhiteListResponse }) =>
+      h(Tag, {
+        value: row.type,
+        effect: 'plain',
+        hit: true,
+        size: 'small',
+        options: [
+          { label: '邮箱地址', value: 2 },
+          { label: 'IP地址', value: 1 },
+        ],
+      }),
+  },
+  {
+    prop: 'reason',
+    label: '原因',
+    minWidth: 160,
+    showOverflowTooltip: true,
+  },
+  {
+    prop: 'expireTime',
+    label: '过期时间',
+    minWidth: 120,
+    formatter: (_row: any, _column: any, cellValue: string) =>
+      cellValue || '永久有效',
+  },
+  { prop: 'createTime', label: '创建时间', minWidth: 120 },
+]);
+
+const actionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: any) => handleEdit(row as MailBlackWhiteListResponse),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: any) => handleDelete(row as MailBlackWhiteListResponse),
+  },
+];
+
+// 配置 API
+const api = {
+  list: (params: any) => getMailBlackWhiteList(params),
+  delete: (id: string | number) => deleteMailBlackWhite(Number(id)),
+};
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset,
+  search,
+  batchDelete,
+  handleSizeChange,
+  handleCurrentPageChange,
+  handleSelectionChange,
+} = useTable({
+  api,
+  initParams: { blackWhiteType: 2 },
+});
+
+const drawerVisible = ref(false);
+const mailWhitelistFormRef = ref<typeof MailWhitelistForm>();
+const drawerType = ref<'add' | 'edit' | 'view'>('add');
+const drawerTitle = computed(() => {
+  if (drawerType.value === 'add') {
+    return '新增白名单';
+  } else if (drawerType.value === 'edit') {
+    return '编辑白名单';
+  } else {
+    return '查看白名单';
+  }
+});
+
+const handleAdd = () => {
+  drawerType.value = 'add';
+  drawerVisible.value = true;
+};
+
+const editRow = ref<any>(null);
+const handleEdit = (row: any) => {
+  drawerType.value = 'edit';
+  editRow.value = row;
+  drawerVisible.value = true;
+};
+
+const handleAddSuccess = async () => {
+  const flag = await mailWhitelistFormRef.value?.handleSubmit();
+  if (flag) {
+    handleDrawerClosed();
+    refresh();
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  editRow.value = null;
+};
+
+const handleDelete = async (row: MailBlackWhiteListResponse) => {
+  ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async (action) => {
+    if (action === 'confirm') {
+      await deleteMailBlackWhite(row.id);
+      ElMessage.success('删除成功');
+      refresh();
+    }
+  });
+};
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  search({
+    ...params,
+    blackWhiteType: 2,
+  });
+};
+
+const handleFilterReset = () => {
+  searchParams.value = { blackWhiteType: 2 };
+  reset();
+};
+</script>
+
+<template>
+  <MainContainer>
+    <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+      <Table
+        :data="data"
+        :columns="columns"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        :show-layout="false"
+        layout-type="table"
+        action-width="110px"
+        @refresh="refresh"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+        :on-batch-delete="batchDelete"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleAdd">
+              新增白名单
+            </IconButton>
+          </div>
+        </template>
+        <template #action="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+    <Drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      :type="drawerType"
+      size="808px"
+      :show-confirm-button="drawerType !== 'view'"
+      :cancel-text="drawerType === 'view' ? '关闭' : '取消'"
+      @confirm="handleAddSuccess"
+      @closed="handleDrawerClosed"
+    >
+      <MailWhitelistForm
+        ref="mailWhitelistFormRef"
+        :edit-data="editRow"
+        :type="drawerType"
+      />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss">
+:global(.long-text-tooltip) {
+  max-width: min(720px, calc(100vw - 32px));
+  white-space: normal;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
+:global(.long-text-tooltip-content) {
+  max-width: 100%;
+  white-space: normal;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+</style>

package/dist/views/sys/mail/mail-whitelist/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/sys/menu/components/label-selector.d.vue.ts

@@ -0,0 +1,20 @@
+import type { MenuLabelResponse } from '../../../../api/menu/types';
+interface Props {
+    menuLabels?: MenuLabelResponse[];
+    excludeIds?: string[];
+    menuStyle?: number;
+}
+declare const _default: import("vue").DefineComponent<Props, {
+    handleCancel: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    confirm: (labels: MenuLabelResponse[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((labels: MenuLabelResponse[]) => any) | undefined;
+}>, {
+    menuLabels: MenuLabelResponse[];
+    excludeIds: string[];
+    menuStyle: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/menu/components/label-selector.vue

@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import type { MenuLabelResponse } from '../../../../api/menu/types';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Close, Search } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import { getMenuLabelList } from '../../../../api/menu';
+
+interface Props {
+  menuLabels?: MenuLabelResponse[];
+  excludeIds?: string[];
+  menuStyle?: number; // 菜单样式：0-Web菜单，1-App菜单
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  menuLabels: () => [],
+  excludeIds: () => [],
+  menuStyle: 0,
+});
+
+const emit = defineEmits<{
+  cancel: [];
+  confirm: [labels: MenuLabelResponse[]];
+}>();
+
+// 搜索关键词
+const searchKeyword = ref('');
+
+// 所有标签
+const allLabels = ref<MenuLabelResponse[]>([]);
+
+// 选中的标签（临时状态，不立即同步到父组件）
+const selectedLabels = ref<MenuLabelResponse[]>([...props.menuLabels]);
+
+// 原始标签（用于取消时恢复）
+const originalLabels = ref<MenuLabelResponse[]>([...props.menuLabels]);
+
+// 可选标签（排除已选和排除的标签）
+const availableLabels = computed(() => {
+  const selectedIds = new Set(selectedLabels.value.map((l) => l.id));
+  const excludeIds = props.excludeIds || [];
+  return allLabels.value.filter(
+    (label: any) =>
+      !selectedIds.has(label.id) && !excludeIds.includes(label.id),
+  );
+});
+
+// 过滤后的可选标签（搜索通过接口实现，这里直接返回可选标签）
+const filteredAvailableLabels = computed(() => {
+  return availableLabels.value;
+});
+
+// 监听props变化
+watch(
+  () => props.menuLabels,
+  (newValue) => {
+    console.log('LabelSelector 接收到标签变化:', newValue?.length || 0, '个');
+    selectedLabels.value = [...(newValue || [])];
+    originalLabels.value = [...(newValue || [])];
+  },
+  { deep: true, immediate: true },
+);
+
+// 监听menuStyle变化，重新加载标签列表
+watch(
+  () => props.menuStyle,
+  () => {
+    loadLabels(searchKeyword.value);
+  },
+);
+
+// 加载标签列表
+const loadLabels = async (keyword = '') => {
+  try {
+    const response = await getMenuLabelList({
+      labelName: keyword, // 根据关键词搜索
+      labelStyle: props.menuStyle ?? 0, // 根据菜单样式过滤：0-Web菜单，1-App菜单
+    });
+
+    allLabels.value = response || [];
+  } catch (error) {
+    console.error('获取标签列表失败:', error);
+    ElMessage.error('获取标签列表失败');
+  }
+};
+
+// 搜索处理 - 实时查询
+const handleSearch = () => {
+  loadLabels(searchKeyword.value);
+};
+
+// 判断标签是否已选
+const isSelected = (label: MenuLabelResponse) => {
+  return selectedLabels.value.some((l: any) => l.id === label.id);
+};
+
+// 切换标签选择状态（仅更新临时状态，不立即同步到父组件）
+const toggleLabel = (label: MenuLabelResponse) => {
+  const index = selectedLabels.value.findIndex((l: any) => l.id === label.id);
+  if (index === -1) {
+    // 检查标签数量限制
+    if (selectedLabels.value.length >= 10) {
+      ElMessage.warning('菜单绑定的标签数量不能超过10个');
+      return;
+    }
+    selectedLabels.value.push(label);
+  } else {
+    selectedLabels.value.splice(index, 1);
+  }
+};
+
+// 移除标签（仅更新临时状态，不立即同步到父组件）
+const removeLabel = (label: MenuLabelResponse) => {
+  const index = selectedLabels.value.findIndex((l: any) => l.id === label.id);
+  if (index !== -1) {
+    selectedLabels.value.splice(index, 1);
+  }
+};
+
+// 清空所有标签（仅更新临时状态，不立即同步到父组件）
+const clearAllLabels = () => {
+  selectedLabels.value = [];
+};
+
+// 确认选择（将临时状态同步到父组件）
+const handleConfirm = () => {
+  originalLabels.value = [...selectedLabels.value];
+  emit('confirm', selectedLabels.value);
+};
+
+// 取消选择（恢复到原始状态）
+const handleCancel = () => {
+  selectedLabels.value = [...originalLabels.value];
+  emit('cancel');
+};
+
+// 初始化
+onMounted(() => {
+  loadLabels();
+});
+
+// 暴露方法给父组件
+defineExpose({
+  handleCancel,
+});
+</script>
+
+<template>
+  <div class="label-selector">
+    <div class="selector-content">
+      <!-- 左侧：搜索和全部标签 -->
+      <div class="left-panel">
+        <!-- 搜索框 -->
+        <div class="search-section">
+          <el-input
+            v-model="searchKeyword"
+            placeholder="请输入标签"
+            clearable
+            @input="handleSearch"
+          >
+            <template #prefix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <!-- 全部标签 -->
+        <div class="all-labels-section">
+          <div class="section-title">全部标签</div>
+          <div class="labels-list">
+            <div class="label-checkbox-list">
+              <el-checkbox
+                v-for="label in filteredAvailableLabels"
+                :key="label.id"
+                :model-value="isSelected(label)"
+                @change="toggleLabel(label)"
+                class="label-checkbox-item"
+              >
+                {{ label.labelName }}
+              </el-checkbox>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：已选标签 -->
+      <div class="right-panel">
+        <!-- 已选标签标题和清空按钮 -->
+        <div class="selected-header">
+          <div class="selected-title-wrapper">
+            <span class="selected-title">已选标签</span>
+            <span class="label-count" :class="{ 'count-warning': selectedLabels.length >= 10 }">
+              ({{ selectedLabels.length }}/10)
+            </span>
+          </div>
+          <el-button
+            text
+            type="primary"
+            @click="clearAllLabels"
+            v-if="selectedLabels.length > 0"
+          >
+            清空列表
+          </el-button>
+        </div>
+
+        <!-- 已选标签展示 -->
+        <div class="selected-labels-display">
+          <div v-if="selectedLabels.length === 0" class="empty-selected">
+            暂无已选标签
+          </div>
+          <div v-else class="selected-labels-grid">
+            <div
+              v-for="label in selectedLabels"
+              :key="label.id"
+              class="selected-label-item"
+            >
+              <el-checkbox :model-value="true" @change="removeLabel(label)">
+                {{ label.labelName }}
+              </el-checkbox>
+              <el-icon class="remove-icon" @click="removeLabel(label)">
+                <Close />
+              </el-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部操作按钮 -->
+    <div class="footer-actions">
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.label-selector {
+  display: flex;
+  flex-direction: column;
+  height: 500px;
+}
+
+.selector-content {
+  display: flex;
+  flex: 1;
+  gap: 20px;
+  overflow: hidden;
+}
+
+.left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e4e7ed;
+  padding-right: 20px;
+}
+
+.right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-section {
+  margin-bottom: 16px;
+}
+
+.all-labels-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.section-title {
+  margin-bottom: 12px;
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+}
+
+.labels-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.label-checkbox-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label-checkbox-item {
+  margin: 0;
+}
+
+.selected-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.selected-title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.selected-title {
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+}
+
+.label-count {
+  font-size: 12px;
+  color: #909399;
+  font-weight: normal;
+}
+
+.label-count.count-warning {
+  color: #f56c6c;
+  font-weight: 600;
+}
+
+.selected-labels-display {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.empty-selected {
+  color: #909399;
+  font-size: 14px;
+  text-align: center;
+  padding: 20px;
+}
+
+.selected-labels-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.selected-label-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0;
+}
+
+.remove-icon {
+  cursor: pointer;
+  color: #909399;
+  font-size: 14px;
+}
+
+.remove-icon:hover {
+  color: #f56c6c;
+}
+
+.footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0 0 0;
+  border-top: 1px solid #e4e7ed;
+  margin-top: 16px;
+}
+
+.color-picker-wrapper {
+  display: flex;
+  align-items: center;
+}
+</style>

package/dist/views/sys/menu/components/label-selector.vue.d.ts

@@ -0,0 +1,20 @@
+import type { MenuLabelResponse } from '../../../../api/menu/types';
+interface Props {
+    menuLabels?: MenuLabelResponse[];
+    excludeIds?: string[];
+    menuStyle?: number;
+}
+declare const _default: import("vue").DefineComponent<Props, {
+    handleCancel: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    confirm: (labels: MenuLabelResponse[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((labels: MenuLabelResponse[]) => any) | undefined;
+}>, {
+    menuLabels: MenuLabelResponse[];
+    excludeIds: string[];
+    menuStyle: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/menu/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;