diff --git a/.env.development b/.env.development index 38f5461e..e67e0b80 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,10 @@ #开发环境 NODE_ENV = 'development' -VITE_APP_URL = 'api/' \ No newline at end of file +VITE_APP_URL = 'api/' + +# office 服务代理地址 +VITE_APP_OFFICE_PROXY_URL = '/office/' + +# office 脚本地址(用于动态创建脚本标签) +VITE_APP_OFFICE_SCRIPT_URL = 'https://office.yka.one/web-apps/apps/api/documents/api.js' \ No newline at end of file diff --git a/.env.production b/.env.production index 8a099cff..d170e287 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,10 @@ #生产环境 NODE_ENV = 'production' -VITE_APP_URL = 'api/' \ No newline at end of file +VITE_APP_URL = 'api/' + +# office 服务代理地址 +VITE_APP_OFFICE_PROXY_URL = 'https://office.yka.one/' + +# office 脚本地址(用于动态创建脚本标签) +VITE_APP_OFFICE_SCRIPT_URL = 'https://office.yka.one/web-apps/apps/api/documents/api.js' \ No newline at end of file diff --git a/.env.test b/.env.test index 1fdbfc7b..a21549a5 100644 --- a/.env.test +++ b/.env.test @@ -1,4 +1,10 @@ #测试环境 NODE_ENV = 'test' -VITE_APP_URL = 'api/' \ No newline at end of file +VITE_APP_URL = 'api/' + +# office 服务代理地址 +VITE_APP_OFFICE_PROXY_URL = 'https://office.yka.one/' + +# office 脚本地址(用于动态创建脚本标签) +VITE_APP_OFFICE_SCRIPT_URL = 'https://office.yka.one/web-apps/apps/api/documents/api.js' \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index d10e193e..c27f1751 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,21 @@ # CHANGE LOG +## 3.1.5 + +### Fixes + +- 配置 `tsconfig.json` 中 `ignoreDeprecations` 属性，消除 `ts5.0` 破坏性配置更新警告 + +### Feats + +- 基于 `onlyoffice` 新增 `Office` 功能(待完成...) +- 重写 `AxiosInstance` 类型 +- `src/types` 分包更加清晰 +- 将主色调同步至 `body`，默认同步 `cfg.primaryColor` 值 +- 登陆页一些修改 +- 将一些设置型功能抽离为组件 +- 调整同步主题色执行时机 + ## 3.1.4 ### Fixes diff --git a/cfg.ts b/cfg.ts index e8908008..893fa20c 100644 --- a/cfg.ts +++ b/cfg.ts @@ -9,6 +9,8 @@ import { import type { AppConfigExport } from './src/types/cfg' const config: AppConfigExport = { + /** 默认主题色 */ + primaryColor: '#2d8cf0', /** * * 配置根页面 @@ -83,6 +85,11 @@ const config: AppConfigExport = { changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, + '/office': { + target: 'https://office.yka.one/', + changeOrigin: true, + rewrite: (path) => path.replace(/^\/office/, ''), + }, }, }, /** diff --git a/locales/en-US.json b/locales/en-US.json index a0dc36f8..a503ac0f 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -10,7 +10,11 @@ "Table": "Table", "MultiMenu": "MultiMenu", "Doc": "Doc", - "DocLocal": "Doc (China)" + "DocLocal": "Doc (China)", + "Office": "Office", + "Office_Document": "Document", + "Office_Presentation": "Presentation", + "Office_Spreadsheet": "Spreadsheet" }, "LayoutHeaderTooltipOptions": { "Reload": "Reload Current Page", @@ -32,6 +36,7 @@ "LoginModule": { "Register": "Register", "Signin": "Signin", + "QRCodeSignin": "QRCode Signin", "NamePlaceholder": "please enter user name", "PasswordPlaceholder": "please enter password", "Login": "Login", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 645bec79..51085b1d 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -10,7 +10,11 @@ "Table": "表格", "MultiMenu": "多级菜单", "Doc": "文档", - "DocLocal": "文档 (国内地址)" + "DocLocal": "文档 (国内地址)", + "Office": "办公", + "Office_Document": "文档", + "Office_Presentation": "演示", + "Office_Spreadsheet": "表格" }, "LayoutHeaderTooltipOptions": { "Reload": "刷新当前页面", @@ -32,6 +36,7 @@ "LoginModule": { "Register": "注册", "Signin": "登陆", + "QRCodeSignin": "扫码登陆", "NamePlaceholder": "请输入用户名", "PasswordPlaceholder": "请输入密码", "Login": "登 陆", diff --git a/package.json b/package.json index 5d3affc0..c620b7c9 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "pinia": "^2.0.17", "pinia-plugin-persistedstate": "^2.4.0", "print-js": "^1.6.0", + "qrcode.vue": "^3.3.4", "sass": "^1.54.3", "screenfull": "^6.0.2", "vue": "^3.2.37", diff --git a/src/App.tsx b/src/App.tsx index 430b256c..2c772dcd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,8 +2,59 @@ import RayGlobalProvider from '@/components/RayGlobalProvider/index' import { RouterView } from 'vue-router' import GlobalSpin from '@/spin/index' +import { getCache } from '@/utils/cache' +import { get } from 'lodash-es' +import { useSetting } from '@/store' +import { addClass, removeClass } from '@/utils/element' + const App = defineComponent({ name: 'App', + setup() { + const settingStore = useSetting() + + const { themeValue } = storeToRefs(settingStore) + + /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */ + const syncPrimaryColorToBody = () => { + /** 默认值 */ + const { primaryColor } = __APP_CFG__ + const body = document.body + + const primaryColorOverride = getCache('piniaSettingStore', 'localStorage') + const _p = get( + primaryColorOverride, + 'primaryColorOverride.common.primaryColor', + ) + + body.style.setProperty('--ray-theme-primary-color', _p || primaryColor) + } + + syncPrimaryColorToBody() + + watch( + () => themeValue.value, + (newData) => { + /** + * + * 初始化时根据当前主题色进行初始化 body 的 class 属性 + * + * 根据 themeValue 进行初始化 + */ + const body = document.body + const darkClassName = 'ray-template--dark' + const lightClassName = 'ray-template--light' + + newData + ? removeClass(body, lightClassName) + : removeClass(body, darkClassName) + + addClass(body, newData ? darkClassName : lightClassName) + }, + { + immediate: true, + }, + ) + }, render() { return ( diff --git a/src/axios/api/test.ts b/src/axios/api/test.ts index 220801aa..afea90ff 100644 --- a/src/axios/api/test.ts +++ b/src/axios/api/test.ts @@ -1,4 +1,33 @@ -import useRequest from '@/axios/index' +/** + * + * @author Ray + * + * @date 2023-03-31 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 该方法演示如何使用 axios + * + * 示范如何完整批注响应体及其数据: + * + * ``` + * const demoRequest = () => { + * return {} as AxiosResponseBody + * } + * ``` + */ + +import useRequest from '@/axios/instance' + +interface AxiosTestResponse extends IUnknownObjectKey { + data: IUnknownObjectKey[] + city?: string +} /** * @@ -7,8 +36,7 @@ import useRequest from '@/axios/index' * @medthod get */ export const onAxiosTest = async (city: string) => { - return useRequest({ - method: 'get', + return useRequest({ url: `https://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=${city}`, }) } diff --git a/src/axios/index.ts b/src/axios/index.ts deleted file mode 100644 index 131db6bf..00000000 --- a/src/axios/index.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-02-27 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -/** - * - * 为什么要写这个文件在这儿多此一举呢: - * - 考虑到可能需要什么特殊操作, 所以提前写在这儿了 - * - 可以个性化配置一些东西, 所有配置都会合并到 axios instance config 中 - * - 当然, 你也可以直接使用 instance - */ - -import request from './instance' - -import type { AxiosRequestConfig } from 'axios' - -const useRequest = (config: AxiosRequestConfig) => { - const cfg = Object.assign({}, config, {}) - - return request(cfg) -} - -export default useRequest diff --git a/src/axios/instance.ts b/src/axios/instance.ts index 58e815b0..e7acada1 100644 --- a/src/axios/instance.ts +++ b/src/axios/instance.ts @@ -9,12 +9,19 @@ * @remark 今天也是元气满满撸代码的一天 */ +/** + * + * 请求, 响应拦截器 + * + * 可在此实现共享的基础配置 + */ + import axios from 'axios' -import { useDetermineEnv } from '@use-utils/hook' +import { getDetermineEnv } from '@use-utils/hook' import RequestCanceler from './canceler' import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios' -import type { RequestHeaderOptions } from './type' +import type { RequestHeaderOptions, AxiosInstanceExpand } from './type' const canceler = new RequestCanceler() @@ -36,7 +43,7 @@ const appendRequestHeaders = ( }) } -const server = axios.create({ +const server: AxiosInstanceExpand = axios.create({ baseURL: '', // `import.meta.env`, withCredentials: false, // 是否允许跨域携带 `cookie` timeout: 5 * 1000, @@ -47,7 +54,7 @@ const server = axios.create({ server.interceptors.request.use( (request) => { - const { MODE } = useDetermineEnv() + const { MODE } = getDetermineEnv() if (MODE === 'development') { // TODO: 开发环境 @@ -90,10 +97,3 @@ server.interceptors.response.use( ) export default server - -/** - * - * 请求, 响应拦截器 - * - * 可在此实现共享的基础配置 - */ diff --git a/src/axios/type.ts b/src/axios/type.ts index 81dd2749..e5e5d8bb 100644 --- a/src/axios/type.ts +++ b/src/axios/type.ts @@ -1,4 +1,10 @@ -import type { AxiosHeaders } from 'axios' +import type { + AxiosHeaders, + AxiosRequestConfig, + HeadersDefaults, + AxiosDefaults, + Axios, +} from 'axios' export type AxiosHeaderValue = | AxiosHeaders @@ -12,3 +18,66 @@ export interface RequestHeaderOptions { key: string value: AxiosHeaderValue } + +export interface AxiosInstanceExpand extends Axios { + (config: AxiosRequestConfig): Promise + ( + url: string, + config?: AxiosRequestConfig, + ): Promise + + getUri(config?: AxiosRequestConfig): string + request(config: AxiosRequestConfig): Promise + get( + url: string, + config?: AxiosRequestConfig, + ): Promise + delete( + url: string, + config?: AxiosRequestConfig, + ): Promise + head( + url: string, + config?: AxiosRequestConfig, + ): Promise + options( + url: string, + config?: AxiosRequestConfig, + ): Promise + post( + url: string, + data?: D, + config?: AxiosRequestConfig, + ): Promise + put( + url: string, + data?: D, + config?: AxiosRequestConfig, + ): Promise + patch( + url: string, + data?: D, + config?: AxiosRequestConfig, + ): Promise + postForm( + url: string, + data?: D, + config?: AxiosRequestConfig, + ): Promise + putForm( + url: string, + data?: D, + config?: AxiosRequestConfig, + ): Promise + patchForm( + url: string, + data?: D, + config?: AxiosRequestConfig, + ): Promise + + defaults: Omit & { + headers: HeadersDefaults & { + [key: string]: AxiosHeaderValue + } + } +} diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index a9a14186..e9495835 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -351,7 +351,6 @@ const RayChart = defineComponent({ const resizeChart = () => { if (echartInstance) { echartInstance.resize() - console.log('resize') } } diff --git a/src/components/RayIcon/index.tsx b/src/components/RayIcon/index.tsx index fbfe31b4..42f8423b 100644 --- a/src/components/RayIcon/index.tsx +++ b/src/components/RayIcon/index.tsx @@ -48,6 +48,11 @@ const RayIcon = defineComponent({ type: Number, default: 1, }, + cursorPointer: { + /** 是否启用小手鼠标类型 */ + type: Boolean, + default: false, + }, }, setup(props) { const modelColor = computed(() => props.color) @@ -63,6 +68,10 @@ const RayIcon = defineComponent({ '--ray-icon-depth': props.depth, } + if (props.cursorPointer) { + cssVar['cursor'] = 'pointer' + } + return cssVar }) diff --git a/src/components/RayLink/index.tsx b/src/components/RayLink/index.tsx index 98df02d2..4bc02c89 100644 --- a/src/components/RayLink/index.tsx +++ b/src/components/RayLink/index.tsx @@ -71,6 +71,7 @@ const RayLink = defineComponent({ style={['cursor: pointer']} onClick={this.handleLinkClick.bind(this, curr)} objectFit="cover" + size={24} /> ), default: () => curr.tooltip, diff --git a/src/icons/google.svg b/src/icons/google.svg new file mode 100644 index 00000000..d422a58f --- /dev/null +++ b/src/icons/google.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/icons/login_bg.svg b/src/icons/login_bg.svg new file mode 100644 index 00000000..12ed3eb1 --- /dev/null +++ b/src/icons/login_bg.svg @@ -0,0 +1,602 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/office.svg b/src/icons/office.svg new file mode 100644 index 00000000..1bb9e2c5 --- /dev/null +++ b/src/icons/office.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/icons/qrcode.svg b/src/icons/qrcode.svg new file mode 100644 index 00000000..8a844786 --- /dev/null +++ b/src/icons/qrcode.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/icons/twitter.svg b/src/icons/twitter.svg new file mode 100644 index 00000000..2d8eb3eb --- /dev/null +++ b/src/icons/twitter.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx b/src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx new file mode 100644 index 00000000..fd4bfa8d --- /dev/null +++ b/src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx @@ -0,0 +1,100 @@ +/** + * + * @author Ray + * + * @date 2023-04-02 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { + NSpace, + NCard, + NTabs, + NTabPane, + NGradientText, + NDropdown, + NDivider, + NGrid, + NGridItem, + NSwitch, + NTooltip, +} from 'naive-ui' +import RayIcon from '@/components/RayIcon' + +import { useSetting } from '@/store' + +const ThemeSwitch = defineComponent({ + name: 'ThemeSwitch', + setup() { + const { t } = useI18n() + const settingStore = useSetting() + const { changeSwitcher } = settingStore + const { themeValue } = storeToRefs(settingStore) + + const handleRailStyle = ({ checked }: { checked: boolean }) => { + return checked + ? { + backgroundColor: '#000000', + } + : {} + } + + return { + t, + changeSwitcher, + themeValue, + handleRailStyle, + } + }, + render() { + const { t } = this + + return ( + + + {{ + trigger: () => ( + + this.changeSwitcher(bool, 'themeValue') + } + > + {{ + 'checked-icon': () => + h( + RayIcon, + { + name: 'dark', + }, + {}, + ), + 'unchecked-icon': () => + h( + RayIcon, + { + name: 'light', + }, + {}, + ), + checked: () => '亮', + unchecked: () => '暗', + }} + + ), + default: () => + this.themeValue + ? t('LayoutHeaderSettingOptions.ThemeOptions.Dark') + : t('LayoutHeaderSettingOptions.ThemeOptions.Light'), + }} + + + ) + }, +}) + +export default ThemeSwitch diff --git a/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx index 94824dcb..10de9919 100644 --- a/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx +++ b/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx @@ -6,11 +6,11 @@ import { NSpace, NSwitch, NColorPicker, - NTooltip, NDescriptions, NDescriptionsItem, } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index' + import { useSwatchesColorOptions } from './hook' import { useSetting } from '@/store' @@ -58,7 +58,7 @@ const SettingDrawer = defineComponent({ return { modelShow, - ray: t, + t, handleRailStyle, changePrimaryColor, themeValue, @@ -69,61 +69,22 @@ const SettingDrawer = defineComponent({ } }, render() { + const { t } = this + return ( - + - {this.ray('LayoutHeaderSettingOptions.ThemeOptions.Title')} + {t('LayoutHeaderSettingOptions.ThemeOptions.Title')} - - - {{ - trigger: () => ( - - this.changeSwitcher(bool, 'themeValue') - } - > - {{ - 'checked-icon': () => - h( - RayIcon, - { - name: 'dark', - }, - {}, - ), - 'unchecked-icon': () => - h( - RayIcon, - { - name: 'light', - }, - {}, - ), - }} - - ), - default: () => - this.themeValue - ? this.ray('LayoutHeaderSettingOptions.ThemeOptions.Dark') - : this.ray( - 'LayoutHeaderSettingOptions.ThemeOptions.Light', - ), - }} - - + - {this.ray( - 'LayoutHeaderSettingOptions.ThemeOptions.PrimaryColorConfig', - )} + {t('LayoutHeaderSettingOptions.ThemeOptions.PrimaryColorConfig')} themeValue.value, - (newData) => { - /** - * - * 初始化时根据当前主题色进行初始化 body 的 class 属性 - * - * 根据 themeValue 进行初始化 - */ - const body = document.body - const darkClassName = 'ray-template--dark' - const lightClassName = 'ray-template--light' - - newData - ? removeClass(body, lightClassName) - : removeClass(body, darkClassName) - - addClass(body, newData ? darkClassName : lightClassName) - }, - { - immediate: true, - }, - ) - return { windowHeight, modelReloadRoute, diff --git a/src/office/index.ts b/src/office/index.ts new file mode 100644 index 00000000..7a4d8049 --- /dev/null +++ b/src/office/index.ts @@ -0,0 +1,18 @@ +/** + * + * @author Ray + * + * @date 2023-03-22 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { getDetermineEnv } from '@use-utils/hook' +import request from '@/axios/instance' + +export const getOfficeDocumentApi = async (uuid: string) => { + const { VITE_APP_OFFICE_PROXY_URL } = getDetermineEnv() + const { get } = request +} diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts index 7a02d94d..15d551b2 100644 --- a/src/router/modules/index.ts +++ b/src/router/modules/index.ts @@ -8,9 +8,11 @@ import table from './table' import doc from './doc' import multiMenu from './multi-menu' import docLocal from './doc-local' +import office from './office' const routes = [ dashboard, + office, echart, table, axios, diff --git a/src/router/modules/office.ts b/src/router/modules/office.ts new file mode 100644 index 00000000..dbfa6a86 --- /dev/null +++ b/src/router/modules/office.ts @@ -0,0 +1,36 @@ +export default { + path: '/office', + name: 'office', + component: () => import('@/views/office/index'), + meta: { + i18nKey: 'Office', + icon: 'office', + hidden: true, + }, + children: [ + { + path: '/document', + name: 'document', + component: () => import('@/views/office/views/document/index'), + meta: { + i18nKey: 'Office_Document', + }, + }, + { + path: '/presentation', + name: 'presentation', + component: () => import('@/views/office/views/presentation/index'), + meta: { + i18nKey: 'Office_Presentation', + }, + }, + { + path: '/spreadsheet', + name: 'spreadsheet', + component: () => import('@/views/office/views/spreadsheet/index'), + meta: { + i18nKey: 'Office_Spreadsheet', + }, + }, + ], +} diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts index 6b8479d7..76e31b90 100644 --- a/src/store/modules/setting.ts +++ b/src/store/modules/setting.ts @@ -2,7 +2,7 @@ import { getDefaultLocal } from '@/language/index' import { setCache } from '@use-utils/cache' import type { ConditionalPick } from '@/types/type-utils' -import type { ConfigProviderProps, GlobalThemeOverrides } from 'naive-ui' +import type { GlobalThemeOverrides } from 'naive-ui' interface SettingState { drawerPlacement: NaiveDrawerPlacement @@ -18,12 +18,14 @@ interface SettingState { export const useSetting = defineStore( 'setting', () => { + const { primaryColor } = __APP_CFG__ + const settingState = reactive({ drawerPlacement: 'right' as NaiveDrawerPlacement, primaryColorOverride: { common: { - primaryColor: '#2d8cf0', // 主题色 - primaryColorHover: '#2d8cf0', + primaryColor: primaryColor, // 主题色 + primaryColorHover: primaryColor, }, }, themeValue: false, // `true` 为黑夜主题, `false` 为白色主题 @@ -35,17 +37,23 @@ export const useSetting = defineStore( }) const { locale } = useI18n() + /** 修改当前语言 */ const updateLocale = (key: string) => { - // TODO: 修改语言 locale.value = key settingState.localeLanguage = key setCache('localeLanguage', key, 'localStorage') } + /** 切换主题色 */ const changePrimaryColor = (value: string) => { settingState.primaryColorOverride.common!.primaryColor = value settingState.primaryColorOverride.common!.primaryColorHover = value + + const body = document.body + + /** 设置主题色变量 */ + body.style.setProperty('--ray-theme-primary-color', value) } /** diff --git a/src/types/axios.d.ts b/src/types/axios.d.ts new file mode 100644 index 00000000..6260e6da --- /dev/null +++ b/src/types/axios.d.ts @@ -0,0 +1,15 @@ +export {} + +declare global { + /** + * + * 请求响应体类型 + * + * 可以根据自己实际情况更改 + */ + declare interface AxiosResponseBody { + data: T + message: string + code: number + } +} diff --git a/src/types/cfg.ts b/src/types/cfg.ts index 51237db7..fc19a471 100644 --- a/src/types/cfg.ts +++ b/src/types/cfg.ts @@ -34,6 +34,7 @@ export interface Config { sideBarLogo?: LayoutSideBarLogo mixinCSS?: string rootRoute?: RootRoute + primaryColor?: string } export type Recordable = Record @@ -50,6 +51,7 @@ export interface AppConfig { sideBarLogo?: LayoutSideBarLogo } rootRoute: RootRoute + primaryColor: string } export type AppConfigExport = Config & UserConfigExport diff --git a/src/types/component.d.ts b/src/types/component.d.ts index ecf5e65b..96056665 100644 --- a/src/types/component.d.ts +++ b/src/types/component.d.ts @@ -1,5 +1,26 @@ export {} +import type { ECharts } from 'echarts/core' +import type { + MessageApi, + DialogApi, + LoadingBarApi, + NotificationApi, + MenuOption, + MenuDividerOption, + MenuGroupOption, +} from 'naive-ui' +import type { VNodeChild } from 'vue' + declare global { declare type ComponentSize = 'small' | 'medium' | 'large' + + declare type EChartsInstance = ECharts + + declare type NaiveDrawerPlacement = 'top' | 'right' | 'bottom' | 'left' + + declare type NaiveMenuOptions = + | MenuOption + | MenuDividerOption + | MenuGroupOption } diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 226ac943..c7451895 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -1,27 +1,16 @@ export {} -import type CryptoJS from 'crypto-js' import type { MessageApi, DialogApi, LoadingBarApi, NotificationApi, - MenuOption, - MenuDividerOption, - MenuGroupOption, } from 'naive-ui' -import type { ECharts } from 'echarts/core' -import type { VNodeChild } from 'vue' -import type { LayoutSideBarLogo, LayoutCopyright, AppConfig } from './cfg' +import type { AppConfig } from './cfg' export global { declare const __APP_CFG__: AppConfig - declare type NaiveMenuOptions = - | MenuOption - | MenuDividerOption - | MenuGroupOption - declare interface Window { // 是否存在无界 __POWERED_BY_WUJIE__?: boolean @@ -51,41 +40,10 @@ export global { $dialog: DialogApi $loadingBar: LoadingBarApi $notification: NotificationApi + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + DocsAPI?: any + // eslint-disable-next-line @typescript-eslint/no-explicit-any + DocEditor?: any } - - declare interface IUnknownObjectKey { - [propName: string]: unknown - } - - declare type EventListenerOrEventListenerObject = - | EventListener - | EventListenerObject - - declare type ValidteValueType = - | 'Number' - | 'String' - | 'Boolean' - | 'Object' - | 'Function' - | 'Null' - | 'Undefined' - | 'Array' - | 'Date' - | 'Math' - | 'RegExp' - | 'Error' - - declare type WordArray = CryptoJS.lib.WordArray - - declare type CipherOption = CryptoJS.lib.CipherOption - - declare type CipherParams = CryptoJS.lib.CipherParams - - declare type VoidFunc = (...args: unknown[]) => void - - declare type NaiveDrawerPlacement = 'top' | 'right' | 'bottom' | 'left' - - declare type AnyFunc = (...args: unknown[]) => unknown - - declare type EChartsInstance = ECharts } diff --git a/src/types/utils.d.ts b/src/types/utils.d.ts new file mode 100644 index 00000000..4193149d --- /dev/null +++ b/src/types/utils.d.ts @@ -0,0 +1,38 @@ +export {} + +import type CryptoJS from 'crypto-js' +import type { VNodeChild } from 'vue' + +export global { + declare interface IUnknownObjectKey { + [propName: string]: unknown + } + + declare type EventListenerOrEventListenerObject = + | EventListener + | EventListenerObject + + declare type ValidteValueType = + | 'Number' + | 'String' + | 'Boolean' + | 'Object' + | 'Function' + | 'Null' + | 'Undefined' + | 'Array' + | 'Date' + | 'Math' + | 'RegExp' + | 'Error' + + declare type WordArray = CryptoJS.lib.WordArray + + declare type CipherOption = CryptoJS.lib.CipherOption + + declare type CipherParams = CryptoJS.lib.CipherParams + + declare type VoidFunc = (...args: unknown[]) => void + + declare type AnyFunc = (...args: unknown[]) => unknown +} diff --git a/src/utils/hook.ts b/src/utils/hook.ts index 40409a9a..37b5d772 100644 --- a/src/utils/hook.ts +++ b/src/utils/hook.ts @@ -2,7 +2,7 @@ * * @returns 获取当前项目环境 */ -export const useDetermineEnv = () => { +export const getDetermineEnv = () => { const env = import.meta.env return env diff --git a/src/views/axios/index.tsx b/src/views/axios/index.tsx index 8705e0bf..0dcc1df5 100644 --- a/src/views/axios/index.tsx +++ b/src/views/axios/index.tsx @@ -45,7 +45,7 @@ const Axios = defineComponent({ try { const cb = await onAxiosTest(value) - state.weatherData = cb.data as unknown as IUnknownObjectKey[] + state.weatherData = cb.data } catch (e) { window.$message.error('请求已被取消') } @@ -53,7 +53,8 @@ const Axios = defineComponent({ onBeforeMount(async () => { const cb = await onAxiosTest('成都') - state.weatherData = cb.data as unknown as IUnknownObjectKey[] + + state.weatherData = cb.data }) return { diff --git a/src/views/login/components/QRCodeSignin/index.scss b/src/views/login/components/QRCodeSignin/index.scss new file mode 100644 index 00000000..24e08824 --- /dev/null +++ b/src/views/login/components/QRCodeSignin/index.scss @@ -0,0 +1,5 @@ +.qrcode-signin { + width: 100%; + height: 220px; + @include flexCenter; +} diff --git a/src/views/login/components/QRCodeSignin/index.tsx b/src/views/login/components/QRCodeSignin/index.tsx new file mode 100644 index 00000000..fa5025ab --- /dev/null +++ b/src/views/login/components/QRCodeSignin/index.tsx @@ -0,0 +1,43 @@ +/** + * + * @author Ray + * + * @date 2023-04-02 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import './index.scss' + +import QRCode from 'qrcode.vue' + +/** + * + * 二维码登陆 + * + * 可以根据业务需求自行更改 + */ + +const QRCodeSignin = defineComponent({ + name: 'QRCodeSignin', + setup() { + const qrcodeState = reactive({ + qrcodeValue: 'https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io', + }) + + return { + ...toRefs(qrcodeState), + } + }, + render() { + return ( + + ) + }, +}) + +export default QRCodeSignin diff --git a/src/views/login/components/SSOSignin/index.scss b/src/views/login/components/SSOSignin/index.scss new file mode 100644 index 00000000..5dbc4960 --- /dev/null +++ b/src/views/login/components/SSOSignin/index.scss @@ -0,0 +1,5 @@ +.ray-template--light { + & .sso-signin { + color: #878787; + } +} diff --git a/src/views/login/components/SSOSignin/index.tsx b/src/views/login/components/SSOSignin/index.tsx new file mode 100644 index 00000000..20056529 --- /dev/null +++ b/src/views/login/components/SSOSignin/index.tsx @@ -0,0 +1,83 @@ +/** + * + * @author Ray + * + * @date 2023-04-02 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * SSO 单点登录模块组件 + * + * 按照需求自行增减 + */ + +import './index.scss' + +import { NSpace, NPopover } from 'naive-ui' +import RayIcon from '@/components/RayIcon/index' + +interface SSOSigninOptions { + icon: string + key: string + tooltipLabel: string +} + +const SSOSignin = defineComponent({ + name: 'SSOSignin', + setup() { + const ssoSigninOptions = [ + { + icon: 'github', + key: 'github', + tooltipLabel: 'Github登陆', + }, + { + icon: 'google', + key: 'google', + tooltipLabel: 'Google登陆', + }, + { + icon: 'twitter', + key: 'twitter', + tooltipLabel: 'Twitter登陆', + }, + ] + + const handleSSOSigninClick = (option: SSOSigninOptions) => { + window.$message.info(`调用${option.tooltipLabel}`) + } + + return { + ssoSigninOptions, + handleSSOSigninClick, + } + }, + render() { + return ( + + ) + }, +}) + +export default SSOSignin diff --git a/src/views/login/components/Signin/index.tsx b/src/views/login/components/Signin/index.tsx index 382980ad..fe558380 100644 --- a/src/views/login/components/Signin/index.tsx +++ b/src/views/login/components/Signin/index.tsx @@ -1,4 +1,5 @@ -import { NForm, NFormItem, NInput, NButton } from 'naive-ui' +import { NForm, NFormItem, NInput, NButton, NSpace, NDivider } from 'naive-ui' + import { setCache } from '@/utils/cache' import { useSpin } from '@/spin' import { useSignin } from '@/store' @@ -8,6 +9,8 @@ import type { FormInst } from 'naive-ui' const Signin = defineComponent({ name: 'Signin', setup() { + const loginFormRef = ref() + const { t } = useI18n() const signinStore = useSignin() @@ -23,7 +26,6 @@ const Signin = defineComponent({ const router = useRouter() const signinForm = ref(useSigninForm()) - const loginFormRef = ref() const rules = { name: { @@ -37,6 +39,8 @@ const Signin = defineComponent({ trigger: ['blur', 'input'], }, } + + /** 普通登陆形式 */ const handleLogin = () => { loginFormRef.value?.validate((valid) => { if (!valid) { @@ -69,19 +73,21 @@ const Signin = defineComponent({ } }, render() { + const { t } = this + return ( - + - + - {this.t('LoginModule.Login')} + {t('LoginModule.Login')} ) diff --git a/src/views/login/index.scss b/src/views/login/index.scss index e0ae1b21..26e69e22 100644 --- a/src/views/login/index.scss +++ b/src/views/login/index.scss @@ -1,18 +1,94 @@ +$positionX: 24px; +$positionY: 24px; + .login { - @include flexCenter; - flex-direction: column; - font-size: 36px; + display: flex; - & .login-title { - padding: 18px 0; - } + & .login-wrapper { + position: relative; + flex: auto; - & .login-icon { - border: none; - outline: none; - } + &.login-wrapper--divider { + position: relative; - & .n-card { - width: 360px; + &::before { + content: ""; + position: absolute; + width: 100%; + height: 2px; + background: linear-gradient(135deg, transparent, transparent 75%, #2080f0, transparent 80%, transparent 100%), + linear-gradient(45deg, transparent, transparent 75%, #2080f0, transparent 80%, transparent 100%); + background-size: 1em 1em; + background-repeat: repeat-x, repeat-x; + transform: rotate(90deg); + } + } + + & .login-title__wrapper { + position: absolute; + left: $positionX; + top: $positionY; + } + + & .login-action__wrapper { + position: absolute; + height: 54.4px; + right: $positionX; + top: $positionY; + } + + & .login-copyright__wrapper { + position: absolute; + width: 100%; + text-align: center; + bottom: $positionY; + font-size: 14px; + } + + & .login-wrapper__content { + width: 100%; + height: 100%; + + & .n-grid { + height: 100%; + } + + & .login__left-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: background-color 0.3s var(--r-bezier); + } + + & .login__right-wrapper { + @include flexCenter; + + & .login__right-wrapper__content { + width: 50%; + background-color: transparent; + } + } + } + } +} + +.ray-template--light { + & .login__left-wrapper { + background-color: rgba(32, 128, 240, 0.22); + } + + & .login__right-wrapper { + background-color: #ffffff; + } +} + +.ray-template--dark { + & .login__left-wrapper { + background-color: #2c354b; + } + + & .login__right-wrapper { + background-color: #2a3146; } } diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx index 260db9c7..5b49b68f 100644 --- a/src/views/login/index.tsx +++ b/src/views/login/index.tsx @@ -1,4 +1,5 @@ import './index.scss' + import { NSpace, NCard, @@ -7,22 +8,33 @@ import { NGradientText, NDropdown, NDivider, + NGrid, + NGridItem, } from 'naive-ui' import Signin from './components/Signin/index' import Register from './components/Register/index' -import { useSetting } from '@/store' +import QRCodeSignin from './components/QRCodeSignin/index' +import SSOSignin from './components/SSOSignin/index' import RayIcon from '@/components/RayIcon' -import { localOptions } from '@/language/index' import RayLink from '@/components/RayLink/index' +import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index' + +import { useSetting } from '@/store' +import { localOptions } from '@/language/index' const Login = defineComponent({ name: 'Login', setup() { + const { t } = useI18n() + const { + layout: { copyright }, + } = __APP_CFG__ + const state = reactive({ tabsValue: 'signin', }) - const { t } = useI18n() - const { height: windowHeight } = useWindowSize() + + const { height: windowHeight, width: windowWidth } = useWindowSize() const settingStore = useSetting() const { updateLocale } = settingStore @@ -30,35 +42,115 @@ const Login = defineComponent({ ...toRefs(state), windowHeight, updateLocale, - ray: t, + t, + copyright, + windowWidth, } }, render() { + const { t } = this + return (
- - - this.updateLocale(key)} - > - - - - - - - - - - - - - 友情链接 - - +
= 1200 ? 'login-wrapper--divider' : '', + ]} + > +
+ + + + + + + +
+
) }, diff --git a/src/views/office/index.tsx b/src/views/office/index.tsx new file mode 100644 index 00000000..2d7db214 --- /dev/null +++ b/src/views/office/index.tsx @@ -0,0 +1,21 @@ +/** + * + * @author Ray + * + * @date 2023-03-22 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { RouterView } from 'vue-router' + +const Office = defineComponent({ + name: 'Office', + render() { + return + }, +}) + +export default Office diff --git a/src/views/office/views/document/index.tsx b/src/views/office/views/document/index.tsx new file mode 100644 index 00000000..3f0797d9 --- /dev/null +++ b/src/views/office/views/document/index.tsx @@ -0,0 +1,57 @@ +/** + * + * @author Ray + * + * @date 2023-03-22 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { uuid } from '@/utils/hook' + +import type { PropType } from 'vue' + +const Document = defineComponent({ + name: 'Document', + setup() { + const editorUUID = uuid() + const state = reactive({}) + const config = { + document: { + fileType: 'docx', + key: editorUUID, + title: 'Example Document Title.docx', + url: 'https://example.com/url-to-example-document.docx', + }, + documentType: 'word', + authorization: 'a2122252', + token: 'a2122252', + Authorization: 'a2122252', + editorConfig: { + lang: 'zh-cn', + }, + } + + const registerEdtior = () => { + const uid = uuid(12) + } + + onMounted(() => { + nextTick(() => { + registerEdtior() + }) + }) + + return { + ...toRefs(state), + editorUUID, + } + }, + render() { + return
+ }, +}) + +export default Document diff --git a/src/views/office/views/presentation/index.tsx b/src/views/office/views/presentation/index.tsx new file mode 100644 index 00000000..91557b55 --- /dev/null +++ b/src/views/office/views/presentation/index.tsx @@ -0,0 +1,24 @@ +/** + * + * @author Ray + * + * @date 2023-03-22 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { PropType } from 'vue' + +const Presentation = defineComponent({ + name: 'Presentation', + setup() { + return {} + }, + render() { + return
+ }, +}) + +export default Presentation diff --git a/src/views/office/views/spreadsheet/index.tsx b/src/views/office/views/spreadsheet/index.tsx new file mode 100644 index 00000000..357e60bb --- /dev/null +++ b/src/views/office/views/spreadsheet/index.tsx @@ -0,0 +1,24 @@ +/** + * + * @author Ray + * + * @date 2023-03-22 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { PropType } from 'vue' + +const Spreadsheet = defineComponent({ + name: 'Spreadsheet', + setup() { + return {} + }, + render() { + return
+ }, +}) + +export default Spreadsheet diff --git a/tsconfig.json b/tsconfig.json index d6324113..aac89f85 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,7 +25,8 @@ "@use-micro/*": ["src/micro/*"] }, "suppressImplicitAnyIndexErrors": true, - "types": ["@intlify/unplugin-vue-i18n/messages", "naive-ui/volar"] + "types": ["@intlify/unplugin-vue-i18n/messages", "naive-ui/volar"], + "ignoreDeprecations": "5.0" }, "include": [ "src/**/*.ts", diff --git a/vite.config.ts b/vite.config.ts index 6501ecf0..7408db2d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -32,6 +32,7 @@ const { sideBarLogo, mixinCSS, rootRoute, + primaryColor, } = config /** @@ -51,6 +52,7 @@ const __APP_CFG__ = { sideBarLogo, }, rootRoute, + primaryColor, } // https://vitejs.dev/config/