android-midscene-automation 0.1.0

package/src/appium-recorder/api.ts

@@ -0,0 +1,64 @@
+import { APP_BASE } from '../api';
+import type { AppiumRecordedScript, AppiumRecordedStep } from './types';
+
+async function readJson<T>(response: Response) {
+  const payload = (await response.json().catch(() => ({}))) as T & {
+    message?: string;
+    output?: string;
+    error?: string;
+  };
+  if (!response.ok) {
+    throw new Error(payload.output || payload.message || payload.error || `请求失败（HTTP ${response.status}）`);
+  }
+  return payload;
+}
+
+function postJson<T>(url: string, body?: unknown) {
+  return fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body || {}),
+  }).then((response) => readJson<T>(response));
+}
+
+export async function getAppiumTree(deviceId: string) {
+  const response = await fetch(`${APP_BASE}/api/appium-recorder/tree?deviceId=${encodeURIComponent(deviceId)}`);
+  return readJson<{ deviceId: string; xml: string; activity: string; dumpedAt: string }>(response);
+}
+
+export function tapAppiumDevice(input: { deviceId: string; x: number; y: number }) {
+  return postJson<{ success: boolean }>(`${APP_BASE}/api/appium-recorder/tap`, input);
+}
+
+export function pressAppiumDeviceKey(input: { deviceId: string; keyCode: number }) {
+  return postJson<{ success: boolean }>(`${APP_BASE}/api/appium-recorder/key`, input);
+}
+
+export async function getAppiumScripts() {
+  const response = await fetch(`${APP_BASE}/api/appium-recorder/scripts`);
+  return readJson<{ scripts: AppiumRecordedScript[] }>(response);
+}
+
+export function saveAppiumScript(input: {
+  id?: string;
+  name: string;
+  appPackage: string;
+  appActivity?: string;
+  deviceId?: string;
+  steps: AppiumRecordedStep[];
+}) {
+  return postJson<{ script: AppiumRecordedScript }>(`${APP_BASE}/api/appium-recorder/scripts`, input);
+}
+
+export function deleteAppiumScript(id: string) {
+  return fetch(`${APP_BASE}/api/appium-recorder/scripts/${encodeURIComponent(id)}`, {
+    method: 'DELETE',
+  }).then((response) => readJson<{ success: boolean }>(response));
+}
+
+export function replayAppiumScript(input: { id: string; deviceId?: string }) {
+  return postJson<{ success: boolean; output: string }>(
+    `${APP_BASE}/api/appium-recorder/scripts/${encodeURIComponent(input.id)}/replay`,
+    { deviceId: input.deviceId },
+  );
+}

package/src/appium-recorder/components/ComponentTree.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue';
+import type { AppiumNode } from '../types';
+
+const props = defineProps<{
+  tree: AppiumNode | null;
+  selectedId: string;
+}>();
+
+defineEmits<{
+  select: [node: AppiumNode];
+}>();
+
+const containerRef = ref<HTMLElement | null>(null);
+const treeRef = ref<{ setCurrentKey: (key: string) => void } | null>(null);
+
+watch(
+  () => props.selectedId,
+  async () => {
+    treeRef.value?.setCurrentKey(props.selectedId);
+    await nextTick();
+    containerRef.value
+      ?.querySelector('.el-tree-node.is-current')
+      ?.scrollIntoView({ block: 'center', inline: 'nearest' });
+  },
+);
+</script>
+
+<template>
+  <div ref="containerRef" class="appium-tree">
+    <el-empty v-if="!tree" description="暂无组件树" />
+    <el-tree
+      v-else
+      ref="treeRef"
+      :data="[tree]"
+      node-key="id"
+      :props="{ label: 'label', children: 'children' }"
+      :current-node-key="selectedId"
+      highlight-current
+      default-expand-all
+      @node-click="$emit('select', $event)"
+    />
+  </div>
+</template>

