oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: todo修复

Browse Source
This commit is contained in:
hw
2025-11-12 16:56:18 +08:00
parent a3356a0a5e
commit 7733d0a7f4
63 changed files with 1211 additions and 2202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web-antd/src/views/mp/menu/components/index.ts
View File

@@ -1,5 +0,0 @@
// TODO @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
export { default as MenuEditor } from './menu-editor.vue';
export { default as MenuPreviewer } from './menu-previewer.vue';
export * from './menuOptions';
export type * from './types';

43
apps/web-antd/src/views/mp/menu/components/menuOptions.ts
View File

@@ -1,43 +0,0 @@
// TODO @hw：这个要不合并到 types 里；
export default [
{
value: 'view',
label: '跳转网页',
},
{
value: 'miniprogram',
label: '跳转小程序',
},
{
value: 'click',
label: '点击回复',
},
{
value: 'article_view_limited',
label: '跳转图文消息',
},
{
value: 'scancode_push',
label: '扫码直接返回结果',
},
{
value: 'scancode_waitmsg',
label: '扫码回复',
},
{
value: 'pic_sysphoto',
label: '系统拍照发图',
},
{
value: 'pic_photo_or_album',
label: '拍照或者相册',
},
{
value: 'pic_weixin',
label: '微信相册',
},
{
value: 'location_select',
label: '选择地理位置',
},
];

22
apps/web-antd/src/views/mp/menu/data.ts
View File

@@ -1,3 +1,7 @@
import type { VbenFormSchema } from '#/adapter/form';
import { getSimpleAccountList } from '#/api/mp/account';
/** 菜单未选中标识 */
export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
@@ -7,3 +11,21 @@ export enum Level {
Parent = '1',
Undefined = '0',
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'accountId',
label: '公众号',
component: 'ApiSelect',
componentProps: {
api: getSimpleAccountList,
labelField: 'name',
valueField: 'id',
autoSelect: 'first',
placeholder: '请选择公众号',
},
},
];
}

207
apps/web-antd/src/views/mp/menu/index.vue
View File

