update

src/locale/en-US.ts

@@ -136,6 +136,9 @@ export default {
   'tool.scaned': 'Scanned and uploaded',
   'global.nosupport': 'Current browser does not support WebSerial function, please use Chrome, Edge, Opera browser.',
   'global.connectFail': 'Connect Fail',
+  'menu.workshop': 'Workshop',
+  'menu.firmware': 'Firmware',
+  'global.use': 'Use',
   ...localeSettings,
   ...localeMessageBox,
   ...localeLogin,

src/locale/zh-CN.ts

@@ -136,6 +136,9 @@ export default {
   'tool.scaned': '已扫码上传',
   'global.nosupport': '当前浏览器不支持网页串口功能，请使用 Chrome, Edge, Opera 浏览器。',
   'global.connectFail': '连接失败',
+  'menu.workshop': '创意工坊',
+  'menu.firmware': '固件市场',
+  'global.use': '使用',
   ...localeSettings,
   ...localeMessageBox,
   ...localeLogin,

src/router/routes/modules/idea.ts

@@ -0,0 +1,38 @@
+import { DEFAULT_LAYOUT } from '../base';
+import { AppRouteRecordRaw } from '../types';
+
+const IDEA: AppRouteRecordRaw = {
+  path: '/idea',
+  name: 'idea',
+  component: DEFAULT_LAYOUT,
+  meta: {
+    locale: 'menu.workshop',
+    requiresAuth: true,
+    icon: 'icon-list',
+    order: 3,
+  },
+  children: [
+    {
+      path: 'firmware',
+      name: 'ideaFirmware',
+      component: () => import('@/views/idea/firmware/index.vue'),
+      meta: {
+        locale: 'menu.firmware',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    },
+    {
+      path: 'Image',
+      name: 'ideaImage',
+      component: () => import('@/views/idea/image/index.vue'),
+      meta: {
+        locale: 'menu.image',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    }
+  ],
+};
+
+export default IDEA;

src/router/routes/modules/list.ts

@@ -8,7 +8,7 @@ const LIST: AppRouteRecordRaw = {
   meta: {
     locale: 'menu.list',
     requiresAuth: true,
-    icon: 'icon-list',
+    icon: 'icon-apps',
     order: 2,
   },
   children: [

src/views/idea/firmware/index.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="container">
+      <Breadcrumb :items="[$t('menu.workshop'), $t('menu.firmware')]" />
+      <a-row :gutter="20" align="stretch">
+        <a-col :span="24">
+            <a-card class="general-card" :title="$t('menu.firmware')">
+                <!-- <template #extra>
+                    <div style="margin-right: 20px;">
+                        <a-link>&nbsp;&nbsp;登录&nbsp;&nbsp;</a-link>
+                        <a-link>&nbsp;&nbsp;注册&nbsp;&nbsp;</a-link>
+                        <a-link>&nbsp;&nbsp;用户名&nbsp;&nbsp;</a-link>
+                        <a-link>&nbsp;&nbsp;退出&nbsp;&nbsp;</a-link>
+                    </div>
+                </template> -->
+                <a-list>
+                    <a-list-item style="width: 100%;">
+                        <a-list-item-meta
+                            title="LOSEHU126.bin"
+                            description="https://github.com/losehu/uv-k5-firmware-custom"
+                        >
+                        </a-list-item-meta>
+                        <template #actions>
+                            <a-link @click="useFirmware('/LOSEHU126.bin')">{{$t('global.use')}}</a-link>
+                        </template>
+                    </a-list-item>
+                    <a-list-item style="width: 100%;">
+                        <a-list-item-meta
+                            title="LOSEHU126K.bin"
+                            description="https://github.com/losehu/uv-k5-firmware-custom"
+                        >
+                        </a-list-item-meta>
+                        <template #actions>
+                            <a-link @click="useFirmware('/LOSEHU126K.bin')">{{$t('global.use')}}</a-link>
+                        </template>
+                    </a-list-item>
+                    <a-list-item style="width: 100%;">
+                        <a-list-item-meta
+                            title="LOSEHU126H.bin"
+                            description="https://github.com/losehu/uv-k5-firmware-custom"
+                        >
+                        </a-list-item-meta>
+                        <template #actions>
+                            <a-link @click="useFirmware('/LOSEHU126H.bin')">{{$t('global.use')}}</a-link>
+                        </template>
+                    </a-list-item>
+                    <a-list-item style="width: 100%;">
+                        <a-list-item-meta
+                            title="LOSEHU117P6（我基于 LOSEHU117 修改的固件）"
+                            description="https://github.com/silenty4ng/uv-k5-firmware-chinese-lts"
+                        >
+                        </a-list-item-meta>
+                        <template #actions>
+                            <a-link @click="useFirmware('/LOSEHU117P6.bin')">{{$t('global.use')}}</a-link>
+                        </template>
+                    </a-list-item>
+                    <a-list-item style="width: 100%;">
+                        <a-list-item-meta
+                            title="LOSEHU117P6K（我基于 LOSEHU117K 修改的固件）"
+                            description="https://github.com/silenty4ng/uv-k5-firmware-chinese-lts"
+                        >
+                        </a-list-item-meta>
+                        <template #actions>
+                            <a-link @click="useFirmware('/LOSEHU117P6K.bin')">{{$t('global.use')}}</a-link>
+                        </template>
+                    </a-list-item>
+                </a-list>
+                <t-pagination style="margin: 10px;" :total="5" showPageNumber :showPageSize="false" />
+            </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { reactive, nextTick } from 'vue';
+  import { useAppStore } from '@/store';
+  import { useRouter } from 'vue-router';
+  
+  const appStore = useAppStore();
+  const router = useRouter()
+  
+  const state : {
+    binaryFile: any,
+    loading: boolean
+  } = reactive({
+    binaryFile: undefined,
+    loading: false
+  })
+  
+  const useFirmware = (url: string) => {
+    router.push({
+      path: '/tool/flash',
+      query: {
+        url
+      }
+    });
+  }
+
+  </script>
+  
+  <script lang="ts">
+    export default {
+      name: 'Backup',
+    };
+  </script>
+  
+  <style scoped lang="less">
+    .container {
+      padding: 0 20px 20px 20px;
+      :deep(.arco-list-content) {
+        overflow-x: hidden;
+      }
+  
+      :deep(.arco-card-meta-title) {
+        font-size: 14px;
+      }
+    }
+    :deep(.arco-list-col) {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  
+    :deep(.arco-list-item) {
+      width: 33%;
+    }
+  
+    :deep(.block-title) {
+      margin: 0 0 12px 0;
+      font-size: 14px;
+    }
+    :deep(.list-wrap) {
+      // min-height: 140px;
+      .list-row {
+        align-items: stretch;
+        .list-col {
+          margin-bottom: 16px;
+        }
+      }
+      :deep(.arco-space) {
+        width: 100%;
+        .arco-space-item {
+          &:last-child {
+            flex: 1;
+          }
+        }
+      }
+    }
+  </style>
+  

src/views/idea/image/index.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="container">
+      <Breadcrumb :items="[$t('menu.workshop'), $t('menu.image')]" />
+      <a-row :gutter="20" align="stretch">
+        <a-col :span="24">
+            <a-card class="general-card" :title="$t('menu.image')">
+                <!-- <template #extra>
+                    <div style="margin-right: 20px;">
+                        <a-link>&nbsp;&nbsp;登录&nbsp;&nbsp;</a-link>
+                        <a-link>&nbsp;&nbsp;注册&nbsp;&nbsp;</a-link>
+                        <a-link>&nbsp;&nbsp;用户名&nbsp;&nbsp;</a-link>
+                        <a-link>&nbsp;&nbsp;退出&nbsp;&nbsp;</a-link>
+                    </div>
+                </template> -->
+              <a-row :gutter="20">
+                <a-col :span="4" v-for="i in [
+                  { name: '罗狮虎', url: '/img1.png'},
+                  { name: '离线小恐龙', url: '/img2.png'},
+                  { name: '不忘初心牢记使命', url: '/img3.png'},
+                  { name: '为人民服务', url: '/img4.png'},
+                  { name: '严禁收听敌台广播', url: '/img5.png'},
+                  { name: '爱因斯坦', url: '/img6.png'},
+                ]">
+                  <t-card :style="{ width: '100%', marginBottom: '10px' }">
+                    <template #cover>
+                      <img :title="i.name" :src="i.url">
+                    </template>
+                    <template #footer>
+                      <t-row :align="'middle'" justify="center" style="gap: 24px">
+                        <t-col flex="auto" style="display: inline-flex; justify-content: center">
+                          <t-button variant="text" shape="square" @click="upImg(i)">
+                            <thumb-up-icon />
+                          </t-button>
+                        </t-col>
+                        <t-col flex="auto" style="display: inline-flex; justify-content: center">
+                          <t-button variant="text" shape="square" @click="useImg(i)">
+                            <check-double-icon />
+                          </t-button>
+                        </t-col>
+                      </t-row>
+                    </template>
+                  </t-card>
+                </a-col>
+              </a-row>
+              <t-pagination style="margin: 10px;" :total="6" showPageNumber :showPageSize="false" />
+            </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { ThumbUpIcon, CheckDoubleIcon } from 'tdesign-icons-vue-next';
+  import { reactive, nextTick } from 'vue';
+  import { useAppStore } from '@/store';
+  import { useRouter } from 'vue-router';
+  
+  const appStore = useAppStore();
+  
+  const router = useRouter()
+
+  const state : {
+    binaryFile: any,
+    loading: boolean
+  } = reactive({
+    binaryFile: undefined,
+    loading: false
+  })
+  
+  const upImg = (i:any) => {
+    alert('图片工坊即将推出');
+  }
+  
+  const useImg = (i:any) => {
+    router.push({
+      path: '/tool/image',
+      query: {
+        url: i.url
+      }
+    });
+  }
+  </script>
+  
+  <script lang="ts">
+    export default {
+      name: 'Backup',
+    };
+  </script>
+  
+  <style scoped lang="less">
+    .container {
+      padding: 0 20px 20px 20px;
+      :deep(.arco-list-content) {
+        overflow-x: hidden;
+      }
+  
+      :deep(.arco-card-meta-title) {
+        font-size: 14px;
+      }
+    }
+    :deep(.arco-list-col) {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  
+    :deep(.arco-list-item) {
+      width: 33%;
+    }
+  
+    :deep(.block-title) {
+      margin: 0 0 12px 0;
+      font-size: 14px;
+    }
+    :deep(.list-wrap) {
+      // min-height: 140px;
+      .list-row {
+        align-items: stretch;
+        .list-col {
+          margin-bottom: 16px;
+        }
+      }
+      :deep(.arco-space) {
+        width: 100%;
+        .arco-space-item {
+          &:last-child {
+            flex: 1;
+          }
+        }
+      }
+    }
+  </style>
+  

src/views/list/flash/index.vue

@@ -18,7 +18,8 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, nextTick } from 'vue';
+import { reactive, nextTick, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import { useAppStore } from '@/store';
 import { disconnect, connect, readPacket, sendPacket, unpackVersion, unpack, flash_generateCommand } from '@/utils/serial.js';
 
@@ -34,6 +35,28 @@ const state : {
   binaryName: ''
 })
 
+const route = useRoute();
+
+onMounted(async ()=>{
+  if(route.query.url){
+    const packet = await fetch(route.query.url)
+    const reader = packet?.body?.getReader();
+    if(reader){
+      const chunks = [];
+      while(true) {
+        const {done, value} = await reader.read();
+        if (done) {
+          break;
+        }
+        chunks.push(...value)
+      }
+      const binary = new Uint8Array(chunks)
+      state.binaryFile = binary
+      state.binaryName = route.query.url.substring(route.query.url.lastIndexOf('/') + 1)
+    }
+  }
+})
+
 const selectFile = () => {
   const input = document.createElement('input');
   input.type = 'file';

src/views/list/image/index.vue

@@ -5,37 +5,6 @@
       <a-col :span="24">
         <a-spin :loading="state.loading" tip="写入中..." style="width: 100%;">
           <a-card class="general-card" :title="$t('menu.image') + $t('global.onStart')">
-            <a-row :gutter="20">
-              <a-col :span="4" v-for="i in [
-                { name: '罗狮虎', url: '/img1.png'},
-                { name: '离线小恐龙', url: '/img2.png'},
-                { name: '不忘初心牢记使命', url: '/img3.png'},
-                { name: '为人民服务', url: '/img4.png'},
-                { name: '严禁收听敌台广播', url: '/img5.png'},
-                { name: '爱因斯坦', url: '/img6.png'}
-              ]">
-                <t-card :style="{ width: '100%' }">
-                  <template #cover>
-                    <img :title="i.name" :src="i.url">
-                  </template>
-                  <template #footer>
-                    <t-row :align="'middle'" justify="center" style="gap: 24px">
-                      <t-col flex="auto" style="display: inline-flex; justify-content: center">
-                        <t-button variant="text" shape="square" @click="upImg(i)">
-                          <thumb-up-icon />
-                        </t-button>
-                      </t-col>
-                      <t-col flex="auto" style="display: inline-flex; justify-content: center">
-                        <t-button variant="text" shape="square" @click="useImg(i)">
-                          <check-double-icon />
-                        </t-button>
-                      </t-col>
-                    </t-row>
-                  </template>
-                </t-card>
-              </a-col>
-            </a-row>
-            <t-pagination style="margin: 10px;" :total="6" showPageNumber :showPageSize="false" />
             <div id="canvasDiv" style="zoom: 250%;"></div>
             <br>
             <a-space>
@@ -50,8 +19,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ThumbUpIcon, CheckDoubleIcon } from 'tdesign-icons-vue-next';
-import { reactive, nextTick } from 'vue';
+import { reactive, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import { useAppStore } from '@/store';
 import { eeprom_write, eeprom_reboot, eeprom_init } from '@/utils/serial.js';
 
@@ -65,11 +34,15 @@ const state : {
   loading: false
 })
 
-const upImg = (i:any) => {
-  alert('图片工坊即将推出');
-}
+const route = useRoute();
 
-const useImg = (i:any) => {
+onMounted(()=>{
+  if(route.query.url){
+    useImg(route.query.url)
+  }
+})
+
+const useImg = (url: string) => {
     const canvas = document.createElement("canvas");
     canvas.width = 128;
     canvas.height = 64;
@@ -78,7 +51,7 @@ const useImg = (i:any) => {
     canvasDiv.innerHTML = "";
     canvasDiv?.append(canvas, canvas2);
     const img = new Image()
-    img.src = i.url;
+    img.src = url;
     img.onload = () => {
       const ctx = canvas.getContext('2d');
       ctx?.drawImage(img, 0, 0, 128, 64);