feat(web): support export config

packages/sharelist-web/package.json

@@ -9,7 +9,7 @@
  },
  "dependencies": {
  "@ant-design/icons-vue": "^6.0.1",
- "ant-design-vue": "^2.x",
+ "ant-design-vue": "2.x",
  "axios": "^0.21.0",
  "plyr": "^3.6.8",
  "store2": "^2.12.0",
@@ -39,4 +39,4 @@
  "vue-eslint-parser": "^7.6.0",
  "vue-tsc": "^0.0.24"
  }
-}
+}

packages/sharelist-web/src/config/api.ts

@@ -11,9 +11,11 @@ const api: IAPI[] = [
  ['book', 'POST /search'],
  ['list', 'GET /api/drive/path/:path'],
  ['setting', 'GET /api/setting', { token: true }],
+ ['exportSetting', 'GET /api/setting?raw=true', { token: true }],
  ['saveSetting', 'POST /api/setting', { token: true }],
  ['config', 'GET /api/config'],
  ['clearCache', 'PUT /api/cache/clear'],
+ ['reload', 'PUT /api/reload'],
  //
  ['file', 'POST /api/drive/get', { token: true }],
  ['files', 'POST /api/drive/list', { token: true }],

packages/sharelist-web/src/hooks/useSetting.ts

@@ -1,8 +1,9 @@
-import { ref, Ref, reactive, unref, readonly } from 'vue'
+import { ref, Ref, reactive, unref, readonly, toRaw } from 'vue'
 import request, { ReqResponse } from '@/utils/request'
 import storage from 'store2'
 import { message } from 'ant-design-vue'
 import { useBoolean } from './useHooks'
+import { saveFile } from '../utils/format'
 
 type IUseSetting = {
  (): any
@@ -67,6 +68,16 @@ export const useSetting: IUseSetting = (): any => {
  Object.keys(config).forEach((key) => Reflect.deleteProperty(config, key))
  }
 
+ const reload = () => {
+ request.reload().then((resp: any) => {
+ // hidden()
+ if (resp.status) {
+ message.error(resp.msg)
+ } else {
+ message.success('操作成功')
+ }
+ })
+ }
  // eslint-disable-next-line prettier/prettier
  const noop = () => { }
 
@@ -82,6 +93,17 @@ export const useSetting: IUseSetting = (): any => {
  })
  }
 
+ const exportConfig = () => {
+ request.exportSetting().then((resp: any) => {
+ // hidden()
+ if (resp.status) {
+ message.error(resp.msg)
+ } else {
+ saveFile(JSON.stringify(resp), 'config.json')
+ }
+ })
+ }
+
  if (!config.token && storage.get('ACCESS_TOKEN')) {
  getConfig(storage.get('ACCESS_TOKEN'))
  } else {
@@ -91,14 +113,15 @@ export const useSetting: IUseSetting = (): any => {
 
  return (useSetting.instance = {
  signout,
-
+ reload,
  loginState,
  isLoading,
  getValue,
 
  config,
  setConfig,
  getConfig,
+ exportConfig,
  clearCache,
  })
 }

packages/sharelist-web/src/utils/format.ts

@@ -70,3 +70,48 @@ export const isSupportType = (name: string): string | undefined => {
  return 'video'
  }
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const isType = (type: string) => (obj: any) => Object.prototype.toString.call(obj) === `[object ${type}]`
+
+export const isArray = isType('Array')
+
+export const isObject = isType('Object')
+
+export const isBlob = isType('Blob')
+
+export const isString = (v: string): boolean => typeof v == 'string'
+
+export const getBlob = (data: string, filename: string): Blob | undefined => {
+ let blob
+ try {
+ blob = new Blob([data], { type: 'application/octet-stream' })
+ } catch (e) {
+ /**/
+ }
+ return blob
+}
+
+export const saveFile = (data: Blob | string, filename: string): void => {
+ let blob: Blob | undefined
+ if (isString(data as string)) {
+ blob = getBlob(data as string, filename)
+ } else {
+ blob = data as Blob
+ }
+
+ if (isBlob(blob)) {
+ const URL = window.URL || window.webkitURL
+
+ const link = document.createElement('a')
+
+ link.href = URL.createObjectURL(blob)
+ link.download = filename
+
+ const evt = document.createEvent('MouseEvents')
+ evt.initEvent('click', false, false)
+ // link.click()
+ link.dispatchEvent(evt)
+ URL.revokeObjectURL(link.href)
+ }
+}

packages/sharelist-web/src/views/manage/index.tsx

@@ -5,7 +5,7 @@ import { Layout, Button, Spin } from 'ant-design-vue'
 import request from '@/utils/request'
 import Icon from '@/components/icon'
 import './index.less'
-import { SettingOutlined, DatabaseOutlined, PoweroffOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { SettingOutlined, DatabaseOutlined, PoweroffOutlined, DeleteOutlined, ReloadOutlined, SaveOutlined } from '@ant-design/icons-vue'
 import { Tabs } from 'ant-design-vue'
 const { TabPane } = Tabs
 import General from './partial/general'
@@ -16,12 +16,17 @@ import useConfirm from '@/hooks/useConfirm'
 
 export default defineComponent({
  setup() {
- const { loginState, isLoading, signout, clearCache } = useSetting()
+ const { loginState, isLoading, signout, exportConfig, reload, clearCache } = useSetting()
 
  const confirmClearCache = useConfirm(clearCache, '确认', '确认清除缓存？')
 
  const confirmSignout = useConfirm(signout, '确认', '确认退出？')
 
+ const confirmReload = useConfirm(reload, '确认', '确认重启？')
+
+ const tabsSlots = {
+ tabBarExtraContent: () => <div style="cursor:pointer;" title="保存配置 / Save config" onClick={exportConfig} style="font-size:12px;color:#666;"><SaveOutlined style={{ fontSize: '15px', 'marginRight': '6px' }} />导出配置</div>
+ }
  return () => (
  <div class="setting">
  <div class="settiing-header">
@@ -30,13 +35,14 @@ export default defineComponent({
  {loginState.value == 1 ? (
  <div class="setting-header__actions">
  <DeleteOutlined onClick={confirmClearCache} style={{ fontSize: '18px', marginRight: '16px' }} />
+ <ReloadOutlined onClick={confirmReload} style={{ fontSize: '18px', marginRight: '16px' }} />
  <PoweroffOutlined onClick={confirmSignout} style={{ fontSize: '18px' }} />
  </div>
  ) : null}
  </div>
  <Spin spinning={isLoading.value}>
  {loginState.value == 1 ? (
- <Tabs>
+ <Tabs v-slots={tabsSlots}>
  <TabPane key="general">
  {{
  default: () => <General />,

packages/sharelist-web/src/views/manage/partial/general.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
  { code: 'webdav_path', label: 'WebDAV 路径', type: 'string' },
  { code: 'webdav_proxy', label: 'WebDAV 代理', type: 'boolean' },
  { code: 'webdav_user', label: 'WebDAV 用户名', type: 'string' },
- { code: 'webdav_pass', label: 'WebDAV 密码', type: 'string', secret: true },
+ { code: 'webdav_pass', label: 'WebDAV 密码', type: 'string' },
  ]
  const { config, setConfig } = useSetting()