refactor: use browser builtin crypto, fix some bug

build/config/webpack/webpack.base.conf.js

@@ -160,17 +160,4 @@ config.plugin('progress')
     width: 30,
   }])
 
-config.resolve.set('fallback', {
-  crypto: require.resolve('crypto-browserify'),
-  stream: require.resolve('stream-browserify'),
-})
-
-config.plugin('buffer')
-  .use(new webpack.ProvidePlugin({
-    Buffer: ['buffer', 'Buffer'],
-  }))
-
-config.resolve.alias.set('crypto', 'crypto-browserify')
-config.resolve.alias.set('stream', 'stream-browserify')
-
 module.exports = config

package.json

@@ -37,12 +37,7 @@
     "tailwindcss": "^3.0.23",
     "typescript": "^4.6.3",
     "uuid": "^8.3.2",
-    "vue": "^3.2.31",
-    "date-fns": "^2.29.3",
-    "date-fns-tz": "^1.3.7",
-    "crypto-browserify": "^3.12.0",
-    "stream-browserify": "^3.0.0",
-    "buffer": "^6.0.3"
+    "vue": "^3.2.31"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
@@ -93,8 +88,5 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-middleware": "^5.3.1",
     "webpack-dev-server": "^4.7.4"
-  },
-  "browser": {
-    "crypto": false
   }
 }

src/components/providerCommon/providerCommon.ts

