feat: 接入 UserHome 前端业务代码（含真实 src/依赖，保留 projman 标准 CI）

src/components/StatsBarModal.vue

@@ -0,0 +1,301 @@
+<template>
+    <Modal
+        v-model="isTableModalShow"
+        class-name="menuwapper-modal"
+        width="1160"
+        :mask="true"
+        title="统计模块设置"
+        :transfer="false"
+    >
+        <div class="fix mb-10">
+            <Button type="primary" size="small" class="fl ml-10 width-10" ghost @click="onEditFormShow()">
+                新建统计模块
+            </Button>
+        </div>
+        <Table
+            :columns="menuBarColumns"
+            :height="360"
+            :loading="tableLoading"
+            :data="tableList"
+            class="link-table"
+            no-data-text="暂无数据"
+        >
+            <template #icon="{ row }">
+                <img class="icon-box" v-if="!!row.icon" :src="$conf.serviceHost + row.icon" alt="" />
+            </template>
+            <template #isShow="{ row }">
+                <Switch :model-value="row.isShow" true-color="#5979ea" @on-change="onMenuBarShowChange(row.id)" />
+            </template>
+
+            <template #roleIds="{ row }">
+                <span>{{ row.roleIds.map((item: number) => RoleTypeDict.find(x => x.k == item)?.v).join(",") }}</span>
+            </template>
+            <!-- <template #orderNum="{ row }">
+                <InputNumber :model-value="row.orderNum" :min="1" />
+            </template> -->
+        </Table>
+        <template #footer>
+            <Button type="primary" ghost @click="isTableModalShow = false">关闭</Button>
+        </template>
+    </Modal>
+    <Modal
+        v-model="isEditModalShow"
+        scrollable
+        width="550"
+        :title="(!formData.id ? '添加' : '编辑') + '统计模块'"
+        :transfer="true"
+    >
+        <Form ref="refEditForm" class="mr-30" :model="formData" :rules="ruleValidate" :label-width="110">
+            <Form-Item label="权限角色：" class="fix" prop="roleIds">
+                <Checkbox
+                    class="fl"
+                    :indeterminate="indeterminate"
+                    :model-value="compCheckAll"
+                    @click.prevent="handleCheckAll"
+                >
+                    全部
+                </Checkbox>
+                <CheckboxGroup v-model="formData.roleIds">
+                    <Checkbox v-for="item in RoleTypeDict" :label="item.k">{{ item.v }}</Checkbox>
+                </CheckboxGroup>
+            </Form-Item>
+            <Form-Item label="名称：" prop="name">
+                <Input max="4" v-model="formData.name" maxlength="30" placeholder="请输入名称" />
+            </Form-Item>
+            <Form-Item label="网址：" prop="url">
+                <Input v-model="formData.url" placeholder="请输入链接" />
+            </Form-Item>
+            <Form-Item label="图标：" prop="icon">
+                <Upload
+                    :on-success="uploadIconSuccess"
+                    :show-upload-list="false"
+                    :action="$conf.serviceHost + '/api/iconUpload'"
+                    :format="['jpg', 'jpeg', 'png', 'gif']"
+                    accept="image/gif,image/jpeg,image/jpg,image/png"
+                    :with-credentials="true"
+                    :headers="uploadHeaders"
+                >
+                    <div v-if="!formData.icon" class="icon-upload-wrap">
+                        <SvgIcon name="upload-add" color="#646566" style="width: 20px; height: 20px" />
+                    </div>
+                    <div class="icon-preview-wrap" v-else>
+                        <SvgIcon
+                            @click.stop="formData.icon = null"
+                            class="cloase-btn"
+                            name="widget-close"
+                            size="18"
+                            color="#fff"
+                        />
+                        <img :src="$conf.serviceHost + formData.icon" alt="" />
+                    </div>
+                </Upload>
+            </Form-Item>
+
+            <Form-Item label="排序号：" prop="orderNum">
+                <InputNumber style="width: 120px" v-model="formData.orderNum" :min="1" placeholder="请输入排序号" />
+            </Form-Item>
+            <Form-Item label="打开方式：" prop="linkOpenType">
+                <RadioGroup v-model="formData.linkOpenType" type="button" button-style="solid">
+                    <Radio :label="item.k" v-for="item in linkOpenTypeDict">{{ item.v }}</Radio>
+                </RadioGroup>
+            </Form-Item>
+        </Form>
+        <template #footer>
+            <Button type="primary" :loading="editLoading" @click="onEditSave">保存</Button>
+            <Button @click="isEditModalShow = false">取消</Button>
+        </template>
+    </Modal>
+</template>
+
+<script lang="ts" setup>
+import StatsBarApi from "@/api/StatsBarApi";
+import { LinkOpenTypeDict, LinkOpenTypeEnum, RoleTypeEnum, RoleTypeDict } from "@/types";
+import Utils from "@/utils";
+import useCurrentInstance from "@/utils/hook/useCurrentInstance";
+import { Message } from "view-ui-plus";
+import { ref, reactive, computed } from "vue";
+import SvgIcon from "@/components/SvgIcon.vue";
+import MyConfirm from "@/components/MyConfirm";
+import { BaseDict } from "@/types/Basics";
+import { find } from "lodash";
+
+interface FormData {
+    id: string | null;
+    roleIds: number[];
+    name: string | null;
+    url: string | null;
+    linkOpenType: number;
+    icon: string | null;
+    orderNum: number | null;
+    isShow: boolean;
+    isEdit: boolean;
+}
+
+// 初始化 formData 的默认值
+const defaultFormData: FormData = {
+    id: null,
+    roleIds: [], // 添加 roleIds 属性
+    name: "",
+    url: "",
+    linkOpenType: 0,
+    icon: "",
+    orderNum: null,
+    isShow: true,
+    isEdit: true,
+};
+
+const { $conf } = useCurrentInstance();
+
+const uploadHeaders = { yschapirequest: 1, yschreferer: Utils.strToHexCharCode(window.location.href) };
+
+const refEditForm = ref<any>(null);
+
+const isTableModalShow = ref(false),
+    isEditModalShow = ref(false),
+    tableLoading = ref(false),
+    editLoading = ref(false),
+    tableList = ref<any[]>([]),
+    formData = reactive(defaultFormData);
+
+const ruleValidate = ref({
+    roleIds: { required: true, type: "array", message: "请选择权限角色", trigger: "change,submit" },
+    name: { required: true, message: "请输入名称", trigger: "blur" },
+    url: { required: true, message: "请输入网址", trigger: "blur" },
+    icon: { required: true, message: "请上传图标", trigger: "change,submit" },
+});
+
+const linkOpenTypeDict = computed(() => LinkOpenTypeDict.filter(x => x.k != LinkOpenTypeEnum.Modal));
+const compCheckAll = computed(() => formData.roleIds.length == RoleTypeDict.length && RoleTypeDict.length > 0);
+const indeterminate = computed(() => formData.roleIds.length > 0 && formData.roleIds.length < RoleTypeDict.length);
+
+const menuBarColumns = ref([
+    {
+        title: "名称",
+        key: "name",
+    },
+    {
+        title: "图标",
+        slot: "icon",
+    },
+    {
+        title: "角色",
+        width: 150,
+        slot: "roleIds",
+    },
+    {
+        title: "地址",
+        key: "url",
+        width: 150,
+        tooltip: true,
+    },
+    {
+        title: "打开方式",
+        key: "linkType",
+    },
+    {
+        title: "是否显示",
+        width: 100,
+        align: "center",
+        slot: "isShow",
+    },
+    {
+        title: "排序号",
+        key: "orderNum",
+        align: "center",
+    },
+    {
+        title: "操作",
+        width: 120,
+        align: "center",
+        render: (h: any, params: any) => {
+            const disabled = !params.row.isEdit,
+                id = params.row.id;
+
+            return [
+                Utils.operatingTextHandle(h, "编辑", "mr-2", () => onEditFormShow(id), disabled),
+                Utils.operatingTextHandle(h, "删除", "text-error", () => onDeleteMenu(id), disabled),
+            ];
+        },
+    },
+]);
+
+async function show() {
+    isTableModalShow.value = true;
+    await getMenuBarList();
+    console.log("show");
+}
+
+async function getMenuBarList() {
+    tableLoading.value = true;
+
+    const list = await StatsBarApi.getStatsBarSchList();
+    list.forEach(element => {
+        element.linkType = find(linkOpenTypeDict.value, { k: element.linkOpenType })?.v;
+    });
+    tableList.value = list;
+    tableLoading.value = false;
+}
+
+function handleCheckAll() {
+    formData.roleIds = !compCheckAll.value ? RoleTypeDict.map(item => item.k) : [];
+}
+function uploadIconSuccess(response: any, file: any, fileListt: any) {
+    if (response.code == 0) formData.icon = response.data.url;
+    else Message.error("上传错误！");
+    // console.log(response, file, fileListt);
+}
+
+async function onEditFormShow(id?: number) {
+    await refEditForm.value?.resetFields();
+    isEditModalShow.value = false;
+    if (!id) {
+        formData.id = null;
+        formData.linkOpenType = LinkOpenTypeEnum.Open;
+    } else {
+        let find = tableList.value.find(x => x.id == id);
+        Object.assign(formData, find);
+    }
+    isEditModalShow.value = true;
+}
+async function onDeleteMenu(id: number) {
+    await MyConfirm({
+        title: "删除",
+        msg: "确定删除该统计模块吗？",
+        info: "删除后无法恢复！",
+        async onOk() {
+            await StatsBarApi.deleteStatsBar(id);
+        },
+    });
+    await getMenuBarList();
+}
+
+async function onEditSave() {
+    let validate: boolean = await refEditForm.value?.validate();
+    if (!validate) return false;
+    editLoading.value = true;
+    try {
+        await StatsBarApi.saveStatsBar(formData);
+        Message.success("操作成功！");
+        await getMenuBarList();
+        isEditModalShow.value = false;
+    } catch (error) {
+        Message.success("操作失败！");
+    } finally {
+        editLoading.value = false;
+    }
+}
+function onMenuBarShowChange(id: number) {
+    StatsBarApi.toggleStatsBarShow(id);
+}
+
+defineExpose({
+    show,
+});
+</script>
+
+<style scoped>
+.icon-box {
+    width: 20px;
+    height: 20px;
+}
+</style>