fix: use monochrome brand icons for messaging channels

Show distinct WeChat, WeCom, and DingTalk marks in channel settings and the project dropdown. Bundle the SVGs locally and inherit the interface foreground color. Release note: 远程通道设置和项目下拉列表统一使用微信、企业微信、钉钉各自的黑白品牌图标。
2026-09-17 13:01:39 +08:00
parent 94852acf82
commit 04d9ea9eba
3 changed files with 102 additions and 4 deletions
@@ -0,0 +1,92 @@
+import type { ProjectChannel } from '../../shared/assistant-contracts'
+
+/*!
+ * WeChat: Simple Icons (CC0), https://github.com/simple-icons/simple-icons
+ * WeCom: icon extracted from Tencent's official SVG (wordmark excluded):
+ * https://wwcdn.weixin.qq.com/node/wwnl/wwnl/style/images/independent/index/HeaderLogoMobile$9b6c3fb4.svg
+ * DingTalk: Ant Design Icons, https://github.com/ant-design/ant-design-icons
+ * Copyright (c) 2018-present Ant UED, https://xtech.antfin.com/
+ *
+ * MIT License (DingTalk):
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+const channelMarks = {
+  weixin: {
+    viewBox: '0 0 24 24',
+    path: 'M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z'
+  },
+  dingtalk: {
+    viewBox: '0 0 1024 1024',
+    path: 'M573.7 252.5C422.5 197.4 201.3 96.7 201.3 96.7c-15.7-4.1-17.9 11.1-17.9 11.1c-5 61.1 33.6 160.5 53.6 182.8c19.9 22.3 319.1 113.7 319.1 113.7S326 357.9 270.5 341.9c-55.6-16-37.9 17.8-37.9 17.8c11.4 61.7 64.9 131.8 107.2 138.4c42.2 6.6 220.1 4 220.1 4s-35.5 4.1-93.2 11.9c-42.7 5.8-97 12.5-111.1 17.8c-33.1 12.5 24 62.6 24 62.6c84.7 76.8 129.7 50.5 129.7 50.5c33.3-10.7 61.4-18.5 85.2-24.2L565 743.1h84.6L603 928l205.3-271.9H700.8l22.3-38.7c.3.5.4.8.4.8S799.8 496.1 829 433.8l.6-1h-.1c5-10.8 8.6-19.7 10-25.8c17-71.3-114.5-99.4-265.8-154.5'
+  }
+} satisfies Record<Exclude<ProjectChannel, 'wecom'>, { viewBox: string; path: string }>
+
+export function ChannelIcon({
+  channel,
+  size = 16
+}: {
+  channel: ProjectChannel
+  size?: number
+}): React.JSX.Element {
+  if (channel === 'wecom') {
+    return (
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        fillRule="evenodd"
+        focusable="false"
+        height={size}
+        viewBox="0 0 28 24"
+        width={size}
+      >
+        <path
+          d="M.37.578C.236.715.226.933.346 1.08c.007.01.016.02.026.03.017.017.034.032.053.045l.107.105c.7.704 1.138 1.57 1.317 2.48.002.053.01.103.016.154.01.055.02.11.036.167.07.256.203.498.4.7.61.615 1.6.615 2.208 0 .61-.616.61-1.613 0-2.228-.215-.215-.477-.357-.752-.42-.03-.007-.062-.014-.094-.018-.03-.006-.062-.01-.094-.014-.923-.173-1.805-.62-2.52-1.342C.997.684.95.63.9.578.826.504.73.468.635.468S.445.504.37.578z"
+          transform="translate(17.815 18.284)"
+        />
+        <path
+          d="M2.066 1.206c-.215.217-.353.48-.417.76-.01.03-.015.062-.02.094-.005.032-.01.063-.013.095-.172.93-.615 1.822-1.33 2.544-.05.05-.104.1-.156.15-.145.147-.145.385 0 .532.137.137.35.146.5.026l.03-.027c.014-.015.03-.033.042-.05.034-.038.068-.074.104-.11.698-.705 1.557-1.15 2.458-1.33.05-.003.1-.01.152-.016.055-.008.11-.022.165-.036.254-.07.49-.205.69-.407.61-.614.61-1.61 0-2.226-.3-.304-.7-.458-1.1-.458-.4 0-.8.153-1.104.46z"
+          transform="translate(22.463 15.166)"
+        />
+        <path
+          d="M.764.65c-.61.615-.61 1.612 0 2.228.214.216.476.356.752.42l.093.02.092.012c.924.174 1.806.62 2.52 1.34l.15.16c.146.148.382.148.528 0 .137-.137.146-.355.027-.503l-.026-.03c-.015-.016-.032-.03-.05-.043l-.11-.105c-.697-.708-1.136-1.575-1.315-2.484-.003-.05-.01-.102-.017-.152-.008-.056-.02-.112-.035-.167C3.303 1.093 3.17.85 2.97.65 2.665.342 2.266.19 1.867.19c-.4 0-.8.152-1.103.46z"
+          transform="translate(19.364 11.268)"
+        />
+        <path
+          d="M4.64.778c-.008.01-.02.017-.027.027-.017.017-.03.034-.045.053l-.103.108c-.698.705-1.558 1.15-2.46 1.33-.05.003-.1.008-.15.017-.056.01-.11.02-.165.036-.252.067-.493.203-.692.403-.61.615-.61 1.612 0 2.227.61.617 1.598.617 2.207 0 .215-.214.353-.48.417-.758.008-.03.013-.062.018-.093.006-.034.01-.066.014-.098.172-.932.615-1.823 1.328-2.543.053-.053.105-.105.158-.153.146-.148.146-.386 0-.533-.074-.073-.17-.11-.265-.11-.083 0-.166.028-.234.083z"
+          transform="translate(14.717 13.607)"
+        />
+        <path
+          d="M11.337.81c-.455 0-.927.026-1.4.08-2.777.302-5.297 1.5-7.102 3.37-.71.737-1.29 1.56-1.72 2.448-.587 1.204-.883 2.48-.883 3.794 0 1.692.51 3.362 1.475 4.827.505.763 1.32 1.705 2.032 2.342l.04.035v.053l-.35 2.726c-.01.028-.02.056-.027.084-.006.026-.008.053-.01.08l-.006.05c-.002.01-.004.022-.004.034 0 .014.003.027.004.04l.005.037c.04.388.357.68.74.68.126 0 .25-.035.368-.102l.06-.036 3.257-1.65.044.014c.65.187 1.33.32 2.077.403.94.103 1.87.104 2.863-.01.85-.097 1.7-.287 2.523-.563-.01-.004-.016-.01-.025-.015-.52-.3-.84-.86-.843-1.458-.61.186-1.238.316-1.868.39-.843.093-1.644.093-2.447.006l-.155-.02-.09-.014c-.556-.074-1.095-.188-1.606-.34-.24-.075-.503-.06-.77.08-.034.017-.048.024-.06.033l-2.055 1.22c-.21.12-.398-.01-.398-.203L5.317 18l.16-.618c.02-.07.038-.143.038-.225 0-.23-.11-.446-.29-.58-.11-.08-.22-.166-.333-.26-.17-.14-.338-.29-.503-.447-.457-.436-.855-.91-1.185-1.413-.787-1.196-1.203-2.552-1.203-3.923 0-1.065.24-2.1.716-3.077.353-.728.83-1.405 1.417-2.016 1.52-1.57 3.65-2.58 6.004-2.84.844-.09 1.62-.087 2.446.008 2.343.27 4.463 1.283 5.968 2.855.585.61 1.06 1.29 1.412 2.02.467.97.704 1.997.704 3.052v.123c.583-.268 1.268-.175 1.76.242.008-.137.01-.27.01-.398 0-1.302-.29-2.568-.866-3.762-.43-.89-1.005-1.714-1.713-2.454-1.79-1.87-4.296-3.073-7.06-3.39C12.304.84 11.81.81 11.337.81"
+        />
+      </svg>
+    )
+  }
+
+  const mark = channelMarks[channel]
+  return (
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      focusable="false"
+      height={size}
+      viewBox={mark.viewBox}
+      width={size}
+    >
+      <path d={mark.path} />
+    </svg>
+  )
+}
@@ -28,6 +28,7 @@ import type { WeixinBindingSnapshot } from '../../shared/weixin-channel-contract
 import type { AppNotificationInput } from './notifications'
 import { trapTabFocus } from './dialog-focus'
 import { PageTabs } from './WorkspacePrimitives'
+import { ChannelIcon } from './ChannelIcon'
 import {
  SettingsCategoryHeader,
  SettingsWarningList
@@ -799,9 +800,9 @@ export function ChannelSettingsSection({
    tRef.current = t
  }, [t])
  const channelTabs = [
-    { id: 'weixin', label: t('channels.tabs.weixin') },
-    { id: 'wecom', label: t('channels.tabs.wecom') },
-    { id: 'dingtalk', label: t('channels.tabs.dingtalk') }
+    { id: 'weixin', label: t('channels.tabs.weixin'), icon: <ChannelIcon channel="weixin" /> },
+    { id: 'wecom', label: t('channels.tabs.wecom'), icon: <ChannelIcon channel="wecom" /> },
+    { id: 'dingtalk', label: t('channels.tabs.dingtalk'), icon: <ChannelIcon channel="dingtalk" /> }
  ] as const
  const [snapshot, setSnapshot] = useState<ChannelSettingsSnapshot>()
  const [runtimeSettings, setRuntimeSettings] =
@@ -54,6 +54,7 @@ import { ProjectRuntimeSelector } from './ProjectRuntimeSelector'
 import { ProjectActivityCounts } from './ProjectActivity'
 import type { ProjectActivityCountsProps } from './ProjectActivity'
 import { ProjectWorkModeFields } from './ProjectWorkModeFields'
+import { ChannelIcon } from './ChannelIcon'
 import { SegmentedControl } from './WorkspacePrimitives'
 import { displayErrorMessage } from './error-message'

@@ -1108,7 +1109,11 @@ export function ProjectSwitcher({
          tabIndex={selected ? 0 : -1}
          type="button"
        >
-          <ProjectIcon aria-hidden="true" size={16} />
+          {project.kind === 'channel' && project.channel ? (
+            <ChannelIcon channel={project.channel} />
+          ) : (
+            <ProjectIcon aria-hidden="true" size={16} />
+          )}
          <span>
            <span className="project-switcher__project-heading">
              <b>{projectDisplay.name}</b>