@@ -12,11 +12,8 @@ export default defineComponent({
   props: {
     display: Boolean,
     enableHotkey: Boolean,
-    nahotkeyme: {
-      type: null,
-      required: true,
-    },
-
+    icon: null,
+    hotkey: null,
     name: {
       type: String,
       required: true,

src/components/radio/radio.ts

@@ -17,10 +17,6 @@ export interface RadioProps {
 
 export default defineComponent({
   props: {
-    modelValue: {
-      type: null,
-      required: true,
-    },
     value: {
       type: null,
       required: true,
@@ -32,7 +28,7 @@ export default defineComponent({
   },
   setup: (props, ctx) => {
     const handleRadioClick: ((p: any) => unknown) | undefined = inject('radio-group-handle-radio-click')
-    const currentValue = inject('radio-group-value', props.modelValue) as ComputedRef<unknown>
+    const currentValue = inject<ComputedRef<unknown>>('radio-group-value')
 
     const handleClick = () => {
       ctx.emit('update:modelValue', props.value)
@@ -42,10 +38,10 @@ export default defineComponent({
     }
 
     const checked = computed(() => {
-      if (currentValue) {
-        return currentValue.value === props.value
+      if (!currentValue) {
+        return false
       }
-      return props.value === props.modelValue
+      return props.value === currentValue.value
     })
 
     return {

src/components/apiProviderCommon/apiProviderCommon.ts → src/provider/AliApiTranslate/settings/aliApiAppKey/aliApiAppKey.ts

@@ -1,12 +1,7 @@
 import { defineComponent } from 'vue'
 
-import ProviderCommon from '~/components/providerCommon/providerCommon.vue'
-
 export default defineComponent({
   name: 'ApiProviderCommon',
-  components: {
-    ProviderCommon,
-  },
   props: {
     appId: String,
     appKey: String,

src/components/apiProviderCommon/apiProviderCommon.vue → src/provider/AliApiTranslate/settings/aliApiAppKey/aliApiAppKey.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="flex-col items-start">
-    <provider-common
-      v-bind="$attrs"
-    />
-
     <i-text-input-line
       class="app-info-text-input"
       :model-value="props.appId"
@@ -31,5 +27,5 @@
   </div>
 </template>
 
-<script lang="ts" src="./apiProviderCommon.ts"></script>
-<style lang="sass" src="./apiProviderCommon.sass" scoped></style>
+<script lang="ts" src="./aliApiAppKey.ts"></script>
+<style lang="sass" src="./aliApiAppKey.sass" scoped></style>

src/provider/AliApiTranslate/settings/index.ts

@@ -1,7 +1,8 @@
 import { defineComponent, watch, onUnmounted } from 'vue'
 
 import { aliApiLanguagesOptions, ALI_API_LANGUAGES } from '~/provider/AliApiTranslate/aliApiLanguages'
-import ApiProviderCommon from '~/components/apiProviderCommon/apiProviderCommon.vue'
+import ProviderCommon from '~/components/providerCommon/providerCommon.vue'
+import AliApiAppKey from './aliApiAppKey/aliApiAppKey.vue'
 import { store } from '../store'
 import { icons } from '../icons'
 
@@ -15,7 +16,8 @@ const iconOptions = Object
 export default defineComponent({
   name: 'AliApiTranslateSettings',
   components: {
-    ApiProviderCommon,
+    ProviderCommon,
+    AliApiAppKey,
   },
   props: {
     active: Boolean,

src/provider/AliApiTranslate/settings/index.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="flex-col items-start">
-    <api-provider-common
+    <provider-common
       v-model:icon="form.icon"
       v-model:display="form.display"
       v-model:enable-hotkey="form.enableHotkey"
       v-model:hotkey="form.hotkey"
-      v-model:app-id="form.appId"
-      v-model:app-key="form.appKey"
       name="阿里API翻译"
-      product-url="https://www.aliyun.com/product/ai/base_alimt"
       :icons="iconOptions"
     />
 
+    <ali-api-app-key
+      v-model:app-id="form.appId"
+      v-model:app-key="form.appKey"
+    />
+
     <div class="flex mt-6 pt-1">
       <div class="flex-col items-start grow-0 pr-12">
         <div class="text-grey-600 pr-6 mb-2">语言</div>

src/provider/AliApiTranslate/translate.ts

@@ -1,31 +1,46 @@
-import { createHash, createHmac } from 'crypto'
 import { isLeft, left, right } from 'fp-ts/Either'
+import { encode } from 'base64-arraybuffer'
+import md5 from 'md5'
 import { v4 as randomUUID } from 'uuid'
-import { formatInTimeZone } from 'date-fns-tz'
-import { enUS } from 'date-fns/locale'
 
 import { got } from '~/util/gmapi'
 import containerData from '~/provider/AliApiTranslate/container/data'
 
 import { store } from '~/provider/AliApiTranslate/store'
 import { AliApiTranslateParams, AliApiTranslateResult } from '~/provider/AliApiTranslate/types'
 
+const hexToUint8Array = (hexString: string) => Uint8Array
+  .from(
+    hexString.match(/.{1,2}/g)!.map((byte) => parseInt(byte, 16)),
+  )
+
 const MD5Base64 = (str: string) => {
   if (str === '') {
     return ''
   }
-  const md5 = createHash('md5')
-  md5.update(str)
-  return md5.digest('base64')
+  const md5Hex = md5(str)
+  const md5Uint8Arr = hexToUint8Array(md5Hex)
+  const md5Base64 = encode(md5Uint8Arr)
+  return md5Base64
 }
 
-const HMACSha1 = (str: string, key: string) => {
+const HMACSha1 = async (str: string, key: string) => {
   if (str === '') {
     return ''
   }
-  const hmac = createHmac('sha1', key)
-  hmac.update(str)
-  return hmac.digest('base64')
+  const keyUint8Arr = new TextEncoder().encode(key)
+  const singingKey = await window.crypto.subtle.importKey(
+    'raw',
+    keyUint8Arr,
+    { name: 'HMAC', hash: 'SHA-1' },
+    false,
+    ['sign'],
+  )
+  const dataUint8Arr = new TextEncoder().encode(str)
+  const signUint8Arr = await window.crypto.subtle.sign('HMAC', singingKey, dataUint8Arr)
+  const sign2 = encode(signUint8Arr)
+
+  return sign2
 }
 
 function trimIndent(str: string) {
@@ -39,7 +54,8 @@ const doRequest = async (body: string, appId: string, appKey: string) => {
   const method = 'POST'
   const accept = 'application/json'
   const contentType = 'application/json; charset=UTF-8'
-  const date = formatInTimeZone(new Date(), 'Etc/GMT+0', 'E, dd MMM yyyy HH:mm:ss z', { locale: enUS })
+  // const date = formatInTimeZone(new Date(), 'Etc/GMT+0', 'E, dd MMM yyyy HH:mm:ss z', { locale: enUS })
+  const date = new Date().toUTCString()
   const uuid = randomUUID()
   const version = '2019-01-02'
 
@@ -53,7 +69,7 @@ const doRequest = async (body: string, appId: string, appKey: string) => {
     x-acs-signature-nonce:${uuid}
     x-acs-version:${version}
     ${apiPath}`
-  const signature = HMACSha1(trimIndent(stringToSign), appKey)
+  const signature = await HMACSha1(trimIndent(stringToSign), appKey)
   const authorization = `acs ${appId}:${signature}`
 
   const sendPost = async () => {

src/provider/GoogleDict/settings/index.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, reactive } from 'vue'
 
 import ProviderCommon from '~/components/providerCommon/providerCommon.vue'
 import { icons } from '../icons'
@@ -27,8 +27,10 @@ export default defineComponent({
   components: {
     ProviderCommon,
   },
-  setup: () => ({
-    form: store.data,
+  setup: () => reactive({
+    get form() {
+      return store.data
+    },
     iconOptions,
     foldOptions,
   }),