@utogether/udp-core 1.0.0

package/src/components/SuCommon/card/components/Card.vue

@@ -0,0 +1,148 @@
+<template>
+  <div :class="cardClass">
+    <div class="list-card-item_detail bg-bg_color">
+      <el-row justify="space-between">
+        <div :class="cardLogoClass">
+          <!-- <shopIcon v-if="product.type === 1" />
+          <calendarIcon v-if="product.type === 2" />
+          <serviceIcon v-if="product.type === 3" />
+          <userAvatarIcon v-if="product.type === 4" />
+          <laptopIcon v-if="product.type === 5" /> -->
+        </div>
+        <div class="list-card-item_detail--operation">
+          <el-tag
+            :color="product.isSetup ? '#00a870' : '#eee'"
+            effect="dark"
+            class="mx-1 list-card-item_detail--operation--tag"
+          >
+            {{ product.isSetup ? '已启用' : '已停用' }}
+          </el-tag>
+        </div>
+      </el-row>
+      <p class="list-card-item_detail--name text-text_color_primary">
+        {{ product.name }}
+      </p>
+      <p class="list-card-item_detail--desc text-text_color_regular">
+        {{ product.description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue';
+// import shopIcon from '@/assets/svg/shop.svg?component';
+// import laptopIcon from '@/assets/svg/laptop.svg?component';
+// import serviceIcon from '@/assets/svg/service.svg?component';
+// import calendarIcon from '@/assets/svg/calendar.svg?component';
+// import userAvatarIcon from '@/assets/svg/user_avatar.svg?component';
+import More2Fill from '@iconify-icons/ri/more-2-fill';
+
+defineOptions({
+  name: 'SuCard'
+});
+
+interface CardProductType {
+  type: number;
+  isSetup: boolean;
+  description: string;
+  name: string;
+}
+
+const props = defineProps({
+  product: {
+    type: Object as PropType<CardProductType>
+  }
+});
+
+const emit = defineEmits(['manage-product', 'delete-item']);
+
+const handleClickManage = (product: CardProductType) => {
+  emit('manage-product', product);
+};
+
+const handleClickDelete = (product: CardProductType) => {
+  emit('delete-item', product);
+};
+
+const cardClass = computed(() => [
+  'list-card-item',
+  { 'list-card-item__disabled': !props.product.isSetup }
+]);
+
+const cardLogoClass = computed(() => [
+  'list-card-item_detail--logo',
+  { 'list-card-item_detail--logo__disabled': !props.product.isSetup }
+]);
+</script>
+
+<style scoped lang="scss">
+.list-card-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 3px;
+
+  &_detail {
+    flex: 1;
+    min-height: 140px;
+    padding: 24px 32px;
+
+    &--logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 56px;
+      height: 56px;
+      font-size: 32px;
+      color: #0052d9;
+      background: #e0ebff;
+      border-radius: 50%;
+
+      &__disabled {
+        color: #a1c4ff;
+      }
+    }
+
+    &--operation {
+      display: flex;
+      height: 100%;
+
+      &--tag {
+        border: 0;
+      }
+    }
+
+    &--name {
+      margin: 24px 0 8px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    &--desc {
+      display: -webkit-box;
+      height: 40px;
+      margin-bottom: 24px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      font-size: 12px;
+      line-height: 20px;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  &__disabled {
+    .list-card-item_detail--name,
+    .list-card-item_detail--desc {
+      color: var(--el-text-color-disabled);
+    }
+
+    .list-card-item_detail--operation--tag {
+      color: #bababa;
+    }
+  }
+}
+</style>

package/src/components/SuCommon/card/components/DialogForm.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { message } from '@/utils/message';
+import { FormInstance } from 'element-plus';
+
+const SELECT_OPTIONS = [
+  { label: '网关', value: 1 },
+  { label: '人工智能', value: 2 },
+  { label: 'CVM', value: 3 },
+  { label: '防火墙', value: 4 },
+  { label: '未知', value: 5 }
+];
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  }
+});
+
+const ruleFormRef = ref<FormInstance>();
+
+const formVisible = ref(false);
+const formData = ref(props.data);
+const textareaValue = ref('');
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      message('提交成功', { type: 'success' });
+      formVisible.value = false;
+      resetForm(formEl);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const closeDialog = () => {
+  formVisible.value = false;
+  resetForm(ruleFormRef.value);
+};
+
+const emit = defineEmits(['update:visible']);
+watch(
+  () => formVisible.value,
+  val => {
+    emit('update:visible', val);
+  }
+);
+
+watch(
+  () => props.visible,
+  val => {
+    formVisible.value = val;
+  }
+);
+
+watch(
+  () => props.data,
+  val => {
+    formData.value = val;
+  }
+);
+
+const rules = {
+  name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
+};
+</script>
+
+<template>
+  <el-dialog v-model="formVisible" title="新建产品" :width="680" draggable :before-close="closeDialog">
+    <!-- 表单内容 -->
+    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px">
+      <el-form-item label="产品名称" prop="name">
+        <el-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入产品名称" />
+      </el-form-item>
+      <el-form-item label="产品状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio label="0">已停用</el-radio>
+          <el-radio label="1">已启用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="产品描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          :style="{ width: '480px' }"
+          placeholder="请输入产品描述"
+        />
+      </el-form-item>
+      <el-form-item label="产品类型" prop="type">
+        <el-select v-model="formData.type" clearable :style="{ width: '480px' }">
+          <el-option
+            v-for="(item, index) in SELECT_OPTIONS"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+          >
+            {{ item.label }}
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="mark">
+        <el-input
+          v-model="textareaValue"
+          type="textarea"
+          :style="{ width: '480px' }"
+          placeholder="请输入内容"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
+    </template>
+  </el-dialog>
+</template>

