feat: optimize the insertion of mp card (#985)

* feat: optimize the insertion of mp card

* fix: config type

* feat: update insert mp card dialog

* fix: style

---------

Co-authored-by: Libin YANG <[email protected]>

Author: YangFong

apps/web/src/assets/example/markdown.md

@@ -237,7 +237,6 @@ Foo -> Foo7: To queue
 [你好世界]{nǐ・hǎo・shì・jiè}
 [小夜時雨]^(さ・よ・しぐれ)
 
-
 当字符串数量与分隔符数量不匹配时，会自动匹配到最合适的分隔符。
 
 ```md
@@ -252,7 +251,6 @@ Foo -> Foo7: To queue
 [小夜]{さ・よ・しぐれ}
 [小夜時雨]{さ・よ・しぐれ・extra}
 
-
 ## 结语
 
 Markdown 是一种简单、强大且易于掌握的标记语言，通过学习基础和进阶语法，你可以快速创作内容并有效传达信息。无论是技术文档、个人博客还是项目说明，Markdown 都是你的得力助手。希望这篇内容能够带你全面了解 Markdown 的潜力，让你的写作更加丰富多彩！

apps/web/src/components/CodemirrorEditor/InsertMpCardDialog.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/yup'
-import { Info } from 'lucide-vue-next'
 import { Field, Form } from 'vee-validate'
 import * as yup from 'yup'
 import { addPrefix } from '@/utils'
@@ -15,6 +14,17 @@ interface Config {
   name: string
   logo: string
   desc: string
+  /**
+   * 1: 公众号
+   * 2: 服务号
+   */
+  serviceType: `1` | `2`
+  /**
+   * 0: 无标识
+   * 1: 个人认证
+   * 2: 企业认证
+   */
+  verify: `0` | `1` | `2`
 }
 
 /** 表单字段 */
@@ -23,42 +33,17 @@ const config = useStorage<Config>(addPrefix(`mp-profile`), {
   name: ``,
   logo: ``,
   desc: ``,
-})
-
-/**
- * @deprecated 更换为对象形式，后续版本可移除该兼容写法
- */
-const mpId = useStorage(`mpId`, ``)
-/**
- * @deprecated 更换为对象形式，后续版本可移除该兼容写法
- */
-const mpName = useStorage(`mpName`, ``)
-/**
- * @deprecated 更换为对象形式，后续版本可移除该兼容写法
- */
-const mpLogo = useStorage(`mpLogo`, ``)
-/**
- * @deprecated 更换为对象形式，后续版本可移除该兼容写法
- */
-const mpDesc = useStorage(`mpDesc`, ``)
-
-onMounted(() => {
-  config.value.id = mpId.value || config.value.id
-  config.value.name = mpName.value || config.value.name
-  config.value.logo = mpLogo.value || config.value.logo
-  config.value.desc = mpDesc.value || config.value.desc
-
-  mpId.value = ``
-  mpName.value = ``
-  mpLogo.value = ``
-  mpDesc.value = ``
+  serviceType: `1`,
+  verify: `0`,
 })
 
 const schema = toTypedSchema(yup.object({
   id: yup.string().required(`公众号 ID 不能为空`),
   name: yup.string().required(`公众号名称 不能为空`),
   logo: yup.string().optional().url(`公众号 Logo 必须是一个有效的 URL`),
   desc: yup.string().optional(),
+  serviceType: yup.string().required(),
+  verify: yup.string().required(),
 }))
 
 /** 组装 HTML 片段 */
@@ -70,8 +55,8 @@ function buildMpHtml(config: Config) {
     `data-nickname="${config.name}"`,
     `data-headimg="${logo}"`,
     config.desc && `data-signature="${config.desc}"`,
-    `data-service_type="1"`,
-    `data-verify_status="1"`,
+    `data-service_type="${config.serviceType || `1`}"`,
+    `data-verify_status="${config.verify || `0`}"`,
   ].filter(Boolean).join(` `)
 
   return `<section class="mp_profile_iframe_wrp custom_select_card_wrp" nodeleaf="">
@@ -96,17 +81,9 @@ function submit(formValues: any) {
         <DialogTitle>插入公众号名片</DialogTitle>
       </DialogHeader>
 
-      <Alert>
-        <Info class="h-4 w-4" />
-        <AlertTitle>提示</AlertTitle>
-        <AlertDescription>
-          此功能用于插入微信公众号名片，数据会缓存至本地，可长期使用。
-        </AlertDescription>
-      </Alert>
-
       <Form :validation-schema="schema" :initial-values="config" @submit="submit">
         <Field v-slot="{ field, errorMessage }" name="id">
-          <FormItem label="公众号 ID" required :error="errorMessage">
+          <FormItem label="公众号 ID" required :error="errorMessage" :width="90">
             <Input
               v-bind="field"
               v-model.trim="field.value"
@@ -116,7 +93,7 @@ function submit(formValues: any) {
         </Field>
 
         <Field v-slot="{ field, errorMessage }" name="name">
-          <FormItem label="公众号名称" required :error="errorMessage">
+          <FormItem label="公众号名称" required :error="errorMessage" :width="90">
             <Input
               v-bind="field"
               v-model.trim="field.value"
@@ -126,7 +103,7 @@ function submit(formValues: any) {
         </Field>
 
         <Field v-slot="{ field, errorMessage }" name="logo">
-          <FormItem label="公众号 Logo" :error="errorMessage">
+          <FormItem label="公众号 Logo" :error="errorMessage" :width="90">
             <Input
               v-bind="field"
               v-model.trim="field.value"
@@ -136,7 +113,7 @@ function submit(formValues: any) {
         </Field>
 
         <Field v-slot="{ field, errorMessage }" name="desc">
-          <FormItem label="公众号描述" :error="errorMessage">
+          <FormItem label="公众号描述" :error="errorMessage" :width="90">
             <Textarea
               v-bind="field"
               v-model.trim="field.value"
@@ -146,6 +123,52 @@ function submit(formValues: any) {
           </FormItem>
         </Field>
 
+        <Field v-slot="{ field, errorMessage }" name="serviceType">
+          <FormItem label="公众号类型" required :error="errorMessage" :width="90">
+            <RadioGroup class="flex gap-5" v-bind="field" :default-value="field.value">
+              <div class="inline-flex items-center space-x-2 w-20">
+                <RadioGroupItem id="option-one" value="1" />
+                <Label for="option-one">公众号</Label>
+              </div>
+              <div class="inline-flex items-center space-x-2 w-20">
+                <RadioGroupItem id="option-two" value="2" />
+                <Label for="option-two">服务号</Label>
+              </div>
+            </RadioGroup>
+          </FormItem>
+        </Field>
+
+        <Field v-slot="{ field, errorMessage }" name="verify">
+          <FormItem label="认证" required :error="errorMessage" :width="90">
+            <RadioGroup class="flex gap-5" v-bind="field" :default-value="field.value">
+              <div class="inline-flex items-center space-x-2 w-20">
+                <RadioGroupItem id="service-type-option-one" value="0" />
+                <Label for="service-type-option-one">无</Label>
+              </div>
+              <div class="inline-flex items-center space-x-2 w-20">
+                <RadioGroupItem id="service-type-option-two" value="1" />
+                <Label for="service-type-option-two">个人</Label>
+              </div>
+              <div class="inline-flex items-center space-x-2 w-20">
+                <RadioGroupItem id="service-type-option-three" value="2" />
+                <Label for="service-type-option-three">企业</Label>
+              </div>
+            </RadioGroup>
+          </FormItem>
+        </Field>
+
+        <FormItem>
+          <Button
+            variant="link"
+            class="p-0 h-auto text-left whitespace-normal"
+            as="a"
+            href="https://github.com/doocs/md/blob/main/docs/mp-card.md"
+            target="_blank"
+          >
+            如何获取公众号 ID？
+          </Button>
+        </FormItem>
+
         <FormItem>
           <Button type="submit">
             确认

apps/web/src/components/FormItem.vue

@@ -3,6 +3,7 @@ const props = defineProps<{
   label?: string
   required?: boolean
   error?: string
+  width?: number
 }>()
 </script>
 

apps/web/src/components/ui/radio-group/RadioGroup.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes[`class`] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = reactiveOmit(props, `class`)
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    data-slot="radio-group"
+    :class="cn('grid gap-3', props.class)"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>

apps/web/src/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { CircleIcon } from 'lucide-vue-next'
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+
+  useForwardProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes[`class`] }>()
+
+const delegatedProps = reactiveOmit(props, `class`)
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="relative flex items-center justify-center"
+    >
+      <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

apps/web/src/components/ui/radio-group/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'

apps/web/src/utils/setup-components.ts

@@ -8,6 +8,7 @@ class MpCommonProfile extends HTMLElement {
     const nickname = this.dataset.nickname || ``
     const headimg = this.dataset.headimg || ``
     const signature = this.dataset.signature || ``
+    const serviceType = this.dataset.service_type || `1`
     const verifyStatus = this.dataset.verify_status || `0`
 
     this.shadowRoot!.innerHTML = `
@@ -33,7 +34,7 @@ class MpCommonProfile extends HTMLElement {
                 <div class="weui-flex__item">
                   <div class="wx_profile_nickname_wrp">
                     <strong id="js_a11y_wx_profile_nickname" class="wx_profile_nickname">${nickname}</strong>
-                    <span class="wx_follow_verify ${verifyStatus === `1` ? `show-verify-personal` : ``}"></span>
+                    <span class="wx_follow_verify ${verifyStatus === `1` ? `show-verify-personal` : verifyStatus === `2` ? `show-verify-company` : ``}"></span>
                   </div>
                   <div id="js_a11y_wx_profile_desc" class="wx_profile_desc">${signature}</div>
                 </div>
@@ -42,7 +43,7 @@ class MpCommonProfile extends HTMLElement {
             </div>
           </div>
           <div id="js_a11y_wx_profile_logo" aria-hidden="true" class="wx_profile_card_ft">
-            公众号
+            ${serviceType === `1` ? `公众号` : `服务号`}
           </div>
         </div>
         <span aria-hidden="true" id="js_a11y_comma" class="weui-a11y_ref" style="display: none;">，</span>

docs/mp-card.md

@@ -0,0 +1,50 @@
+# 微信公众号 ID 获取说明
+
+## 为什么需要公众号 ID
+
+在开发或运营过程中，有时需要获取某个公众号的唯一标识（即 **fakeid**），比如用于文章抓取、接口调用或做账号绑定。
+
+## 获取公众号 ID 的方法
+
+### 1. 打开公众号后台
+
+进入 [微信公众平台](https://mp.weixin.qq.com)，用管理员账号登录。
+
+### 2. 进入文章编辑器
+
+点击【素材管理】→【新建图文素材】，进入文章编辑页面。
+
+### 3. 添加公众号名片
+
+在编辑器里点击【账号名片】，输入你要查询的公众号名称（如 **Doocs**），并插入到正文中。
+
+### 4. 抓取网络请求
+
+按下 `F12` 打开浏览器开发者工具，切换到 **Network（网络）** 标签。
+在插入名片时，后台会发起一个接口请求，通常类似：
+
+```
+https://mp.weixin.qq.com/cgi-bin/searchbiz?action=search_biz&scene=1&begin=0...
+```
+
+### 5. 查找 fakeid
+
+点击该请求，切换到 **Response（响应）**，可以看到返回的 JSON 数据。
+其中会包含类似：
+
+```json
+{
+  "list": [
+    {
+      "fakeid": "MzIxNjA5ODQ0OQ==",
+      "nickname": "Doocs",
+      "alias": "idoocs",
+      "service_type": 1,
+      "signature": "GitHub 开源组织 @Doocs 旗下唯一公众号，专注分享技术领域相关知识及行业最新资讯。",
+      "verify_status": 1
+    }
+  ]
+}
+```
+
+这里的 `fakeid` 就是该公众号的唯一标识。将获取到的公众号 ID（fakeid）保存下来，就可以在工具中使用啦。