package/src/appium-recorder/components/NodeDetail.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { AppiumNode } from '../types';
+import tapIcon from '../../../demo/icon-share-master/crosshair.svg';
+import inputIcon from '../../../demo/icon-share-master/text.svg';
+import assertIcon from '../../../demo/icon-share-master/select.svg';
+import backIcon from '../../../demo/icon-share-master/back.svg';
+import homeIcon from '../../../demo/icon-share-master/phone.svg';
+import activityIcon from '../../../demo/icon-share-master/browser.svg';
+import swipeIcon from '../../../demo/icon-share-master/bidirection.svg';
+import clearIcon from '../../../demo/icon-share-master/clear.svg';
+import coordinateIcon from '../../../demo/icon-share-master/pin.svg';
+import launchIcon from '../../../demo/icon-share-master/android.svg';
+import disappearIcon from '../../../demo/icon-share-master/eye.svg';
+import powerIcon from '../../../demo/icon-share-master/power.svg';
+import tasksIcon from '../../../demo/icon-share-master/sidebar.svg';
+import longPressIcon from '../../../demo/icon-share-master/pin.svg';
+import pinchIcon from '../../../demo/icon-share-master/zoom.svg';
+import delayIcon from '../../../demo/icon-share-master/pause.svg';
+import addIcon from '../../../demo/icon-share-master/add.svg';
+
+type RecorderAction =
+  | 'delay'
+  | 'tap'
+  | 'input'
+  | 'assertExists'
+  | 'keyBack'
+  | 'keyHome'
+  | 'keyRecent'
+  | 'keyPower'
+  | 'waitActivity'
+  | 'swipe'
+  | 'clearInput'
+  | 'coordinateTap'
+  | 'launchApp'
+  | 'waitDisappear'
+  | 'assertText'
+  | 'longPress'
+  | 'pinch';
+
+type ActionItem = {
+  type: RecorderAction;
+  label: string;
+  icon: string;
+  requiresNode: boolean;
+};
+
+const actionGroups: Array<{ title: string; actions: ActionItem[] }> = [
+  {
+    title: '组件操作',
+    actions: [
+      { type: 'tap', label: '录制点击', icon: tapIcon, requiresNode: true },
+      { type: 'input', label: '录制输入', icon: inputIcon, requiresNode: true },
+      { type: 'clearInput', label: '清空输入', icon: clearIcon, requiresNode: true },
+      { type: 'coordinateTap', label: '点击坐标', icon: coordinateIcon, requiresNode: true },
+      { type: 'longPress', label: '长按', icon: longPressIcon, requiresNode: true },
+    ],
+  },
+  {
+    title: '设备操作',
+    actions: [
+      { type: 'keyBack', label: '返回键', icon: backIcon, requiresNode: false },
+      { type: 'keyHome', label: 'Home 键', icon: homeIcon, requiresNode: false },
+      { type: 'keyRecent', label: '最近任务', icon: tasksIcon, requiresNode: false },
+      { type: 'keyPower', label: '电源键', icon: powerIcon, requiresNode: false },
+      { type: 'swipe', label: '滑动', icon: swipeIcon, requiresNode: false },
+      { type: 'pinch', label: '双指缩放', icon: pinchIcon, requiresNode: false },
+      { type: 'launchApp', label: '启动 App', icon: launchIcon, requiresNode: false },
+    ],
+  },
+  {
+    title: '等待断言',
+    actions: [
+      { type: 'delay', label: '添加延时', icon: delayIcon, requiresNode: false },
+      { type: 'assertExists', label: '断言存在', icon: assertIcon, requiresNode: true },
+      { type: 'assertText', label: '断言文本', icon: inputIcon, requiresNode: true },
+      { type: 'waitDisappear', label: '等待元素消失', icon: disappearIcon, requiresNode: true },
+      { type: 'waitActivity', label: '等待 Activity', icon: activityIcon, requiresNode: false },
+    ],
+  },
+];
+
+defineProps<{
+  node: AppiumNode | null;
+  disabled?: boolean;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  addAction: [type: RecorderAction];
+}>();
+
+function selectAction(command: string | number | object) {
+  emit('addAction', command as RecorderAction);
+}
+</script>
+
+<template>
+  <div
+    v-loading="loading"
+    element-loading-text="正在检测页面变化..."
+    class="appium-node-detail"
+  >
+    <template v-if="node">
+      <div class="appium-node-detail__title">{{ node.label }}</div>
+      <el-descriptions :column="1" border size="small">
+        <el-descriptions-item label="resource-id">{{ node.resourceId || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="content-desc">{{ node.contentDesc || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="text">{{ node.text || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="class">{{ node.className || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="selector">{{ node.selector.strategy }} {{ node.selector.value || '' }}</el-descriptions-item>
+        <el-descriptions-item label="bounds">
+          <span v-if="node.bounds">
+            [{{ node.bounds.left }},{{ node.bounds.top }}][{{ node.bounds.right }},{{ node.bounds.bottom }}]
+          </span>
+          <span v-else>-</span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </template>
+    <el-empty v-else description="请选择组件" />
+
+    <el-dropdown
+      trigger="click"
+      :disabled="disabled"
+      max-height="320px"
+      popper-class="appium-action-dropdown"
+      @command="selectAction"
+    >
+      <el-button class="appium-action-trigger" :disabled="disabled">
+        <img :src="addIcon" alt="" class="appium-action-trigger__icon" />
+        添加操作
+      </el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <template v-for="group in actionGroups" :key="group.title">
+            <div class="appium-action-dropdown__group">{{ group.title }}</div>
+            <el-dropdown-item
+              v-for="action in group.actions"
+              :key="action.type"
+              :command="action.type"
+              :disabled="action.requiresNode && !node"
+            >
+              <span class="appium-action-dropdown__item">
+                <img :src="action.icon" :alt="action.label" />
+                <span>{{ action.label }}</span>
+              </span>
+            </el-dropdown-item>
+          </template>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>

package/src/appium-recorder/components/RecordedSteps.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { Delete, Edit, Timer } from '@element-plus/icons-vue';
+import type { AppiumRecordedStep } from '../types';
+
+defineProps<{
+  steps: AppiumRecordedStep[];
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  remove: [index: number];
+  addDelay: [index?: number];
+  editInput: [index: number];
+}>();
+
+function stepMeta(step: AppiumRecordedStep) {
+  if (step.type === 'delay') return `${step.timeoutMs || 1000}ms`;
+  if (step.type === 'input') return `输入内容：${step.value || '空'}`;
+  if (step.type === 'key') return `keyCode ${step.keyCode || ''}`;
+  if (step.type === 'waitActivity') return step.value || '';
+  if (step.type === 'launchApp') return step.value || '';
+  if (step.type === 'screenshot') return '保存当前截图';
+  if (step.type === 'swipe') {
+    const swipe = step.swipe;
+    return swipe ? `[${swipe.startX},${swipe.startY}] -> [${swipe.endX},${swipe.endY}]` : '';
+  }
+  if (step.type === 'pinch') return step.pinch?.direction === 'out' ? '放大' : '缩小';
+  if (step.type === 'longPress') return `${step.fallback?.centerX || ''},${step.fallback?.centerY || ''}`;
+  if (step.type === 'coordinateTap') return `${step.fallback?.centerX || ''},${step.fallback?.centerY || ''}`;
+  if (step.type === 'assertText') return step.value || '';
+  return `${step.selector?.strategy || ''} ${step.selector?.value || ''}`;
+}
+</script>
+
+<template>
+  <div class="appium-recorded-steps-panel">
+    <div class="appium-recorded-steps">
+      <el-empty v-if="!steps.length" description="暂无录制步骤" />
+      <div
+        v-for="(step, index) in steps"
+        v-else
+        :key="step.id"
+        class="appium-step-item"
+      >
+        <div
+          class="appium-step-row"
+          :class="{ 'appium-step-row--delay': step.type === 'delay' }"
+        >
+          <span class="appium-step-row__index">{{ index + 1 }}</span>
+          <div class="appium-step-row__main">
+            <strong :title="step.label">{{ step.label }}</strong>
+            <small :title="stepMeta(step)">{{ stepMeta(step) }}</small>
+          </div>
+          <div class="appium-step-row__actions">
+            <el-button
+              v-if="step.type === 'input'"
+              text
+              size="small"
+              :icon="Edit"
+              :disabled="disabled"
+              title="修改输入内容"
+              @click="$emit('editInput', index)"
+            />
+            <el-button text size="small" :icon="Delete" :disabled="disabled" @click="$emit('remove', index)" />
+          </div>
+        </div>
+        <button
+          type="button"
+          class="appium-step-insert-delay"
+          :disabled="disabled"
+          @click="$emit('addDelay', index)"
+        >
+          <el-icon><Timer /></el-icon>
+          <span>在此步骤后插入延时</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/appium-recorder/tree.ts

@@ -0,0 +1,129 @@
+import type { AppiumBounds, AppiumNode, AppiumSelector } from './types';
+
+function attr(element: Element, name: string) {
+  return element.getAttribute(name) || '';
+}
+
+function parseBounds(value: string): AppiumBounds | undefined {
+  const match = value.match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
+  if (!match) return undefined;
+  const left = Number(match[1]);
+  const top = Number(match[2]);
+  const right = Number(match[3]);
+  const bottom = Number(match[4]);
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    centerX: Math.round((left + right) / 2),
+    centerY: Math.round((top + bottom) / 2),
+  };
+}
+
+function escapeUiAutomatorText(value: string) {
+  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
+function buildSelector(element: Element, bounds?: AppiumBounds): AppiumSelector {
+  const contentDesc = attr(element, 'content-desc');
+  const resourceId = attr(element, 'resource-id');
+  const text = attr(element, 'text');
+  const className = attr(element, 'class');
+  if (contentDesc) return { strategy: 'accessibilityId', value: contentDesc };
+  if (resourceId) return { strategy: 'id', value: resourceId };
+  if (text) {
+    const classClause = className ? `.className("${escapeUiAutomatorText(className)}")` : '';
+    return { strategy: 'androidUiAutomator', value: `new UiSelector().text("${escapeUiAutomatorText(text)}")${classClause}` };
+  }
+  if (bounds) return { strategy: 'bounds', centerX: bounds.centerX, centerY: bounds.centerY };
+  return { strategy: 'xpath', value: '' };
+}
+
+function nodeLabel(element: Element) {
+  return attr(element, 'resource-id')
+    || attr(element, 'content-desc')
+    || attr(element, 'text')
+    || attr(element, 'class')
+    || element.tagName;
+}
+
+function elementChildren(element: Element) {
+  return Array.from(element.children).filter((child) => child.tagName === 'node');
+}
+
+function escapeXpathValue(value: string) {
+  return value.replace(/'/g, "'");
+}
+
+function transformNode(
+  element: Element,
+  parentPath: string,
+  index: number,
+  resourceIdCounts: Map<string, number>,
+): AppiumNode {
+  const bounds = parseBounds(attr(element, 'bounds'));
+  const className = attr(element, 'class') || element.tagName;
+  const resourceId = attr(element, 'resource-id');
+  const siblings = element.parentElement ? elementChildren(element.parentElement) : [element];
+  const sameClassIndex = siblings
+    .slice(0, index + 1)
+    .filter((sibling) => (attr(sibling, 'class') || sibling.tagName) === className).length;
+  const xpath = resourceId && resourceIdCounts.get(resourceId) === 1
+    ? `//*[@resource-id='${escapeXpathValue(resourceId)}']`
+    : `${parentPath}/${className}[${sameClassIndex}]`;
+  const children = elementChildren(element).map((child, childIndex) => (
+    transformNode(child, xpath, childIndex, resourceIdCounts)
+  ));
+  return {
+    id: `${xpath}-${attr(element, 'bounds') || index}`,
+    label: nodeLabel(element),
+    resourceId,
+    text: attr(element, 'text'),
+    contentDesc: attr(element, 'content-desc'),
+    className,
+    packageName: attr(element, 'package'),
+    clickable: attr(element, 'clickable') === 'true',
+    enabled: attr(element, 'enabled') !== 'false',
+    xpath,
+    bounds,
+    selector: buildSelector(element, bounds),
+    children,
+  };
+}
+
+export function parseWindowHierarchy(xml: string) {
+  const doc = new DOMParser().parseFromString(xml, 'text/xml');
+  const root = doc.querySelector('hierarchy > node') || doc.querySelector('node');
+  if (!root) return null;
+  const resourceIdCounts = new Map<string, number>();
+  doc.querySelectorAll('node[resource-id]').forEach((element) => {
+    const resourceId = attr(element, 'resource-id');
+    if (resourceId) resourceIdCounts.set(resourceId, (resourceIdCounts.get(resourceId) || 0) + 1);
+  });
+  return transformNode(root, '', 0, resourceIdCounts);
+}
+
+export function flattenNodes(node: AppiumNode | null): AppiumNode[] {
+  if (!node) return [];
+  return [node, ...node.children.flatMap((child) => flattenNodes(child))];
+}
+
+export function findSmallestNodeAtPoint(node: AppiumNode | null, x: number, y: number) {
+  if (!node) return null;
+  let result: AppiumNode | null = null;
+  let resultArea = Number.POSITIVE_INFINITY;
+
+  for (const item of flattenNodes(node)) {
+    const bounds = item.bounds;
+    if (!bounds) continue;
+    if (x < bounds.left || x > bounds.right || y < bounds.top || y > bounds.bottom) continue;
+    const area = (bounds.right - bounds.left) * (bounds.bottom - bounds.top);
+    if (area <= resultArea) {
+      result = item;
+      resultArea = area;
+    }
+  }
+
+  return result;
+}

package/src/appium-recorder/types.ts

@@ -0,0 +1,88 @@
+export type AppiumBounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  centerX: number;
+  centerY: number;
+};
+
+export type AppiumSelector = {
+  strategy: 'accessibilityId' | 'id' | 'androidUiAutomator' | 'xpath' | 'bounds';
+  value?: string;
+  centerX?: number;
+  centerY?: number;
+};
+
+export type AppiumNode = {
+  id: string;
+  label: string;
+  resourceId: string;
+  text: string;
+  contentDesc: string;
+  className: string;
+  packageName: string;
+  clickable: boolean;
+  enabled: boolean;
+  xpath: string;
+  bounds?: AppiumBounds;
+  selector: AppiumSelector;
+  children: AppiumNode[];
+};
+
+export type AppiumRecordedStep = {
+  id: string;
+  type:
+    | 'tap'
+    | 'input'
+    | 'waitFor'
+    | 'assertExists'
+    | 'key'
+    | 'waitActivity'
+    | 'delay'
+    | 'clearInput'
+    | 'coordinateTap'
+    | 'swipe'
+    | 'screenshot'
+    | 'launchApp'
+    | 'waitDisappear'
+    | 'assertText'
+    | 'longPress'
+    | 'pinch';
+  label: string;
+  selector?: AppiumSelector;
+  fallback?: AppiumSelector;
+  value?: string;
+  keyCode?: number;
+  timeoutMs?: number;
+  swipe?: {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    duration: number;
+  };
+  pinch?: {
+    direction: 'in' | 'out';
+    centerX: number;
+    centerY: number;
+    percent: number;
+  };
+  snapshot?: {
+    text: string;
+    resourceId: string;
+    contentDesc: string;
+    className: string;
+  };
+};
+
+export type AppiumRecordedScript = {
+  id: string;
+  name: string;
+  appPackage: string;
+  appActivity: string;
+  deviceId: string;
+  steps: AppiumRecordedStep[];
+  createdAt: string;
+  updatedAt: string;
+};

package/src/assets/device-actions/back.svg

@@ -0,0 +1,5 @@
+<svg t="1737900068491" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M853.333333 128v768a42.666667 42.666667 0 0 1-65.706666 35.882667l-597.333334-384a42.666667 42.666667 0 0 1 0-71.765334l597.333334-384A42.666667 42.666667 0 0 1 853.333333 128z m-85.333333 78.165333L292.266667 512 768 817.792V206.165333z"
+    fill="currentColor"></path>
+</svg>

package/src/assets/device-actions/home.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="m512 85.333333a426.666667 426.666667 0 1 0 426.666667 426.666667 426.666667 426.666667 0 0 0 -426.666667-426.666667zm0 768a341.333333 341.333333 0 1 1 341.333333-341.333333 341.333333 341.333333 0 0 1 -341.333333 341.333333z" fill="currentColor"/>
+</svg>

package/src/assets/device-actions/power.svg

@@ -0,0 +1,5 @@
+<svg t="1737786833367" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M813.653333 253.013333q59.008 59.008 91.349333 135.68 33.664 79.317333 33.664 166.016t-33.664 166.016q-32.341333 76.672-91.349333 135.68t-135.68 91.349333q-79.317333 33.664-166.016 33.664t-166.016-33.664q-76.672-32.341333-135.68-91.349333t-91.349333-135.68q-33.664-79.317333-33.664-166.016t33.664-166.016q32.341333-76.672 91.349333-135.68 12.330667-12.330667 29.994667-12.330667t30.336 12.330667 12.672 29.994667-12.672 30.336q-47.018667 47.018667-73.344 108.330667-26.666667 64-26.666667 132.992t26.666667 132.992q26.325333 61.312 73.344 108.330667t108.330667 73.344q64 26.666667 132.992 26.666667t132.992-26.666667q61.312-26.325333 108.330667-73.344t73.344-108.330667q26.666667-64 26.666667-132.992t-26.666667-132.992q-26.325333-61.312-73.344-108.330667-12.672-12.672-12.672-30.336t12.672-29.994667 30.336-12.330667 29.994667 12.330667zM512 42.666667q17.664 0 30.165333 12.501333t12.501333 30.165333l0 426.666667q0 17.664-12.501333 30.165333t-30.165333 12.501333-30.165333-12.501333-12.501333-30.165333l0-426.666667q0-17.664 12.501333-30.165333t30.165333-12.501333z"
+    fill="currentColor"></path>
+</svg>

package/src/assets/device-actions/tasks.svg

@@ -0,0 +1,3 @@
+<svg t="1626961815522" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="M942.6 82.2v859.6H82.2V82.2h860.4M947.5 2h-871C35.2 2 2 35.2 2 76.5v870.9c0 41.3 33.2 74.5 74.5 74.5h870.9c41.3 0 74.5-33.2 74.5-74.5v-870c0.9-42.2-32.3-75.4-74.4-75.4 0.8 0 0 0 0 0z" fill="currentColor"/>
+</svg>

package/src/assets/device-actions/volume-down.svg

@@ -0,0 +1,3 @@
+<svg t="1608646631805" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="M558.05 144.08L380.11 322H175.99c-26.52 0-48 21.48-48 48v288c0 26.5 21.48 48 48 48h204.12l177.94 177.9c30.06 30.06 81.94 8.94 81.94-33.94V178.04c0-42.94-51.92-63.96-81.94-33.96z m246.4 216.16c-23.16-12.66-52.38-4.32-65.22 18.9-12.78 23.22-4.32 52.4 18.9 65.22C783.95 458.56 799.99 485.24 799.99 514c0 28.76-16.04 55.44-41.84 69.62-23.22 12.82-31.68 42-18.9 65.22 12.86 23.32 42.1 31.6 65.22 18.9 56.46-31.1 91.54-90 91.54-153.76s-35.08-122.64-91.56-153.74z" fill="currentColor"></path>
+</svg>

package/src/assets/device-actions/volume-up.svg

@@ -0,0 +1,3 @@
+<svg t="1608646511970" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="M462.06 142.1L284.12 320H80c-26.52 0-48 21.48-48 48v288c0 26.5 21.48 48 48 48h204.12l177.94 177.9c30.06 30.06 81.94 8.94 81.94-33.94V176.04c0-42.92-51.92-63.96-81.94-33.94zM992 512c0-127.06-64.12-243.88-171.54-312.48-22.38-14.28-52.06-7.64-66.24 14.92s-7.56 52.42 14.82 66.72C848.54 331.94 896 418.22 896 512s-47.46 180.06-126.96 230.84c-22.38 14.28-29 44.14-14.82 66.72 13.02 20.72 42.24 30.28 66.24 14.92C927.88 755.88 992 639.06 992 512z m-283.54-153.74c-23.16-12.66-52.38-4.32-65.22 18.9-12.78 23.22-4.32 52.4 18.9 65.22C687.96 456.56 704 483.26 704 512c0 28.76-16.04 55.44-41.84 69.62-23.22 12.82-31.68 42-18.9 65.22 12.86 23.32 42.1 31.6 65.22 18.9 56.46-31.1 91.54-90 91.54-153.76s-35.08-122.64-91.56-153.72z" fill="currentColor"></path>
+</svg>