feat: 补齐桌面端下载播放，并将窗口改为夜间主题和应用图标
This commit is contained in:
Nixevol
@@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
interface DeviceProfile {
|
||||
brand: string;
|
||||
model: string;
|
||||
os_version: string;
|
||||
device_type: string;
|
||||
physical: boolean;
|
||||
device_id: string;
|
||||
fingerprint: string;
|
||||
app_version: string;
|
||||
app_build: string;
|
||||
language: string;
|
||||
}
|
||||
|
||||
interface ProxySettings {
|
||||
mode: "off" | "system" | "custom";
|
||||
scheme: "http" | "socks5";
|
||||
host: string;
|
||||
port: string;
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
interface SettingsDraft {
|
||||
adbMode: "device" | "settings";
|
||||
custom: DeviceProfile;
|
||||
proxy: ProxySettings;
|
||||
workers: number;
|
||||
directory: string;
|
||||
}
|
||||
|
||||
const tab = defineModel<"device" | "proxy" | "download">("tab", { required: true });
|
||||
const props = defineProps<{ draft: SettingsDraft }>();
|
||||
const emit = defineEmits<{ choose: [] }>();
|
||||
|
||||
const deviceFields: { key: keyof DeviceProfile; label: string; kind?: "select" | "switch" | "language" }[] = [
|
||||
{ key: "brand", label: "品牌" },
|
||||
{ key: "model", label: "型号" },
|
||||
{ key: "os_version", label: "系统版本" },
|
||||
{ key: "device_type", label: "设备类型", kind: "select" },
|
||||
{ key: "physical", label: "真机", kind: "switch" },
|
||||
{ key: "device_id", label: "设备 ID" },
|
||||
{ key: "fingerprint", label: "指纹" },
|
||||
{ key: "app_version", label: "App 版本" },
|
||||
{ key: "app_build", label: "App 构建" },
|
||||
{ key: "language", label: "语言", kind: "language" },
|
||||
];
|
||||
|
||||
const languageOptions = [
|
||||
{ label: "English", value: "en-US" },
|
||||
{ label: "繁體中文", value: "zh-TW" },
|
||||
{ label: "ภาษาไทย", value: "th-TH" },
|
||||
{ label: "한국어", value: "ko-KR" },
|
||||
{ label: "日本語", value: "ja-JP" },
|
||||
{ label: "हिन्दी", value: "hi-IN" },
|
||||
{ label: "Bahasa Melayu (Malaysia)", value: "ms-MY" },
|
||||
{ label: "Português (Brasil)", value: "pt-BR" },
|
||||
];
|
||||
|
||||
function setDraftField(key: keyof DeviceProfile, value: string | boolean) {
|
||||
props.draft.custom = { ...props.draft.custom, [key]: value };
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-tabs v-model:value="tab" type="line" size="small">
|
||||
<n-tab-pane name="device" tab="设备信息" display-directive="if">
|
||||
<n-form class="settings-form" label-placement="left" label-width="96" size="small" :show-feedback="false">
|
||||
<n-form-item v-for="field in deviceFields" :key="field.key" :label="field.label">
|
||||
<n-switch
|
||||
v-if="field.kind === 'switch'"
|
||||
:value="draft.custom.physical"
|
||||
@update:value="setDraftField('physical', $event)"
|
||||
/>
|
||||
<n-select
|
||||
v-else-if="field.kind === 'select'"
|
||||
:value="draft.custom.device_type"
|
||||
:options="[
|
||||
{ label: '手机', value: 'phone' },
|
||||
{ label: '平板', value: 'pad' },
|
||||
]"
|
||||
@update:value="setDraftField('device_type', $event)"
|
||||
/>
|
||||
<n-select
|
||||
v-else-if="field.kind === 'language'"
|
||||
:value="draft.custom.language"
|
||||
:options="languageOptions"
|
||||
@update:value="setDraftField('language', $event)"
|
||||
/>
|
||||
<n-input
|
||||
v-else
|
||||
:value="String(draft.custom[field.key] ?? '')"
|
||||
@update:value="setDraftField(field.key, $event)"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="ADB">
|
||||
<n-radio-group v-model:value="draft.adbMode">
|
||||
<n-radio value="device">从设备读取</n-radio>
|
||||
<n-radio value="settings">使用上面的设置</n-radio>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-text class="hint" depth="3">保存后下次登录生效。当前这次登录已经绑定的设备信息不会中途更换。</n-text>
|
||||
<n-text class="hint" depth="3">从设备读取时会带上品牌、型号、系统版本、设备 ID 和已安装的 App 版本。指纹和语言仍用当前设置里的值。</n-text>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="proxy" tab="代理" display-directive="if">
|
||||
<n-form class="settings-form" label-placement="left" label-width="96" size="small" :show-feedback="false">
|
||||
<n-form-item label="方式">
|
||||
<n-radio-group v-model:value="draft.proxy.mode">
|
||||
<n-radio value="off">不使用</n-radio>
|
||||
<n-radio value="system">系统代理</n-radio>
|
||||
<n-radio value="custom">自定义</n-radio>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<template v-if="draft.proxy.mode === 'custom'">
|
||||
<n-form-item label="协议">
|
||||
<n-radio-group v-model:value="draft.proxy.scheme">
|
||||
<n-radio value="http">HTTP</n-radio>
|
||||
<n-radio value="socks5">SOCKS5</n-radio>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-form-item label="地址">
|
||||
<n-input v-model:value="draft.proxy.host" placeholder="代理地址" />
|
||||
</n-form-item>
|
||||
<n-form-item label="端口">
|
||||
<n-input v-model:value="draft.proxy.port" placeholder="1-65535" />
|
||||
</n-form-item>
|
||||
<n-form-item label="用户名">
|
||||
<n-input v-model:value="draft.proxy.username" placeholder="可选" />
|
||||
</n-form-item>
|
||||
<n-form-item label="密码">
|
||||
<n-input v-model:value="draft.proxy.password" type="password" show-password-on="click" placeholder="可选" />
|
||||
</n-form-item>
|
||||
</template>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="download" tab="下载" display-directive="if">
|
||||
<n-form class="settings-form" label-placement="left" label-width="96" size="small" :show-feedback="false">
|
||||
<n-form-item label="下载目录">
|
||||
<div class="device-line">
|
||||
<n-input v-model:value="draft.directory" placeholder="下载目录" />
|
||||
<n-button @click="emit('choose')">选择</n-button>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<template #label>
|
||||
<span class="field-label">
|
||||
同时下载
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<span class="help-dot" tabindex="0">?</span>
|
||||
</template>
|
||||
同时进行的下载任务数，范围 1 到 8，默认 2。调低后，多出来的任务会在当前这部下完后停下来。
|
||||
</n-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<n-input-number v-model:value="draft.workers" class="worker-input" button-placement="both" :min="1" :max="8" :precision="0" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</template>
|
||||
Reference in New Issue
Block a user