package/src/components/SuCommon/card/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="main">
+    <div class="w-full flex justify-between mb-4">
+      <vxe-button icon="" @click="formDialogVisible = true"> 新建产品 </vxe-button>
+      <!-- <el-button :icon="useRenderIcon(AddFill)" @click="formDialogVisible = true"> 新建产品 </el-button> -->
+      <vxe-input
+        v-model="searchValue"
+        style="width: 300px"
+        placeholder="请输入关键字查询"
+        clearable
+        type="search"
+      />
+    </div>
+    <div v-loading="dataLoading">
+      <el-empty
+        v-show="
+          productList
+            .slice(
+              pagination.pageSize * (pagination.current - 1),
+              pagination.pageSize * pagination.current
+            )
+            .filter(v => v.name.toLowerCase().includes(searchValue.toLowerCase())).length === 0
+        "
+        description="暂无数据"
+      />
+      <template v-if="pagination.total > 0">
+        <el-row :gutter="16">
+          <el-col
+            v-for="(product, index) in productList
+              .slice(
+                pagination.pageSize * (pagination.current - 1),
+                pagination.pageSize * pagination.current
+              )
+              .filter(v => v.name.toLowerCase().includes(searchValue.toLowerCase()))"
+            :key="index"
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="4"
+          >
+            <Card
+              :product="product"
+              @delete-item="handleDeleteItem"
+              @manage-product="handleManageProduct"
+            />
+          </el-col>
+        </el-row>
+        <el-pagination
+          v-model:currentPage="pagination.current"
+          class="float-right"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[12, 24, 36]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="onPageSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </template>
+    </div>
+    <dialogForm v-model:visible="formDialogVisible" :data="formData" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Card from './components/Card.vue';
+import { successMessage } from '@utogether/utils';
+import { ElMessageBox } from 'element-plus';
+import { ref, onMounted, nextTick } from 'vue';
+import dialogForm from './components/DialogForm.vue';
+// import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+// import AddFill from '@iconify-icons/ri/add-circle-line';
+
+defineOptions({
+  name: 'ListCard'
+});
+
+const INITIAL_DATA = {
+  name: '',
+  status: '',
+  description: '',
+  type: '',
+  mark: ''
+};
+
+const pagination = ref({ current: 1, pageSize: 12, total: 0 });
+
+const productList = ref([{ name: '1' }]);
+const dataLoading = ref(true);
+
+const getCardListData = async () => {
+  try {
+    productList.value = [];
+    pagination.value = {
+      ...pagination.value,
+      total: 0
+    };
+  } catch (e) {
+    console.log(e);
+  } finally {
+    setTimeout(() => {
+      dataLoading.value = false;
+    }, 500);
+  }
+};
+
+onMounted(() => {
+  getCardListData();
+});
+
+const formDialogVisible = ref(false);
+const formData = ref({ ...INITIAL_DATA });
+const searchValue = ref('');
+
+const onPageSizeChange = (size: number) => {
+  pagination.value.pageSize = size;
+  pagination.value.current = 1;
+};
+const onCurrentChange = (current: number) => {
+  pagination.value.current = current;
+};
+const handleDeleteItem = product => {
+  ElMessageBox.confirm(
+    product ? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复` : '',
+    '提示',
+    {
+      type: 'warning'
+    }
+  )
+    .then(() => {
+      successMessage('删除成功');
+    })
+    .catch(() => {});
+};
+const handleManageProduct = product => {
+  formDialogVisible.value = true;
+  nextTick(() => {
+    formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
+  });
+};
+</script>

package/src/components/SuCommon/icon-select/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="selector w-full">
+    <el-input v-model="inputValue" readonly size="small" class="u-icon-input relative">
+      <template #append>
+        <span
+          v-if="inputValue"
+          class="u-icon-close item-center justify-center text-sm hidden absolute"
+          @click="onDel"
+        >
+          <IconifyIconOffline icon="ri:close-circle-line" />
+        </span>
+        <el-popover
+          :visible="visible"
+          :width="350"
+          :popper-options="{ placement: 'auto' }"
+          :teleported="props.teleported"
+          trigger="click"
+          popper-class="udp-popper"
+          @hide="onHiden"
+        >
+          <template #reference>
+            <div
+              class="w-7 h-full cursor-pointer flex justify-center items-center"
+              @click="visible = !visible"
+            >
+              <i :class="currentActiveType + icon" style="font-size: 16px" />
+            </div>
+          </template>
+
+          <div class="flex items-center pr-2">
+            <el-input v-model="filterValue" class="p-2" placeholder="搜索图标" clearable />
+          </div>
+          <el-divider border-style="dashed" />
+          <el-scrollbar height="220px">
+            <template #default>
+              <ul class="flex flex-wrap px-2 ml-2">
+                <li
+                  v-for="(item, key) in pageList"
+                  :key="key"
+                  :title="item"
+                  class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]"
+                  :style="iconItemStyle(item)"
+                  @click="onChangeIcon(item)"
+                >
+                  <i :class="currentActiveType + item" class="w-5 h-5 text-xl" />
+                </li>
+              </ul>
+            </template>
+          </el-scrollbar>
+          <el-divider border-style="dashed" />
+
+          <div class="w-full h-9 flex items-center overflow-auto border-t border-[#e5e7eb]">
+            <el-pagination
+              class="flex-auto ml-2"
+              :total="total"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :pager-count="5"
+              layout="pager"
+              background
+              small
+              @current-change="onCurrentChange"
+            />
+            <vxe-button
+              class="justify-end mr-2 ml-2"
+              status="danger"
+              size="small"
+              type="text"
+              content="取消"
+              @click="onHiden"
+            />
+          </div>
+        </el-popover>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'SuIconSelect'
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, CSSProperties, toRef, watch, onMounted } from 'vue';
+import { clone } from 'xe-utils';
+import { iconSet } from '@utogether/utils';
+
+type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
+
+const props = defineProps({
+  modelValue: {
+    require: false,
+    type: String
+  },
+  teleported: {
+    require: false,
+    type: Boolean
+  }
+});
+const emit = defineEmits<{ (e: 'update:modelValue', v: string) }>();
+
+const visible = ref(false);
+const inputValue = toRef(props, 'modelValue');
+
+const iconList = ref(Object.keys(iconSet.icons));
+const currentActiveType = ref('ri-');
+const icon = ref();
+
+// 深拷贝图标数据，前端做搜索
+const copyIconList = clone(iconList.value, true);
+
+const pageSize = ref(35);
+const currentPage = ref(1);
+
+const total = ref(0);
+
+// 搜索条件
+const filterValue = ref('');
+
+const setInitIcon = () => {
+  icon.value = 'corner-down-right-fill';
+  if (inputValue.value) {
+    icon.value = inputValue.value.split(':')[1];
+  }
+};
+
+const pageList = computed(() => {
+  if (currentPage.value === 1) {
+    return copyIconList
+      .filter(v => v.includes(filterValue.value))
+      .slice(currentPage.value - 1, pageSize.value);
+  } else {
+    return copyIconList
+      .filter(v => v.includes(filterValue.value))
+      .slice(
+        pageSize.value * (currentPage.value - 1),
+        pageSize.value * (currentPage.value - 1) + pageSize.value
+      );
+  }
+});
+
+const iconItemStyle = computed((): ParameterCSSProperties => {
+  return item => {
+    if (inputValue.value === currentActiveType.value + item) {
+      return {
+        borderColor: 'var(--el-color-primary)',
+        color: 'var(--el-color-primary)'
+      };
+    }
+  };
+});
+
+function onChangeIcon(item) {
+  icon.value = item;
+  emit('update:modelValue', transformIcon());
+  onHiden();
+}
+
+function onCurrentChange(page) {
+  currentPage.value = page;
+}
+
+const transformIcon = () => {
+  if (currentActiveType.value === 'ri-') {
+    return 'ri:' + icon.value;
+  }
+  return currentActiveType.value + icon.value;
+};
+
+const onDel = () => {
+  icon.value = 'corner-down-right-fill';
+  emit('update:modelValue', '');
+};
+
+const setTotal = () => {
+  if (currentPage.value === 1) {
+    total.value = copyIconList.filter(v => v.includes(filterValue.value)).length;
+  } else {
+    total.value = copyIconList.length;
+  }
+};
+
+const onHiden = () => {
+  visible.value = false;
+  filterValue.value = '';
+};
+
+watch(
+  () => {
+    return props.modelValue;
+  },
+  () => {
+    if (props.modelValue) {
+      icon.value = props.modelValue.substring(props.modelValue.indexOf(':') + 1);
+    }
+  }
+);
+watch(
+  () => {
+    return filterValue.value;
+  },
+  () => {
+    currentPage.value = 1;
+    setTotal();
+  }
+);
+
+onMounted(() => {
+  setTotal();
+  setInitIcon();
+});
+</script>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  margin: 1px auto !important;
+}
+
+.icon-item {
+  &:hover {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+    transform: scaleX(1.05);
+    transition: all 0.4s;
+  }
+}
+
+:deep(.el-input-group__append) {
+  padding: 0;
+}
+
+.u-icon-input:hover {
+  .u-icon-close {
+    left: -22px;
+    display: flex;
+    background-color: #fff;
+  }
+}
+</style>