feat: 添加 RunAPI 支持的 AI 翻译功能及相关样式

README.md

@@ -16,6 +16,9 @@
 > [!Tip]
 > 我们提供Web（PC+H5+小程序）的技术支持服务及定制开发，不限前后端，详细需求可联系作者，微信: isme-admin，邮箱: admin@isme.top
 
+> [!Tip]
+> 项目内置 AI 翻译功能，体验模型由 [RunAPI](https://runapi.co/register?aff=Da0v) 提供支持。如需稳定、快速、实惠的中转模型 API 服务，可前往注册使用，RunAPI 为本项目的用户提供了特别福利，通过此链接注册并联系客服可领取 ¥14 免费额度。
+
 ## 简介
 
 Vue Naive Admin 是一款极简风格的后台管理模板，包含前后端解决方案，前端使用 Vite + Vue3 + Pinia + Unocss，后端使用 Nestjs + TypeOrm + MySql，简单易用，赏心悦目，历经十几次重构和细节打磨，诚意满满！！
@@ -83,6 +86,8 @@ npx degit zclzone/vue-naive-admin
 
 本项目开发测试及运行环境由 [野草云](https://my.yecaoyun.com/aff.php?aff=3162) 提供支持。
 
+本项目 AI 翻译体验模型由 [RunAPI](https://runapi.co/register?aff=Da0v) 提供支持。
+
 ## 版权说明
 
 本项目使用 `MIT协议`，默认授权给任何人，被授权人可免费地无限制的使用、复制、修改、合并、发布、发行、再许可、售卖本软件拷贝、并有权向被供应人授予同等的权利，但必须满足以下条件:

src/views/demo/translate/index.vue

@@ -20,6 +20,7 @@ const resultText = ref('')
 const errorText = ref('')
 const loading = ref(false)
 const showSettings = ref(false)
+const runApiUrl = 'https://runapi.co/register?aff=Da0v'
 
 const settings = useStorage(STORE_KEY, { ...DEFAULT_SETTINGS })
 const draftSettings = reactive({ ...settings.value })
@@ -138,6 +139,18 @@ async function handleCopy() {
         </div>
 
         <div class="flex items-center gap-10">
+          <a
+            v-if="isUsingExperienceKey"
+            class="runapi-badge"
+            :href="runApiUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="打开 RunAPI"
+          >
+            <i class="i-fe:zap" />
+            <span>默认体验模型由中转站平台 RunAPI 提供支持</span>
+            <i class="i-fe:external-link" />
+          </a>
           <n-button quaternary circle title="模型配置" @click="openSettings">
             <template #icon>
               <i class="i-fe:settings" />
@@ -227,6 +240,14 @@ async function handleCopy() {
             当前是体验 Key，所有人每天共享使用约 1000 次翻译，单次最多支持 {{ EXPERIENCE_KEY_MAX_TEXT_LENGTH }} 字符。
           </n-alert>
 
+          <a class="runapi-card" :href="runApiUrl" target="_blank" rel="noopener noreferrer">
+            <span class="min-w-0 flex-1">
+              <strong>默认体验模型由中转站平台 RunAPI 提供支持</strong>
+              <span>点击获取稳定、快速且实惠的模型 API 服务</span>
+            </span>
+            <i class="i-fe:external-link" />
+          </a>
+
           <div>
             <div class="mb-8 text-13 text-#5f6665">
               API Key
@@ -321,6 +342,69 @@ async function handleCopy() {
   font-size: 20px;
 }
 
+.runapi-badge {
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border: 1px solid rgba(var(--primary-color), 0.22);
+  border-radius: 8px;
+  color: rgb(var(--primary-color));
+  background: rgba(var(--primary-color), 0.08);
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.runapi-badge:hover {
+  border-color: rgba(var(--primary-color), 0.38);
+  background: rgba(var(--primary-color), 0.13);
+}
+
+.runapi-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid rgba(var(--primary-color), 0.18);
+  border-radius: 8px;
+  color: #1f2322;
+  background: linear-gradient(135deg, rgba(var(--primary-color), 0.1), rgba(255, 255, 255, 0.9));
+  text-decoration: none;
+}
+
+.runapi-card strong,
+.runapi-card span span {
+  display: block;
+}
+
+.runapi-card strong {
+  color: rgb(var(--primary-color));
+  font-size: 14px;
+}
+
+.runapi-card span span {
+  margin-top: 4px;
+  color: #7a807f;
+  font-size: 12px;
+}
+
+.runapi-card-icon {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  flex: none;
+  border-radius: 8px;
+  color: rgb(var(--primary-color));
+  background: rgba(var(--primary-color), 0.12);
+}
+
 .translate-workspace {
   min-height: 0;
   display: grid;
@@ -431,5 +515,9 @@ async function handleCopy() {
   .translate-workspace {
     grid-template-columns: 1fr;
   }
+
+  .runapi-badge {
+    white-space: normal;
+  }
 }
 </style>