@opentiny/vue-docs 3.27.1 → 3.28.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "3.27.1",
+  "version": "3.28.0",
   "license": "MIT",
   "dependencies": {
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/tiny-vue-mcp": "^0.0.4",
+    "@opentiny/tiny-vue-mcp": "^0.0.5",
     "@opentiny/vue-repl": "^1.1.2",
     "@opentiny/vue-vite-import": "~1.2.0",
     "@unocss/reset": "0.38.2",
@@ -27,24 +27,24 @@
     "vue-i18n": "~9.14.3",
     "vue-router": "4.1.5",
     "zod": "^3.24.4",
-    "@opentiny/utils": "~3.27.0",
-    "@opentiny/vue": "~3.27.0",
-    "@opentiny/vue-common": "~3.27.0",
-    "@opentiny/vue-design-aurora": "~3.27.0",
-    "@opentiny/vue-design-saas": "~3.27.0",
-    "@opentiny/vue-design-smb": "~3.27.0",
-    "@opentiny/vue-directive": "~3.27.0",
-    "@opentiny/vue-flowchart": "~3.27.0",
-    "@opentiny/vue-hooks": "~3.27.0",
-    "@opentiny/vue-huicharts": "~3.27.0",
-    "@opentiny/vue-icon": "~3.27.0",
-    "@opentiny/vue-icon-saas": "~3.27.0",
-    "@opentiny/vue-icon-multicolor": "~3.27.0",
-    "@opentiny/vue-locale": "~3.27.0",
-    "@opentiny/vue-renderless": "~3.27.0",
-    "@opentiny/vue-modal": "~3.27.0",
-    "@opentiny/vue-theme": "~3.27.0",
-    "@opentiny/vue-theme-saas": "~3.27.0"
+    "@opentiny/utils": "~3.28.0",
+    "@opentiny/vue": "~3.28.0",
+    "@opentiny/vue-common": "~3.28.0",
+    "@opentiny/vue-design-aurora": "~3.28.0",
+    "@opentiny/vue-design-saas": "~3.28.0",
+    "@opentiny/vue-directive": "~3.28.0",
+    "@opentiny/vue-design-smb": "~3.28.0",
+    "@opentiny/vue-flowchart": "~3.28.0",
+    "@opentiny/vue-huicharts": "~3.28.0",
+    "@opentiny/vue-hooks": "~3.28.0",
+    "@opentiny/vue-icon": "~3.28.0",
+    "@opentiny/vue-icon-multicolor": "~3.28.0",
+    "@opentiny/vue-icon-saas": "~3.28.0",
+    "@opentiny/vue-locale": "~3.28.0",
+    "@opentiny/vue-modal": "~3.28.0",
+    "@opentiny/vue-renderless": "~3.28.0",
+    "@opentiny/vue-theme": "~3.28.0",
+    "@opentiny/vue-theme-saas": "~3.28.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.49.0",

package/playground/App.vue

@@ -1,15 +1,19 @@
 <script setup lang="jsx">
-import { onMounted, reactive, nextTick } from 'vue'
+import { onMounted, reactive, nextTick, ref } from 'vue'
 import { Repl, useStore, File } from '@opentiny/vue-repl'
 import '@opentiny/vue-repl/dist/style.css'
 
 import Editor from '@vue/repl/codemirror-editor'
-import { TinyButtonGroup, TinyButton, TinySelect, TinyOption, TinySwitch, Notify } from '@opentiny/vue'
+import { TinyButton, TinySelect, TinyOption, Notify, TinyTooltip } from '@opentiny/vue'
 import { staticDemoPath, getWebdocPath } from '@/views/components-doc/cmp-config'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
+import Set from './icons/Set.vue'
+import Layout from './icons/Layout.vue'
+import Reverse from './icons/Reverse.vue'
+import Vertical from './icons/Vertical.vue'
 
 const VERSION = 'tiny-vue-version-3.27'
 const NOTIFY_KEY = 'tiny-vue-playground-notify'
@@ -21,15 +25,16 @@ const tinyMode = searchObj.get('mode')
 const tinyTheme = searchObj.get('theme')
 const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
-const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
-
+const isPreview = searchObj.get('openMode') === 'preview'
 const versions = ['3.27', '3.26', '3.25']
+const manualShow = ref(false)
+
 const getVersion = () => {
   if (isPreview) {
     return versions[0]
   }
   if (versions.includes(localStorage.getItem(VERSION))) {
-    localStorage.getItem(VERSION)
+    return localStorage.getItem(VERSION)
   }
   return versions[0]
 }
@@ -52,7 +57,7 @@ const showNotify = () => {
       message: () => (
         <div>
           <div>演练场仅保留最新的三个版本可选。</div>
-          <div style="text-align: right;margin-top: 12px;">
+          <div style="text-align: right; margin-top: 12px;">
             <TinyButton onClick={muteNotify} type={'primary'}>
               不再提示
             </TinyButton>
@@ -93,9 +98,7 @@ const createImportMap = (version) => {
     imports['@opentiny/vue-common'] = `${getRuntime(version)}tiny-vue-saas-common.mjs`
     imports['@opentiny/vue'] = `${getRuntime(version)}tiny-vue-all.mjs`
   }
-  return {
-    imports
-  }
+  return { imports }
 }
 
 const getTinyTheme = (version) => {
@@ -103,9 +106,8 @@ const getTinyTheme = (version) => {
     return `${getRuntime(version)}tailwind.css`
   }
   let theme = tinyTheme
-  if (!['aurora', 'saas'].includes(theme)) {
-    theme = 'default'
-  }
+  if (!['aurora', 'saas'].includes(theme)) theme = 'default'
+
   const tinyThemeMap = {
     default: `${cdnHost}/@opentiny/vue-theme${versionDelimiter}${version}/${fileDelimiter}index.css`,
     aurora: `${cdnHost}/@opentiny/vue-theme${versionDelimiter}${version}/${fileDelimiter}index.css`,
@@ -114,7 +116,7 @@ const getTinyTheme = (version) => {
   return tinyThemeMap[theme]
 }
 
-// 如果hash有效，它格式为： 3.8.4|eNqIVV9p.............
+// 如果hash有效，它格式为： 3.8.4|eNqIVV9p............."
 const hash = location.hash.slice(1)
 const shareData = hash.split('|')
 
@@ -149,13 +151,45 @@ const designThemeMap = {
   old: 'tinyOldTheme'
 }
 
+// 定义选项数据
+const layoutItems = [
+  {
+    id: 1,
+    text: '水平布局',
+    iconPath: 'Layout'
+  },
+  {
+    id: 2,
+    text: '垂直布局',
+    iconPath: 'Vertical'
+  },
+  {
+    id: 3,
+    text: '布局反转',
+    iconPath: 'Reverse'
+  }
+]
+
+// 选中状态管理
+const selectedIndex = ref(0)
+
+// 选择 item 函数
+const selectItem = (index) => {
+  selectedIndex.value = index
+  if (index === 0) {
+    changeLayout('horizon')
+  } else if (index === 1) {
+    changeLayout('vertical')
+  } else {
+    changeReserve()
+  }
+}
+
 function setTinyDesign() {
   let importCode = ''
   let useCode = ''
 
-  if (isMobileFirst) {
-    useCode += 'app.provide("TinyMode", "mobile-first");\n'
-  }
+  if (isMobileFirst) useCode += 'app.provide("TinyMode", "mobile-first");\n'
 
   if (['aurora', 'saas', 'smb'].includes(tinyTheme)) {
     importCode += `import designConfig from '@opentiny/vue-design-${tinyTheme}';
@@ -170,10 +204,7 @@ function setTinyDesign() {
     useCode += `const theme = new TinyThemeTool(${designTheme});\n`
   }
 
-  state.previewOptions.customCode = {
-    importCode,
-    useCode
-  }
+  state.previewOptions.customCode = { importCode, useCode }
 }
 
 function selectVersion(version) {
@@ -189,13 +220,15 @@ function versionChange(version) {
 
 function insertStyleDom(version) {
   nextTick(() => {
-    if (!document.querySelector('iframe')) return
+    const iframe = document.querySelector('iframe')
+    if (!iframe) return
 
-    const iframeWin = document.querySelector('iframe').contentWindow
+    const iframeWin = iframe.contentWindow
     const link = iframeWin.document.createElement('link')
     link.id = 'tiny-theme'
     link.rel = 'stylesheet'
     link.href = getTinyTheme(version)
+
     iframeWin.addEventListener('DOMContentLoaded', () => {
       iframeWin.document.head.append(link)
 
@@ -209,29 +242,25 @@ function insertStyleDom(version) {
 
 function changeLayout(layout) {
   localStorage.setItem(LAYOUT, layout)
+  state.layout = layout
 }
 
-function changeReserve(isReserve) {
+function changeReserve() {
+  state.layoutReverse = !state.layoutReverse
+  localStorage.setItem(LAYOUT_REVERSE, state.layoutReverse)
   insertStyleDom(state.selectVersion)
-  localStorage.setItem(LAYOUT_REVERSE, isReserve)
 }
 
 function getDemoName(name, apiMode) {
   return name.replace(/\.vue$/, `${apiMode === 'Options' ? '' : '-composition-api'}.vue`)
 }
 
-// eslint-disable-next-line unused-imports/no-unused-vars
 const getDemoCode = async ({ cmpId, fileName, apiMode, mode }) => {
   const demoName = getDemoName(`${getWebdocPath(cmpId)}/${fileName}`, apiMode)
   const path = tinyMode === 'mobile-first' ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}`
   const code = await fetchDemosFile(path)
-    .then((code) => {
-      return code
-    })
-    .catch(() => {
-      return `${demoName}示例资源不存在，请检查文件名是否正确？`
-    })
-
+    .then((code) => code)
+    .catch(() => `${demoName}示例资源不存在，请检查文件名是否正确？`)
   return code
 }
 
@@ -243,21 +272,35 @@ const loadFileCode = async ({ cmpId, fileName, apiMode, mode }) => {
   versionChange(latestVersion)
 }
 
+// 分享功能
+const share = () => {
+  const hash = store.serialize()
+  const shareUrl = `${location.origin}${import.meta.env.VITE_PLAYGROUND_URL}?mode=${tinyMode}&theme=${tinyTheme}#${state.selectVersion}|${hash}`
+
+  navigator.clipboard.writeText(shareUrl)
+  Notify({
+    type: 'success',
+    title: '分享',
+    message: '当前URL已被复制到剪贴板.',
+    duration: 2000
+  })
+}
+
 onMounted(() => {
   setTinyDesign()
-  // 初始加载,有分享则加载分享，否则加载默认版本的默认文件
+  // 初始加载，有分享则加载分享，否则加载默认版本的默认文件
   if (shareData.length === 2) {
     const demoFile = Object.values(store.state.files).find(
       (file) =>
         file.filename.startsWith('src/') &&
         file.filename.endsWith('.vue') &&
-        file.filename !== 'src/App.vue' &&
-        file.filename !== 'src/PlaygroundMain.vue'
+        !['src/App.vue', 'src/PlaygroundMain.vue'].includes(file.filename)
     )
-
-    store.state.mainFile = demoFile.filename
-    store.state.activeFile = demoFile
-    versionChange(shareData[0])
+    if (demoFile) {
+      store.state.mainFile = demoFile.filename
+      store.state.activeFile = demoFile
+      versionChange(shareData[0])
+    }
   } else {
     const fileName = searchObj.get('fileName')
     const cmpId = searchObj.get('cmpId')
@@ -268,72 +311,82 @@ onMounted(() => {
     }
   }
 })
-// 分享功能
-function share() {
-  const hash = store.serialize()
-  const shareUrl =
-    location.origin +
-    `${import.meta.env.VITE_PLAYGROUND_URL}?mode=${tinyMode}&theme=${tinyTheme}#` +
-    state.selectVersion +
-    '|' +
-    hash
-
-  navigator.clipboard.writeText(shareUrl)
-  Notify({
-    type: 'success',
-    title: '分享',
-    message: '当前URL已被复制到剪贴板.',
-    duration: 2000
-  })
-}
 </script>
 
 <template>
   <div class="header">
-    <div class="title"><img class="logo" :src="logoUrl" /> <span class="mobile-hide">OpenTiny Vue 演练场</span></div>
+    <div class="title">
+      <img class="logo" :src="logoUrl" />
+      <span class="mobile-hide">OpenTiny Vue 演练场</span>
+    </div>
     <div>
-      <span class="ml20 mobile-hide">
-        布局方向:
-        <tiny-button-group
-          :data="state.layoutOptions"
-          v-model="state.layout"
-          @change="changeLayout"
-        ></tiny-button-group>
-      </span>
-      <span class="ml20 mobile-hide">
-        布局反转:
-        <tiny-switch v-model="state.layoutReverse" mini @change="changeReserve"></tiny-switch>
-      </span>
-      <span class="ml20">
-        <span class="mobile-hide">OpenTiny Vue 版本: </span>
+      <div class="select-opt">
         <tiny-select
           v-model="state.selectVersion"
-          style="width: 150px"
+          style="width: 200px"
           :disabled="isPreview"
           @change="selectVersion"
           @click="showNotify"
+          size="medium"
         >
-          <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
-          </tiny-option>
+          <tiny-option
+            v-for="item in state.versions"
+            :key="item.value"
+            :label="`版本：${item.value}`"
+            :value="item.value"
+          />
         </tiny-select>
-      </span>
-      <Share @click="share" title="分享" class="share" />
+      </div>
+      <tiny-tooltip v-model="manualShow" placement="top" effect="light" manual>
+        <template #content>
+          <div class="tip-ctn">
+            <p class="tip-ctn-title">设置布局</p>
+            <div class="tip-container">
+              <div
+                v-for="(item, index) in layoutItems"
+                :key="item.id"
+                class="tip-element"
+                :class="{ active: selectedIndex === index }"
+                @click="selectItem(index)"
+              >
+                <span class="tip-element-text">{{ item.text }}</span>
+                <span>
+                  <Layout class="tip-element-icon" v-if="item.iconPath === 'Layout'" />
+                </span>
+                <span>
+                  <Vertical class="tip-element-icon" v-if="item.iconPath === 'Vertical'" />
+                </span>
+                <span>
+                  <Reverse class="tip-element-icon" v-if="item.iconPath === 'Reverse'" />
+                </span>
+              </div>
+            </div>
+          </div>
+        </template>
+        <div class="icon-wrapper">
+          <Set title="设置" class="icon-ref" :class="{ active: manualShow }" @click="manualShow = !manualShow" />
+        </div>
+      </tiny-tooltip>
+      <div class="icon-wrapper">
+        <Share @click="share" title="分享" class="icon-ref" />
+      </div>
       <a style="display: flex" href="https://github.com/opentiny/tiny-vue" target="_blank">
         <GitHub class="github" />
       </a>
     </div>
   </div>
   <Repl
+    ref="replRef"
     :editor="Editor"
     :store="store"
     :preview-options="state.previewOptions"
     :clear-console="false"
     :layout="state.layout"
     :layout-reverse="state.layoutReverse"
-  ></Repl>
+  />
 </template>
 
-<style>
+<style lang="less" scoped>
 * {
   box-sizing: border-box;
 }
@@ -377,18 +430,151 @@ function share() {
 }
 
 .vue-repl {
-  /* 16px 是body默认margin*/
+  /* 16px 是body默认margin */
   height: calc(100vh - 36px - 16px) !important;
+  transition: width 0.3s ease; /* 添加宽度过渡 */
+}
+
+.github {
+  width: 32px;
+  height: 32px;
+  margin: 0 15px;
+  cursor: pointer;
 }
 
-.github,
 .share {
   width: 20px;
-  margin-right: 10px;
+  height: 20px;
+  margin: 0 15px;
   cursor: pointer;
 }
 
-.share {
-  margin-left: 10px;
+.tip-ctn {
+  background: #fff;
+  padding: 8px 10px;
+
+  &-title {
+    margin: 0 0 10px 0;
+  }
+}
+
+.split-line {
+  width: 1px;
+  height: 12px;
+  background-color: #dbdbdb;
+  margin: 0 15px;
+}
+
+.select-opt {
+  margin-right: 15px;
+  .tiny-select .tiny-input .tiny-input__inner {
+    height: 32px;
+  }
+}
+
+.icon-wrapper {
+  padding: 9px;
+  margin: 0 6px;
+
+  &:hover {
+    background-color: #f5f5f5;
+    border-radius: 50%;
+  }
+
+  &:active {
+    background-color: #f5f5f5;
+    border-radius: 50%;
+  }
+}
+
+.icon-ref {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  display: block;
+}
+
+/* 添加高亮样式 */
+.header img {
+  border: 2px solid transparent;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  margin: 0 2px;
+}
+
+.header img.active {
+  border-color: #1476ff;
+  background-color: rgba(64, 158, 255, 0.1);
+  box-shadow: 0 0 8px rgba(64, 158, 255, 0.5);
+}
+
+.screen-title {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 4px;
+}
+
+.tip-container {
+  display: flex;
+  flex-direction: row;
+  padding: 4px 2px;
+  gap: 20px;
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.tip-element {
+  width: 112px;
+  height: 40px;
+  background-color: #fafafa;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  user-select: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.tip-element:hover {
+  background-color: #f5f5f5;
+  transform: translateY(-2px);
+}
+
+.tip-element.active {
+  border: 1px solid #191919;
+  background-color: #f5f5f5;
+}
+
+.tip-element-text {
+  color: #191919;
+  font-size: 12px;
+  font-weight: 400;
+  margin-right: 8px;
+  letter-spacing: 0.2px;
+}
+
+.tip-element-icon {
+  width: 24px;
+  height: 24px;
+  margin-top: 6px;
+  transition: all 0.3s ease;
+}
+
+.tip-element.active .tip-element-icon {
+  transform: scale(1.1);
+}
+
+.tip-element:active {
+  transform: scale(0.98);
+}
+
+.tip-element.active:active {
+  transform: scale(0.98);
 }
 </style>

package/playground/assets/icon-layout-vertical.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
+	<rect id="上下布局" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 1" d="M5.4 1.2C6.06 1.2 6.6 1.74 6.6 2.4L6.6 14.4C6.6 15.06 6.06 15.6 5.4 15.6L2.4 15.6C1.74 15.6 1.2 15.06 1.2 14.4L1.2 2.4C1.2 1.74 1.74 1.2 2.4 1.2L5.4 1.2ZM5.4 0L2.4 0C1.08 0 0 1.08 0 2.4L0 14.4C0 15.72 1.08 16.8 2.4 16.8L5.4 16.8C6.72 16.8 7.8 15.72 7.8 14.4L7.8 2.4C7.8 1.08 6.72 0 5.4 0ZM16.8 2.4L16.8 14.4C16.8 15.72 15.72 16.8 14.4 16.8L11.4 16.8C10.08 16.8 9 15.72 9 14.4L9 2.4C9 1.08 10.08 0 11.4 0L14.4 0C15.72 0 16.8 1.08 16.8 2.4Z" fill="rgb(0,0,0)" fill-rule="nonzero" transform="matrix(0,1,1,0,3.6001,3.84009)" />
+</svg>

package/playground/icons/Github.vue

@@ -1,7 +1,19 @@
 <template>
-  <svg viewBox="0 0 24 24" fill="currentColor">
+  <svg
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="32.000000"
+    height="32.000000"
+    fill="none"
+    customFrame="#000000"
+  >
+    <rect id="git" width="32.000000" height="32.000000" x="0.000000" y="0.000000" />
     <path
-      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577v-2.234c-3.338.724-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.088-.744.083-.729.083-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.807 1.305 3.364.998.108-.788.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.933 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02-.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.218.694.824.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12z"
+      id="Fill"
+      d="M15.9999 2.00008C9.13479 2.00101 3.28319 6.9797 2.18278 13.756C1.08237 20.5323 5.05785 27.1068 11.5699 29.2801C12.2699 29.4101 12.5699 28.9801 12.5699 28.6101C12.5699 28.2401 12.5699 27.4001 12.5699 26.2301C8.67987 27.0701 7.85988 24.3501 7.85988 24.3501C7.58633 23.4929 7.0106 22.7644 6.23987 22.3001C4.96987 21.4401 6.33988 21.4501 6.33988 21.4501C7.23883 21.5771 8.02868 22.1123 8.47987 22.9001C9.28646 24.3468 11.1128 24.866 12.5599 24.0601C12.6163 23.3506 12.9291 22.6858 13.4399 22.1901C10.3399 21.8301 7.06987 20.6301 7.06987 15.2701C7.0472 13.878 7.5631 12.5309 8.50987 11.5101C8.08134 10.3043 8.13144 8.98006 8.64988 7.81008C8.64988 7.81008 9.81988 7.43008 12.4999 9.24008C14.7913 8.61503 17.2084 8.61503 19.4999 9.24008C22.1699 7.43008 23.3399 7.81008 23.3399 7.81008C23.8583 8.98006 23.9084 10.3043 23.4799 11.5101C24.4266 12.5309 24.9425 13.878 24.9199 15.2701C24.9199 20.6501 21.6499 21.8301 18.5299 22.1801C19.2061 22.8655 19.5525 23.81 19.4799 24.7701C19.4799 26.6401 19.4799 28.1501 19.4799 28.6101C19.4799 29.0701 19.7299 29.4201 20.4799 29.2801C27.001 27.1039 30.9772 20.515 29.8632 13.7313C28.7491 6.94749 22.8745 1.97633 15.9999 2.00008Z"
+      fill="rgb(25,25,25)"
+      fill-rule="evenodd"
     />
   </svg>
 </template>

package/playground/icons/Layout.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="24.000000"
+    height="24.000000"
+    fill="none"
+  >
+    <rect id="左右布局" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
+    <path
+      id="矢量 1"
+      d="M9.0001 5.04009C9.6601 5.04009 10.2001 5.58009 10.2001 6.24009L10.2001 18.2401C10.2001 18.9001 9.6601 19.4401 9.0001 19.4401L6.0001 19.4401C5.3401 19.4401 4.8001 18.9001 4.8001 18.2401L4.8001 6.24009C4.8001 5.58009 5.3401 5.04009 6.0001 5.04009L9.0001 5.04009ZM9.0001 3.84009L6.0001 3.84009C4.6801 3.84009 3.6001 4.92009 3.6001 6.24009L3.6001 18.2401C3.6001 19.5601 4.6801 20.6401 6.0001 20.6401L9.0001 20.6401C10.3201 20.6401 11.4001 19.5601 11.4001 18.2401L11.4001 6.24009C11.4001 4.92009 10.3201 3.84009 9.0001 3.84009ZM20.4001 6.24009L20.4001 18.2401C20.4001 19.5601 19.3201 20.6401 18.0001 20.6401L15.0001 20.6401C13.6801 20.6401 12.6001 19.5601 12.6001 18.2401L12.6001 6.24009C12.6001 4.92009 13.6801 3.84009 15.0001 3.84009L18.0001 3.84009C19.3201 3.84009 20.4001 4.92009 20.4001 6.24009Z"
+      fill="rgb(0,0,0)"
+      fill-rule="nonzero"
+    />
+  </svg>
+</template>