@@ -1,17 +1,26 @@
<script lang="ts" setup>
import type { Menu, RawMenu } from './components/types';
import type { Menu, RawMenu } from './modules/types';
import { ref } from 'vue';
import { nextTick, onMounted, ref } from 'vue';
import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
import { handleTree } from '@vben/utils';
import { Button, Form, message } from 'ant-design-vue';
import { Button, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { getSimpleAccountList } from '#/api/mp/account';
import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components';
import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
import {
Level,
MENU_NOT_SELECTED,
useGridFormSchema,
} from '#/views/mp/menu/data';
import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/modules';
import iphoneBackImg from './modules/assets/iphone_backImg.png';
import menuFootImg from './modules/assets/menu_foot.png';
import menuHeadImg from './modules/assets/menu_head.png';
defineOptions({ name: 'MpMenu' });
@@ -21,6 +30,25 @@ const accountId = ref(-1);
const accountName = ref<string>('');
const menuList = ref<Menu[]>([]);
// 创建表单
const [AccountForm, accountFormApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-[240px]',
},
},
layout: 'horizontal',
schema: useGridFormSchema(),
wrapperClass: 'grid-cols-1',
showDefaultActions: false,
handleValuesChange: async (values, changedFields) => {
// 当 accountId 字段变化时（包括 autoSelect 自动选择），同步更新 accountId
if (changedFields.includes('accountId') && values.accountId) {
await onAccountChanged(values);
}
},
});
// ======================== 菜单操作 ========================
// 当前选中菜单编码：
// * 一级（'x'）
@@ -50,12 +78,36 @@ const tempSelfObj = ref<{
const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
/** 侦听公众号变化 */
function onAccountChanged(id: number, name: string) {
accountId.value = id;
accountName.value = name;
async function onAccountChanged(values: Record<string, any>) {
accountId.value = values.accountId;
// 从 API 获取公众号列表并查找对应的公众号名称
const accountList = await getSimpleAccountList();
const account = accountList.find((item) => item.id === values.accountId);
accountName.value = account?.name || '';
getList();
}
/** 初始化账号ID - 作为备用方案，防止 handleValuesChange 未触发 */
async function initAccountId() {
// 等待表单初始化完成
await nextTick();
try {
const values = await accountFormApi.getValues();
if (values?.accountId && accountId.value === -1) {
// 如果表单有值但 accountId 还是初始值，则手动触发一次
await onAccountChanged(values);
}
} catch {
// 忽略错误
}
}
// 组件挂载时初始化账号ID
onMounted(async () => {
await nextTick();
await initAccountId();
});
/** 查询并转换菜单 */
async function getList() {
loading.value = true;
@@ -250,24 +302,36 @@ function menuToBackend(menu: any) {
</template>
<!-- 搜索工作栏 -->
<!-- TODO @hw：是不是少了一个框子哈？ -->
<!-- <ContentWrap> -->
<Form layout="inline" class="-mb-15px w-240px">
<Form.Item label="公众号" prop="accountId" class="w-240px">
<WxAccountSelect @change="onAccountChanged" />
</Form.Item>
</Form>
<AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
<!-- </ContentWrap> -->
<!-- TODO @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
<!-- DONE @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
<ContentWrap>
<div class="clearfix public-account-management" v-loading="loading">
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div
class="mx-auto w-[1200px] after:clear-both after:table after:content-['']"
v-loading="loading"
>
<!--左边配置菜单-->
<div class="left">
<div class="weixin-hd">
<div class="weixin-title">{{ accountName }}</div>
<div
class="relative float-left box-border block h-[715px] w-[350px] bg-[length:100%_auto] bg-no-repeat p-[518px_25px_88px]"
:style="{ backgroundImage: `url(${iphoneBackImg})` }"
>
<div
class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%] bg-[position:0_0] bg-no-repeat text-center text-white"
:style="{ backgroundImage: `url(${menuHeadImg})` }"
>
<div
class="absolute left-0 top-[33px] w-full text-center text-sm text-white"
>
{{ accountName }}
</div>
</div>
<div class="clearfix weixin-menu">
<div
class="bg-[position:0_0] bg-no-repeat pl-[43px] text-xs after:clear-both after:table after:content-['']"
:style="{ backgroundImage: `url(${menuFootImg})` }"
>
<MenuPreviewer
v-model="menuList"
:account-id="accountId"
@@ -277,27 +341,25 @@ function menuToBackend(menu: any) {
@submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
/>
</div>
<div class="save-div">
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div class="mt-[15px] flex items-center justify-center gap-[10px]">
<Button
class="save-btn"
type="primary"
@click="onSave"
v-access:code="['mp:menu:save']"
>
保存并发布菜单
</Button>
<Button
class="save-btn"
danger
@click="onClear"
v-access:code="['mp:menu:delete']"
>
<Button danger @click="onClear" v-access:code="['mp:menu:delete']">
清空菜单
</Button>
</div>
</div>
<!--右边配置-->
<div class="right" v-if="showRightPanel">
<div
class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5"
v-if="showRightPanel"
>
<MenuEditor
:account-id="accountId"
:is-parent="isParent"
@@ -306,93 +368,10 @@ function menuToBackend(menu: any) {
/>
</div>
<!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
<div v-else class="right">
<div v-else class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5">
<p>请选择菜单配置</p>
</div>
</div>
</ContentWrap>
</Page>
</template>
<style lang="scss" scoped>
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
/* 公共颜色变量 */
.clearfix {
*zoom: 1;
}
.clearfix::after {
clear: both;
display: table;
content: '';
}
div {
text-align: left;
}
.weixin-hd {
position: relative;
bottom: 426px;
left: 0;
width: 300px;
height: 64px;
color: #fff;
text-align: center;
background: transparent url('./components/assets/menu_head.png') no-repeat 0 0;
background-position: 0 0;
background-size: 100%;
}
.weixin-title {
position: absolute;
top: 33px;
left: 0;
width: 100%;
font-size: 14px;
color: #fff;
text-align: center;
}
.weixin-menu {
padding-left: 43px;
font-size: 12px;
background: transparent url('./components/assets/menu_foot.png') no-repeat 0 0;
}
.public-account-management {
width: 1200px;
// min-width: 1200px;
margin: 0 auto;
.left {
position: relative;
float: left;
box-sizing: border-box;
display: block;
width: 350px;
height: 715px;
padding: 518px 25px 88px;
background: url('./components/assets/iphone_backImg.png') no-repeat;
background-size: 100% auto;
.save-div {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
margin-top: 15px;
}
}
/* 右边菜单内容 */
.right {
float: left;
box-sizing: border-box;
width: 63%;
padding: 20px;
margin-left: 20px;
background-color: #e8e7e7;
}
}
</style>

0
apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png → apps/web-antd/src/views/mp/menu/modules/assets/iphone_backImg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

0
apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png → apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
apps/web-antd/src/views/mp/menu/components/assets/menu_head.png → apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

154
apps/web-antd/src/views/mp/menu/components/menu-editor.vue → apps/web-antd/src/views/mp/menu/modules/editor.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
// TODO @hw：名字可以缩写成 editor.vue，文件名
// DONE @hw：名字可以缩写成 editor.vue，文件名
import { computed, nextTick, ref, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
@@ -14,11 +14,9 @@ import {
Select,
} from 'ant-design-vue';
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
import { WxNews } from '#/views/mp/modules/wx-news';
import { WxReplySelect } from '#/views/mp/modules/wx-reply';
import { MaterialSelect, News, ReplySelect } from '#/views/mp/modules';
import menuOptions from './menuOptions';
import { menuOptions } from './types';
const props = defineProps<{
accountId: number;
@@ -40,13 +38,13 @@ const menu = computed({
},
});
const showNewsDialog = ref(false);
const hackResetWxReplySelect = ref(false);
const hackResetReplySelect = ref(false);
const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
watch(menu, () => {
hackResetWxReplySelect.value = false; // 销毁组件
hackResetReplySelect.value = false; // 销毁组件
nextTick(() => {
hackResetWxReplySelect.value = true; // 重建组件
hackResetReplySelect.value = true; // 重建组件
});
});
@@ -83,8 +81,9 @@ function deleteMaterial() {
<template>
<div>
<div class="configure-page">
<div class="delete-btn">
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div>
<div class="mb-[15px] text-right">
<Button type="primary" danger @click="emit('delete')">
<IconifyIcon icon="lucide:trash-2" />
删除当前菜单
@@ -93,7 +92,7 @@ function deleteMaterial() {
<div>
<span>菜单名称：</span>
<Input
class="input-width"
class="mr-[2%] w-[240px]"
v-model:value="menu.name"
placeholder="请输入菜单名称"
:maxlength="isParent ? 4 : 7"
@@ -101,21 +100,21 @@ function deleteMaterial() {
/>
</div>
<div v-if="isLeave">
<div class="menu-content">
<div class="mt-5">
<span>菜单标识：</span>
<Input
class="input-width"
class="mr-[2%] w-[240px]"
v-model:value="menu.menuKey"
placeholder="请输入菜单 KEY"
allow-clear
/>
</div>
<div class="menu-content">
<div class="mt-5">
<span>菜单内容：</span>
<Select
v-model:value="menu.type"
placeholder="请选择"
class="input-width"
class="mr-[2%] w-[240px]"
allow-clear
>
<Select.Option
@@ -128,56 +127,69 @@ function deleteMaterial() {
</Select.Option>
</Select>
</div>
<div class="configur-content" v-if="menu.type === 'view'">
<div
class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
v-if="menu.type === 'view'"
>
<span>跳转链接：</span>
<Input
class="input-width"
class="mr-[2%] w-[240px]"
v-model:value="menu.url"
placeholder="请输入链接"
allow-clear
/>
</div>
<!-- TODO @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
<div class="configur-content" v-if="menu.type === 'miniprogram'">
<div class="applet">
<span>小程序的 appid ：</span>
<!-- DONE @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
<div
class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
v-if="menu.type === 'miniprogram'"
>
<div class="mb-5 flex items-center">
<div class="w-[20%]">小程序的 appid ：</div>
<Input
class="input-width"
class="mr-[2%] flex-1"
v-model:value="menu.miniProgramAppId"
placeholder="请输入小程序的appid"
allow-clear
/>
</div>
<div class="applet">
<span>小程序的页面路径：</span>
<div class="mb-5 flex items-center">
<div class="w-[20%]">小程序的页面路径：</div>
<Input
class="input-width"
class="mr-[2%] flex-1"
v-model:value="menu.miniProgramPagePath"
placeholder="请输入小程序的页面路径，如：pages/index"
allow-clear
/>
</div>
<div class="applet">
<span>小程序的备用网页：</span>
<div class="mb-5 flex items-center">
<div class="w-[20%]">小程序的备用网页：</div>
<Input
class="input-width"
class="mr-[2%] flex-1"
v-model:value="menu.url"
placeholder="不支持小程序的老版本客户端将打开本网页"
allow-clear
/>
</div>
<p class="blue">
<p class="mt-[10px] text-[#29b6f6]">
tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
</p>
</div>
<div
class="configur-content"
class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
v-if="menu.type === 'article_view_limited'"
>
<Row>
<div class="select-item" v-if="menu && menu.replyArticles">
<WxNews :articles="menu.replyArticles" />
<Row class="ope-row" justify="center" align="middle">
<div
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
v-if="menu && menu.replyArticles"
>
<News :articles="menu.replyArticles" />
<Row
class="pt-[10px] text-center"
justify="center"
align="middle"
>
<Button
type="primary"
danger
@@ -190,8 +202,8 @@ function deleteMaterial() {
</div>
<div v-else>
<Row justify="center">
<!-- TODO @hw：html 标签里的 style 要用 tindwind 替代下； -->
<Col :span="24" style="text-align: center">
<!-- DONE @hw：html 标签里的 style 要用 tindwind 替代下； -->
<Col :span="24" class="text-center">
<Button type="primary" @click="showNewsDialog = true">
素材库选择
<IconifyIcon icon="lucide:circle-check" />
@@ -205,7 +217,7 @@ function deleteMaterial() {
width="80%"
destroy-on-close
>
<WxMaterialSelect
<MaterialSelect
type="news"
:account-id="props.accountId"
@select-material="selectMaterial"
@@ -214,79 +226,15 @@ function deleteMaterial() {
</Row>
</div>
<!-- TODO @hw：貌似这个组件出不来 -->
<!--TODO @hw 这个组件显示逻辑是要有两个菜单才会显示，之前的代码逻辑我这边也不是很清楚，待沟通 -->
<div
class="configur-content"
class="configur-content mt-5"
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
>
<WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
<ReplySelect v-model="menu.reply" />
</div>
<!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
:deep(.ant-input) {
// width: 70%;
margin-right: 2%;
}
.configure-page {
.delete-btn {
margin-bottom: 15px;
text-align: right;
}
.menu-content {
margin-top: 20px;
}
.configur-content {
padding: 20px 10px;
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.ope-row {
padding-top: 10px;
text-align: center;
}
}
}
.blue {
margin-top: 10px;
color: #29b6f6;
}
.applet {
margin-bottom: 20px;
span {
width: 20%;
}
}
.input-width {
width: 240px;
}
.material {
.input-width {
width: 30%;
}
:deep(.ant-input) {
width: 80%;
}
}
}
</style>

5
apps/web-antd/src/views/mp/menu/modules/index.ts Normal file
View File

@@ -0,0 +1,5 @@
// DONE @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
export { default as MenuEditor } from './editor.vue';
export { default as MenuPreviewer } from './previewer.vue';
export type * from './types';
export * from './types';

111
apps/web-antd/src/views/mp/menu/components/menu-previewer.vue → apps/web-antd/src/views/mp/menu/modules/previewer.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
// TODO @hw：名字可以缩写成 previewer.vue，文件名
// DONE @hw：名字可以缩写成 previewer.vue，文件名
import type { Menu } from './types';
import { computed } from 'vue';
@@ -44,9 +44,8 @@ function addMenu() {
/** 添加横向二级菜单；parent 表示要操作的父菜单 */
function addSubMenu(i: number, parent: any) {
const subMenuKeyLength = parent.children.length; // 获取二级菜单 key 长度
// TODO @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
const addButton = {
// DONE @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
parent.children[parent.children.length] = {
name: '子菜单名称',
reply: {
// 用于存储回复内容
@@ -54,8 +53,11 @@ function addSubMenu(i: number, parent: any) {
accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
},
};
parent.children[subMenuKeyLength] = addButton;
subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
subMenuClicked(
parent.children[parent.children.length - 1],
i,
parent.children.length - 1,
);
}
/** 一级菜单点击 */
@@ -129,18 +131,23 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
@end="onParentDragEnd"
>
<template #item="{ element: parent, index: x }">
<div class="menu-bottom">
<div
class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
>
<!-- 一级菜单 -->
<div
@click="menuClicked(parent, x)"
class="menu-item"
:class="{ active: props.activeIndex === `${x}` }"
class="box-border flex h-[44px] w-full items-center justify-center leading-[44px]"
:class="{ 'border border-[#2bb673]': props.activeIndex === `${x}` }"
>
<IconifyIcon icon="lucide:panel-right-open" color="black" />
{{ parent.name }}
</div>
<!-- 以下为二级菜单-->
<div class="submenu" v-if="props.parentIndex === x && parent.children">
<div
class="absolute bottom-[45px] left-0 w-[85.5px]"
v-if="props.parentIndex === x && parent.children"
>
<draggable
v-model="parent.children"
item-key="id"
@@ -149,11 +156,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
@end="onChildDragEnd"
>
<template #item="{ element: child, index: y }">
<div class="menu-bottom subtitle">
<div
class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
>
<div
class="menu-sub-item"
v-if="parent.children"
:class="{ active: props.activeIndex === `${x}-${y}` }"
class="box-border h-[44px] text-center leading-[44px]"
:class="{
'border border-[#2bb673]':
props.activeIndex === `${x}-${y}`,
}"
@click="subMenuClicked(child, x, y)"
>
{{ child.name }}
@@ -161,13 +172,12 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
</div>
</template>
</draggable>
<!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号 -->
<div
class="menu-bottom menu-addicon"
class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
v-if="!parent.children || parent.children.length < 5"
@click="addSubMenu(x, parent)"
>
<IconifyIcon icon="lucide:plus" class="plus" />
<IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
</div>
</div>
</div>
@@ -176,78 +186,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
<!-- 一级菜单加号 -->
<div
class="menu-bottom menu-addicon"
class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
v-if="menuList.length < 3"
@click="addMenu"
>
<IconifyIcon icon="lucide:plus" class="plus" />
<IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
</div>
</template>
<style lang="scss" scoped>
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
.menu-bottom {
position: relative;
float: left;
box-sizing: border-box;
display: block;
width: 85.5px;
text-align: center;
cursor: pointer;
background-color: #fff;
border: 1px solid #ebedee;
&.menu-addicon {
display: flex;
align-items: center;
justify-content: center;
height: 46px;
line-height: 46px;
.plus {
color: #2bb673;
}
}
.menu-item {
// text-align: center;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 44px;
line-height: 44px;
&.active {
border: 1px solid #2bb673;
}
}
.menu-sub-item {
box-sizing: border-box;
height: 44px;
line-height: 44px;
text-align: center;
&.active {
border: 1px solid #2bb673;
}
}
}
/* 第二级菜单 */
.submenu {
position: absolute;
bottom: 45px;
width: 85.5px;
.subtitle {
box-sizing: border-box;
background-color: #fff;
}
}
.draggable-ghost {
background: #f7fafc;
border: 1px solid #4299e1;

44
apps/web-antd/src/views/mp/menu/components/types.ts → apps/web-antd/src/views/mp/menu/modules/types.ts
View File

@@ -71,3 +71,47 @@ interface _Menu extends RawMenu {
}
export type Menu = Partial<_Menu>;
// DONE @hw：这个要不合并到 types 里；
export const menuOptions = [
{
value: 'view',
label: '跳转网页',
},
{
value: 'miniprogram',
label: '跳转小程序',
},
{
value: 'click',
label: '点击回复',
},
{
value: 'article_view_limited',
label: '跳转图文消息',
},
{
value: 'scancode_push',
label: '扫码直接返回结果',
},
{
value: 'scancode_waitmsg',
label: '扫码回复',
},
{
value: 'pic_sysphoto',
label: '系统拍照发图',
},
{
value: 'pic_photo_or_album',
label: '拍照或者相册',
},
{
value: 'pic_weixin',
label: '微信相册',
},
{
value: 'location_select',
label: '选择地理位置',
},
] as const;