@arkxos/arkos-theme-classic 0.1.0

package/src/os-themes/classic/views/login/userRegister.vue

@@ -0,0 +1,174 @@
+<template>
+	<common-page title="注册新账号">
+		<el-steps :active="stepActive" simple finish-status="success">
+		    <el-step title="基础信息" />
+			<el-step title="详细信息" />
+		    <el-step title="完成注册" />
+		</el-steps>
+		<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
+			<el-form-item label="登录账号" prop="user">
+				<el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
+				<div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
+			</el-form-item>
+			<el-form-item label="登录密码" prop="password">
+				<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
+				<sc-password-strength v-model="form.password"></sc-password-strength>
+				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
+			</el-form-item>
+			<el-form-item label="确认密码" prop="password2">
+				<el-input v-model="form.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
+			</el-form-item>
+			<el-form-item label="" prop="agree">
+				<el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link" @click="showAgree=true">《平台服务协议》</span>
+			</el-form-item>
+		</el-form>
+		<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" :label-width="120">
+			<el-form-item label="真实姓名" prop="userName">
+				<el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
+			</el-form-item>
+			<el-form-item label="邮箱" prop="email">
+				<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
+			</el-form-item>
+			<el-form-item label="账号类型" prop="userType">
+				<el-radio-group v-model="form.userType">
+					<el-radio-button label="1">企业开发者</el-radio-button>
+					<el-radio-button label="2">企业开发者</el-radio-button>
+				</el-radio-group>
+			</el-form-item>
+			<el-form-item label="开通类别" prop="open">
+				<el-checkbox-group v-model="form.open">
+					<el-checkbox label="1">云存储API</el-checkbox>
+					<el-checkbox label="2">云检索API</el-checkbox>
+					<el-checkbox label="3">Javescript API</el-checkbox>
+				</el-checkbox-group>
+			</el-form-item>
+		</el-form>
+		<div v-if="stepActive==2">
+			<el-result icon="success" title="注册成功" sub-title="可以使用登录账号以及手机号登录系统">
+				<template #extra>
+					<el-button type="primary" @click="goLogin">前去登录</el-button>
+				</template>
+			</el-result>
+		</div>
+		<el-form style="text-align: center;">
+			<el-button v-if="stepActive>0 && stepActive<2" @click="pre">上一步</el-button>
+			<el-button v-if="stepActive<1" type="primary" @click="next">下一步</el-button>
+			<el-button v-if="stepActive==1" type="primary" @click="save">提交</el-button>
+		</el-form>
+		<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
+			平台服务协议
+			<template #footer>
+				<el-button @click="showAgree=false">取消</el-button>
+				<el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
+			</template>
+		</el-dialog>
+	</common-page>
+</template>
+
+<script>
+import scPasswordStrength from 'packages/arkui/src/components/scPasswordStrength/index.vue';
+import commonPage from './components/commonPage.vue'
+
+export default {
+  components: {
+    commonPage,
+    scPasswordStrength
+  },
+  data() {
+    return {
+      stepActive: 0,
+      showAgree: false,
+      form: {
+        user: '',
+        password: '',
+        password2: '',
+        agree: false,
+        userName: '',
+        email: '',
+        userType: '1',
+        open: []
+      },
+      rules: {
+        user: [
+          { required: true, message: '请输入账号名' }
+        ],
+        password: [
+          { required: true, message: '请输入密码' }
+        ],
+        password2: [
+          { required: true, message: '请再次输入密码' },
+          {
+            validator: (rule, value, callback) => {
+              if (value !== this.form.password) {
+                callback(new Error('两次输入密码不一致'));
+              } else {
+                callback();
+              }
+            }
+          }
+        ],
+        agree: [
+          {
+            validator: (rule, value, callback) => {
+              if (!value) {
+                callback(new Error('请阅读并同意协议'));
+              } else {
+                callback();
+              }
+            }
+          }
+        ],
+        userName: [
+          { required: true, message: '请输入真实姓名' }
+        ],
+        email: [
+          { required: true, message: '请输入邮箱地址' }
+        ],
+        userType: [
+          { required: true, message: '请选择账户类型' }
+        ],
+        open: [
+          { required: true, message: '请选择开通类别' }
+        ]
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    pre() {
+      this.stepActive -= 1
+    },
+    next() {
+      const formName = `stepForm_${this.stepActive}`
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.stepActive += 1
+        } else {
+          return false
+        }
+      })
+    },
+    save() {
+      const formName = `stepForm_${this.stepActive}`
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.stepActive += 1
+        } else {
+          return false
+        }
+      })
+    },
+    goLogin() {
+      this.$router.push({
+        path: '/login'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/os-themes/classic/views/redirect/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute();
+const router = useRouter();
+const { params, query } = route
+const { path } = params
+
+router.replace({ path: '/' + path, query })
+</script>

package/src/os-themes/classic/views/register.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="register">
+    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
+      <h3 class="title">RuoYi-Cloud-Plus后台管理系统</h3>
+      <el-form-item prop="username">
+        <el-input
+          v-model="registerForm.username"
+          type="text"
+          size="large"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="registerForm.password"
+          type="password"
+          size="large"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter="handleRegister"
+        >
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="confirmPassword">
+        <el-input
+          v-model="registerForm.confirmPassword"
+          type="password"
+          size="large"
+          auto-complete="off"
+          placeholder="确认密码"
+          @keyup.enter="handleRegister"
+        >
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          size="large"
+          v-model="registerForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter="handleRegister"
+        >
+          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+        </el-input>
+        <div class="register-code">
+          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
+        </div>
+      </el-form-item>
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="large"
+          type="primary"
+          style="width:100%;"
+          @click.prevent="handleRegister"
+        >
+          <span v-if="!loading">注 册</span>
+          <span v-else>注 册 中...</span>
+        </el-button>
+        <div style="float: right;">
+          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-register-footer">
+      <span>Copyright © 2018-2023  All Rights Reserved.</span>
+    </div>
+  </div>
+</template>
+
+<script setup name="register">
+import { ElMessageBox } from 'element-plus';
+// import { getCodeImg, register } from "@/api/login";
+
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+
+const registerForm = ref({
+  username: '',
+  password: '',
+  confirmPassword: '',
+  code: '',
+  uuid: '',
+  userType: 'sys_user'
+});
+
+const equalToPassword = (rule, value, callback) => {
+  if (registerForm.value.password !== value) {
+    callback(new Error('两次输入的密码不一致'));
+  } else {
+    callback();
+  }
+};
+
+const registerRules = {
+  username: [
+    { required: true, trigger: 'blur', message: '请输入您的账号' },
+    { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入您的密码' },
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入您的密码' },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
+  ],
+  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
+};
+
+const codeUrl = ref('');
+const loading = ref(false);
+const captchaEnabled = ref(true);
+
+function handleRegister() {
+  proxy.$refs.registerRef.validate(valid => {
+    if (valid) {
+      loading.value = true;
+      // register(registerForm.value).then(res => {
+      //   const username = registerForm.value.username;
+      //   ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
+      //     dangerouslyUseHTMLString: true,
+      //     type: "success",
+      //   }).then(() => {
+      //     router.push("/login");
+      //   }).catch(() => {});
+      // }).catch(() => {
+      //   loading.value = false;
+      //   if (captchaEnabled) {
+      //     getCode();
+      //   }
+      // });
+    }
+  });
+}
+
+function getCode() {
+  // getCodeImg().then(res => {
+  //   captchaEnabled.value = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
+  //   if (captchaEnabled.value) {
+  //     codeUrl.value = "data:image/gif;base64," + res.data.img;
+  //     registerForm.value.uuid = res.data.uuid;
+  //   }
+  // });
+}
+
+getCode();
+</script>
+
+<style lang='scss' scoped>
+.register {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-image: url("../assets/images/login-background.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.register-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
+    height: 40px;
+    input {
+      height: 40px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 0px;
+  }
+}
+.register-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.register-code {
+  width: 33%;
+  height: 40px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-register-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.register-code-img {
+  height: 40px;
+  padding-left: 12px;
+}
+</style>

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/types/axios.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as axios from 'axios';
+
+// 扩展 axios 数据返回类型，可自行扩展
+declare module 'axios' {
+	export interface AxiosResponse<T = any> {
+		code: number;
+		data: T;
+		message: string;
+		type?: string;
+		[key: string]: T;
+	}
+}

package/src/types/func.ts

@@ -0,0 +1,14 @@
+// 定义全局属性的类型
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+import { ComponentCustomProperties } from 'vue';
+
+// declare module '@vue/runtime-core' {
+// 	interface ComponentCustomProperties {
+// 		parseTime: Function;
+// 		parseDate: Function;
+// 		dateTimeStr: string;
+// 		dateStr: string;
+// 		timeStr: string;
+// 		baseURL: string;
+// 	}
+// }

package/src/types/global.d.ts

@@ -0,0 +1,108 @@
+// 申明外部 npm 插件模块
+declare module 'splitpanes';
+declare module 'js-cookie';
+declare module '@wangeditor/editor-for-vue';
+declare module 'qs';
+
+// 声明一个模块，防止引入文件时报错
+declare module '*.json';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.scss';
+declare module '*.ts';
+declare module '*.js';
+
+// 声明文件，*.vue 后缀的文件交给 vue 模块来处理
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+
+// 声明文件，定义全局变量
+/* eslint-disable */
+declare interface Window {
+	nextLoading: boolean;
+}
+
+// 声明路由当前项类型
+declare type RouteItem<T = any> = {
+	path: string;
+	name?: string | symbol | undefined | null;
+	redirect?: string;
+	k?: T;
+	meta?: {
+		title?: string;
+		isLink?: string;
+		isHide?: boolean;
+		isKeepAlive?: boolean;
+		isAffix?: boolean;
+		isIframe?: boolean;
+		roles?: string[];
+		icon?: string;
+		isDynamic?: boolean;
+		isDynamicPath?: string;
+		isIframeOpen?: string;
+		loading?: boolean;
+	};
+	children: T[];
+	query?: { [key: string]: T };
+	params?: { [key: string]: T };
+	contextMenuClickId?: string | number;
+	commonUrl?: string;
+	isFnClick?: boolean;
+	url?: string;
+	transUrl?: string;
+	title?: string;
+	id?: string | number;
+};
+
+// 声明路由 to from
+declare interface RouteToFrom<T = any> extends RouteItem {
+	path?: string;
+	children?: T[];
+}
+
+// 声明路由当前项类型集合
+declare type RouteItems<T extends RouteItem = any> = T[];
+
+// 声明 ref
+declare type RefType<T = any> = T | null;
+
+// 声明 HTMLElement
+declare type HtmlType = HTMLElement | string | undefined | null;
+
+// 申明 children 可选
+declare type ChilType<T = any> = {
+	children?: T[];
+};
+
+// 申明 数组
+declare type EmptyArrayType<T = any> = T[];
+
+// 申明 对象
+declare type EmptyObjectType<T = any> = {
+	[key: string]: T;
+};
+
+// 申明 select option
+declare type SelectOptionType = {
+	value: string | number;
+	label: string | number;
+};
+
+// 鼠标滚轮滚动类型
+declare interface WheelEventType extends WheelEvent {
+	wheelDelta: number;
+}
+
+// table 数据格式公共类型
+declare interface TableType<T = any> {
+	total: number;
+	loading: boolean;
+	param: {
+		pageNum: number;
+		pageSize: number;
+		[key: string]: T;
+	};
+}

package/src/types/layout.d.ts

@@ -0,0 +1,59 @@
+// aside
+declare type AsideState = {
+	menuList: RouteRecordRaw[];
+	clientWidth: number;
+};
+
+// columnsAside
+declare type ColumnsAsideState<T = any> = {
+	columnsAsideList: T[];
+	liIndex: number;
+	liOldIndex: null | number;
+	liHoverIndex: null | number;
+	liOldPath: null | string;
+	difference: number;
+	routeSplit: string[];
+};
+
+// navBars breadcrumb
+declare type BreadcrumbState<T = any> = {
+	breadcrumbList: T[];
+	routeSplit: string[];
+	routeSplitFirst: string;
+	routeSplitIndex: number;
+};
+
+// navBars search
+declare type SearchState<T = any> = {
+	isShowSearch: boolean;
+	menuQuery: string;
+	tagsViewList: T[];
+};
+
+// navBars tagsView
+declare type TagsViewState<T = any> = {
+	routeActive: string | T;
+	routePath: string | unknown;
+	dropdown: {
+		x: string | number;
+		y: string | number;
+	};
+	sortable: T;
+	tagsRefsIndex: number;
+	tagsViewList: T[];
+	tagsViewRoutesList: T[];
+};
+
+// navBars parent
+declare type ParentViewState<T = any> = {
+	refreshRouterViewKey: string;
+	iframeRefreshKey: string;
+	keepAliveNameList: string[];
+	iframeList: T[];
+};
+
+// navBars link
+declare type LinkViewState = {
+	title: string;
+	isLink: string;
+};

package/src/types/mitt.d.ts

@@ -0,0 +1,40 @@
+/**
+ * mitt 事件类型定义
+ *
+ * @method openSetingsDrawer 打开布局设置弹窗
+ * @method restoreDefault 分栏布局，鼠标移入、移出数据显示
+ * @method setSendColumnsChildren 分栏布局，鼠标移入、移出菜单数据传入到 navMenu 下的菜单中
+ * @method setSendClassicChildren 经典布局，开启切割菜单时，菜单数据传入到 navMenu 下的菜单中
+ * @method getBreadcrumbIndexSetFilterRoutes 布局设置弹窗，开启切割菜单时，菜单数据传入到 navMenu 下的菜单中
+ * @method layoutMobileResize 浏览器窗口改变时，用于适配移动端界面显示
+ * @method openOrCloseSortable 布局设置弹窗，开启 TagsView 拖拽
+ * @method openShareTagsView 布局设置弹窗，开启 TagsView 共用
+ * @method onTagsViewRefreshRouterView tagsview 刷新界面
+ * @method onCurrentContextmenuClick tagsview 右键菜单每项点击时
+ * @method updateWartermark 更新水印显示内容
+ */
+declare type MittType<T = any> = {
+	openSetingsDrawer?: string;
+	restoreDefault?: string;
+	setSendColumnsChildren: T;
+	setSendClassicChildren: T;
+	getBreadcrumbIndexSetFilterRoutes?: string;
+	layoutMobileResize: T;
+	openOrCloseSortable?: string;
+	openShareTagsView?: string;
+	onTagsViewRefreshRouterView?: T;
+	onCurrentContextmenuClick?: T;
+	updateWartermark?: T;
+};
+
+// mitt 参数类型定义
+declare type LayoutMobileResize = {
+	layout: string;
+	clientWidth: number;
+};
+
+// mitt 参数菜单类型
+declare type MittMenu = {
+	children: RouteRecordRaw[];
+	item?: RouteItem;
+};