Commit 02c26b72 authored by UtopiaXC's avatar UtopiaXC

😊 样式demo

parent 2d06f672
Pipeline #5085 canceled with stages
...@@ -13,6 +13,7 @@ class WebUrl { ...@@ -13,6 +13,7 @@ class WebUrl {
const OPEN_KEY='/open_key'; const OPEN_KEY='/open_key';
const PREMIUM='/premium'; const PREMIUM='/premium';
const API_LIST='/api_list'; const API_LIST='/api_list';
const API_DETAIL='/api_detail';
} }
class ApiUrl { class ApiUrl {
......
@php
$user_logged=app('request')->get(HeaderKey::LOGIN_STATUS);
if (!$user_logged){
redirect(WebUrl::LOGIN);
}
@endphp
@extends('root.app')
@section('title')- Open Key @endsection
@section('page_content')
<div class="row">
<div class="col-sm-12 col-md-2">
<div class="file-manager-menu"><span class="fmm-title">信息推送接口</span>
<ul class="list-unstyled">
<li><a href="{{WebUrl::API_DETAIL."/utopia_mps_email"}}"><i class="far fa-folder"></i>邮件推送</a></li>
<li><a href="#"><i class="far fa-clock"></i>钉钉推送</a></li>
<li><a href="#"><i class="fas fa-tablet-alt"></i>QQ推送</a></li>
<li><a href="#"><i class="far fa-star"></i>微信推送</a></li>
<li><a href="#"><i class="far fa-trash-alt"></i>企业微信推送</a></li>
<li><a href="#"><i class="far fa-trash-alt"></i>Telegram推送</a></li>
</ul>
</div>
</div>
<div class="col-md-10">
<div class="card">
<div class="card-body">
<div class="mail-header">
<div class="mail-title">
<h4>邮件推送</h4>
</div>
<div class="mail-actions">
<button type="button" class="btn btn-primary">Mock</button>
<button type="button" class="btn btn-primary">接口状态</button>
</div>
</div>
<p>utopia.push.email<br><br>
通过高效企业级邮箱服务,毫秒级迅速响应发送邮件。
<br>
<br>
<h4>请求参数</h4>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">名称</th>
<th scope="col">类型</th>
<th scope="col">是否必填</th>
<th scope="col">描述</th>
<th scope="col">示例值</th>
</tr>
</thead>
<tbody>
<tr>
<td>secure_key</td>
<td>字符串</td>
<td>是</td>
<td>动态生成的安全密钥,根据您的Open Key算出,请参考<a href="#">SK计算方法</a></td>
<td>b66dab580b71a7559f36eda8546c80e8</td>
</tr>
<tr>
<td>smtp_server</td>
<td>字符串</td>
<td></td>
<td>发信所用SMTP服务器</td>
<td>smtp.demo.com</td>
</tr>
<tr>
<td>email_user</td>
<td>字符串</td>
<td></td>
<td>您的邮箱账号</td>
<td>demo@demo.com</td>
</tr>
</tbody>
</table>
<br>
<h4>请求示例</h4>
<pre lang="json">
{
"secure_key":"b66dab580b71a7559f36eda8546c80e8",
"smtp_server":"smtp.demo.com",
"email_user":"demo@demo.com"
}
</pre>
<br>
<h4>返回参数</h4>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">名称</th>
<th scope="col">类型</th>
<th scope="col">描述</th>
<th scope="col">示例值</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>整型</td>
<td>状态码:<br>
200:正常<br>
400001:参数非法或不全<br>
403001:SK不存在或不正确
</td>
<td>200</td>
</tr>
<tr>
<td>status</td>
<td>字符串</td>
<td>状态描述</td>
<td>success</td>
</tr>
<tr>
<td>data</td>
<td>JSON对象</td>
<td>返回实体,一般为空</td>
<td> </td>
</tr>
</tbody>
</table><br>
<h4>返回示例</h4>
<pre lang="json">
{
"code":200,
"status":"success",
"data":{}
}
</pre>
</div>
</div>
</div>
</div>
@endsection
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div class="col-sm-12 col-md-2"> <div class="col-sm-12 col-md-2">
<div class="file-manager-menu"><span class="fmm-title">信息推送接口</span> <div class="file-manager-menu"><span class="fmm-title">信息推送接口</span>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li><a href="#"><i class="far fa-folder"></i>邮件推送</a></li> <li><a href="{{WebUrl::API_DETAIL."/utopia_mps_email"}}"><i class="far fa-folder"></i>邮件推送</a></li>
<li><a href="#"><i class="far fa-clock"></i>钉钉推送</a></li> <li><a href="#"><i class="far fa-clock"></i>钉钉推送</a></li>
<li><a href="#"><i class="fas fa-tablet-alt"></i>QQ推送</a></li> <li><a href="#"><i class="fas fa-tablet-alt"></i>QQ推送</a></li>
<li><a href="#"><i class="far fa-star"></i>微信推送</a></li> <li><a href="#"><i class="far fa-star"></i>微信推送</a></li>
...@@ -22,73 +22,31 @@ ...@@ -22,73 +22,31 @@
</div> </div>
<div class="col-sm-12 col-md-10"> <div class="col-sm-12 col-md-10">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body" id="page_content">
<div class="accordion" id="accordionExample"> <div class="open-email-content">
<div class="accordion-item"> <div class="mail-header">
<h2 class="accordion-header" id="headingTwo"> <div class="mail-title">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" <h4>消息推送MPS</h4>
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
邮件推送
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="open-email-content">
<div class="mail-header">
<div class="mail-title">
<h4>邮件推送</h4>
</div>
<div class="mail-actions">
<button type="button" class="btn btn-primary">Mock</button>
<button type="button" class="btn btn-primary">接口状态</button>
</div>
</div>
<div class="mail-text">
<p>utopia.push.email<br><br>
通过高效企业级邮箱服务,毫秒级迅速响应发送邮件。
<br>
<br>
<h4>基本信息</h4>
<table>
</table>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="mail-text">
<h2 class="accordion-header" id="headingThree"> <p>
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" Utopia开放平台消息推送MPS(Message Push System)是一系列高效的聚合消息推送接口。
data-bs-target="#collapseThree" aria-expanded="false" <br>组标识:utopia.mps
aria-controls="collapseThree"> 钉钉推送 </p><br>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body"><strong>This is the third item's accordion body.</strong>It
is hidden by default,until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,as well as
the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It's also worth noting that just about any
HTML can go within the <code>.accordion-body</code>, though the transition does
limit overflow.
</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
@endsection @endsection
@section('script') @section('script')
<script> <script>
</script> </script>
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Open Key</h5> <h5 class="card-title">Open Key</h5>
<button type="button" class="btn btn-primary m-b-xs">新增应用</button> <button type="button" class="btn btn-primary m-b-xs" onclick="create_open_id()">新增应用</button>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
...@@ -26,28 +26,25 @@ ...@@ -26,28 +26,25 @@
<tr> <tr>
<th scope="row">1</th> <th scope="row">1</th>
<td>个人地图</td> <td>个人地图</td>
<td><a href="#">点击查看</a></td> <td><a href="javascript:show_open_key()">点击查看</a></td>
<td> <td>
<a href="#"><i data-feather="x"></i></a>&nbsp;&nbsp; <a href="#"><i data-feather="x"></i></a>
<a href="#"><i data-feather="info"></i></a>
</td> </td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>通知推送</td> <td>通知推送</td>
<td><a href="#">点击查看</a></td> <td><a href="javascript:show_open_key()">点击查看</a></td>
<td> <td>
<a href="#"><i data-feather="x"></i></a>&nbsp;&nbsp; <a href="#"><i data-feather="x"></i></a>
<a href="#"><i data-feather="info"></i></a>
</td> </td>
</tr> </tr>
<tr> <tr>
<th scope="row">3</th> <th scope="row">3</th>
<td>测试接口</td> <td>测试接口</td>
<td><a href="#">点击查看</a></td> <td><a href="javascript:show_open_key()">点击查看</a></td>
<td> <td>
<a href="#"><i data-feather="x"></i></a>&nbsp;&nbsp; <a href="#"><i data-feather="x"></i></a>
<a href="#"><i data-feather="info"></i></a>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -56,4 +53,66 @@ ...@@ -56,4 +53,66 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="add_key_dialog" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
aria-labelledby="add_key" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">新建应用</h5>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="add_app_name" class="form-label">应用名</label>
<input type="text" class="form-control" id="add_app_name" aria-describedby="emailHelp">
</div>
</div>
<div class="modal-footer" style="display: flex;justify-content: flex-end">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">新建</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="key_detail_dialog" tabindex="-1"
aria-labelledby="key_detail" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Open Key</h5>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="show_name" class="form-label">应用名</label>
<input type="text" id="show_name" class="form-control" placeholder="测试应用" disabled>
</div>
<div class="mb-3">
<label for="show_key" class="form-label">Open Key</label>
<input type="text" id="show_key" class="form-control" placeholder="f9b32683c80676a977cdbf62933eadba" disabled>
</div>
</div>
<div class="modal-footer" style="display: flex;justify-content: flex-end">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">复制</button>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script>
function create_open_id(){
$("#add_key_dialog").modal('show')
}
function show_open_key(){
$("#key_detail_dialog").modal('show')
}
</script>
@endsection @endsection
...@@ -76,8 +76,8 @@ ...@@ -76,8 +76,8 @@
<li class="sidebar-title">开放平台</li> <li class="sidebar-title">开放平台</li>
<li><a href=""><i data-feather="code"></i>API接口<i class="fas fa-chevron-right dropdown-icon"></i></a> <li><a href=""><i data-feather="code"></i>API接口<i class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class=""> <ul class="">
<li><a href="{{WebUrl::API_LIST."/message_push"}}"><i class="far fa-circle"></i>推送接口</a></li> <li><a href="{{WebUrl::API_LIST."/utopia_mps"}}"><i class="far fa-circle"></i>推送接口</a></li>
<li><a href="{{WebUrl::API_LIST."/map"}}"><i class="far fa-circle"></i>地图接口</a></li> <li><a href="{{WebUrl::API_LIST."/utopia_gis"}}"><i class="far fa-circle"></i>地图接口</a></li>
</ul> </ul>
</li> </li>
<li><a href=""><i data-feather="book"></i>开发文档<i class="fas fa-chevron-right dropdown-icon"></i></a> <li><a href=""><i data-feather="book"></i>开发文档<i class="fas fa-chevron-right dropdown-icon"></i></a>
......
...@@ -45,4 +45,7 @@ Route::group(['prefix' => '/', 'middleware' => [Middleware::SITE_PROFILE_MIDDLEW ...@@ -45,4 +45,7 @@ Route::group(['prefix' => '/', 'middleware' => [Middleware::SITE_PROFILE_MIDDLEW
Route::get(WebUrl::API_LIST . "/{group}", function ($group) { Route::get(WebUrl::API_LIST . "/{group}", function ($group) {
return view('api_list')->with($group); return view('api_list')->with($group);
}); });
Route::get(WebUrl::API_DETAIL."/{api_id}",function ($api_id){
return view('api_detail')->with($api_id);
});
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment